Fabric.js
一个简单而强大的Javascript HTML5 canvas库。
- [网站][website]
- [注意事项][gotchas]
- 贡献、开发及更多
特性
支持的浏览器/环境
环境 | 支持的版本 | 注释 |
---|---|---|
Firefox | ✔️ | 58 |
Safari | ✔️ | 11 |
Opera | ✔️ | 基于Chromium |
Chrome | ✔️ | 64 |
Edge | ✔️ | 基于Chromium |
Edge Legacy | ❌ | |
IE11 | ❌ | |
Node.js | ✔️ | Node.js 安装 |
Fabric.js默认不使用转译,我们支持的浏览器版本由我们想要使用的canvas API级别和一些JS语法决定。虽然JS可以轻松转译,但canvas API无法转译。
安装
$ npm install fabric --save
// 或
$ yarn add fabric
浏览器
[][cdnjs] [][jsdelivr]
请参阅[浏览器模块][mdn_es6]以了解如何在浏览器中使用es6导入,或使用专用的打包工具。
Node.js
Fabric.js依赖[node-canvas][node_canvas]作为canvas实现(HTMLCanvasElement
的替代品)和[jsdom][jsdom]作为node上的window
实现。
这意味着你可能会遇到node-canvas
的限制和[bugs][node_canvas_issues]。
按照这些[说明][node_canvas_install]来设置和运行node-canvas
。
快速开始
// v6
import { Canvas, Rect } from 'fabric'; // 浏览器
import { StaticCanvas, Rect } from 'fabric/node'; // node
// v5
import { fabric } from 'fabric';
普通HTML
<canvas id="canvas" width="300" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red',
});
canvas.add(rect);
</script>
ReactJS
import React, { useEffect, useRef } from 'react';
import * as fabric from 'fabric'; // v6
import { fabric } from 'fabric'; // v5
export const FabricJSCanvas = () => {
const canvasEl = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const options = { ... };
const canvas = new fabric.Canvas(canvasEl.current, options);
// 使fabric.Canvas实例在你的应用中可用
updateCanvasContext(canvas);
return () => {
updateCanvasContext(null);
canvas.dispose();
}
}, []);
return <canvas width="300" height="300" ref={canvasEl}/>;
};
Node.js
import http from 'http';
import * as fabric from 'fabric/node'; // v6
import { fabric } from 'fabric'; // v5
const port = 8080;
http
.createServer((req, res) => {
const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
canvas.add(rect, text);
canvas.renderAll();
if (req.url === '/download') {
res.setHeader('Content-Type', 'image/png');
res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
canvas.createPNGStream().pipe(res);
} else if (req.url === '/view') {
canvas.createPNGStream().pipe(res);
} else {
const imageData = canvas.toDataURL();
res.writeHead(200, '', { 'Content-Type': 'text/html' });
res.write(`<img src="https://raw.githubusercontent.com/fabricjs/fabric.js/master/${imageData}" />`);
res.end();
}
})
.listen(port, (err) => {
if (err) throw err;
console.log(
`> 已在 http://localhost:${port}、http://localhost:${port}/view 和 http://localhost:${port}/download 上准备就绪`,
);
});
查看我们现成可用的模板。
其他解决方案
项目 | 描述 |
---|---|
[Three.js][three.js] | 3D 图形 |
[PixiJS][pixijs] | WebGL 渲染器 |
[Konva][konva] | 类似功能 |
[html-to-image][html-to-image] | HTML 转图像/画布 |
更多资源
- 正在开发中的新 fabricjs.com 网站
- [
fabricjs.com
上的演示][demos] - [Fabric.js 的
Twitter
账号][twitter] - [Fabric.js 的
CodeTriage
页面][code_triage] - [Fabric.js 在
Stack Overflow
上的标签][so] - [Fabric.js 在
jsfiddle
上的示例][jsfiddles] - [Fabric.js 在
Codepen.io
上的示例][codepens]
致谢
- [kangax][kagnax]
- [asturur][asturur] 的 [
Twitter
账号][asturur_twitter] - [ShaMan123][shaman123]
- [melchiar][melchiar]
- Ernest Delgado 提出的在画布上操作图像的原始想法
- Maxim "hakunin" Chernyak 在库的整个生命周期中提供的想法和对各个部分的帮助
- Sergey Nisnevich 在几何逻辑方面的帮助
- Stefan Kienzle 在修复错误、添加功能、编写文档和处理 GitHub 问题方面的帮助
- Shutterstock 为使用和改进 Fabric.js 投入的时间和资源
- [以及所有其他贡献者][contributors]