Fabric.js 教程学习玩耍手册指南笔记一

参考资料

http://fabricjs.com/
https://github.com/Rookie-Birds/Fabric-Tutorial_zh-CN

1. 初始化

var canvas = new fabric.Canvas("dom-id");

2. 画形状

// 矩形
// 更新属性方法1
var rect = new fabric.Rect({
  width: 200,
  height: 200,
});
// 更新属性方法2
rect.set("top", 100).set("left", 100);
// 更新属性3
rect.set({
  fill: "red"
});

// 圆形
var circle = new fabric.Circle();
circle.set({ radius: 50, width: 100, height: 100, fill: 'green' });
circle.set("top", 100).set({ left: 100 });

// 最后添加到主canvas
canvas.add(rect);
canvas.add(circle);

3. 画路径

数据属性差不多同SVG,M 移动到点,L用线移动,z结束,关闭path

var path = new fabric.Path("M0,0L200,0L200,200z");
path.set("fill","yellow");

canvas.add(path);

4. 画图片

有 3 种获取图片的方法:

  1. fabric.Image.fromElement 从dom节点获取图片
  2. fabric.Image.fromObject 从图片的data-url数据获取
  3. fabric.Image.fromURL 从远程图片获取

我们这里测试远程获取图片并绘制:

fabric.Image.fromURL("http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg", img => {
canvas.add(img);
})

5. 其他

// 清空画布
canvas.clear();

// 重绘刷新
canvas.renderAll();