Fabric.js

常用的方法-对象

创建一个canvas对象将矩形添加到canvas中

// 参数为canvas的id或者canvasHTML对象
var canvas = new fabric.Canvas('c');

// 创建一个矩形
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
canvas.add(rect);

创建一个canvas对象将图片添加到canvas中

// 参数为canvas的id或者canvasHTML对象
// 创建一个图片
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
  canvas.add(img);
});

新增一个组

// 创建一个矩形
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
// 创建一个圆
var circle = new fabric.Circle({
  left: 150,
  top: 150,
  fill: 'green',
  radius: 20
});
// 创建一个组
var group = new fabric.Group([ rect, circle ], {
  left: 150,
  top: 100,
  angle: -10
});
canvas.add(group);

常用的方法-属性

设置canvas的背景颜色（图片）

canvas.backgroundColor = '#000';
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));

设置canvas的宽高

canvas.setWidth(500);
canvas.setHeight(500);

fabric对象Canvas的方法
1. canvas.renderAll() 重新渲染canvas
2. canvas.clear() 清空canvas
3. canvas.remove(obj) 删除canvas中的对象
4. canvas.discardActiveObject() 取消选中的对象
5. canvas.getActiveObject() 获取选中的对象
6. canvas.getActiveGroup() 获取选中的组
7. canvas.getActiveObjects() 获取选中的对象数组
8. canvas.setActiveObject(obj) 设置选中的对象
9. canvas.setActiveGroup(group) 设置选中的组
10. canvas.setActiveObject(obj) 设置选中的对象
11. canvas.setActiveObjects(objs) 设置选中的对象数组
12. canvas.deactivateAll() 取消选中的对象
13. canvas.deactivateAllWithDispatch() 取消选中的对象并触发事件
14. canvas.isDrawingMode 是否是画笔模式
15. canvas.freeDrawingBrush 画笔的样式
16. canvas.freeDrawingBrush.color 画笔的颜色
17. canvas.freeDrawingBrush.width 画笔的宽度
18. canvas.freeDrawingBrush.shadow 画笔的阴影
19. canvas.freeDrawingBrush.shadow.color 画笔的阴影颜色
20. canvas.freeDrawingBrush.shadow.blur 画笔的阴影模糊度
21. canvas.freeDrawingBrush.shadow.offsetX 画笔的阴影X轴偏移量
fabric对象（Rect、Circle）的方法
1. obj.set('left', 100) 设置对象的left属性
2. obj.set('xx', yy)以此类推可以放在实例化时候的都可以用set方法设置
3. obj.get('left') 获取对象的left属性
4. obj.get('xx') 获取对象的xx属性
5. 将obj放在canvas的最上层 obj.bringToFront()
6. 将obj放在canvas的最下层 obj.sendToBack()

# Fabric.js

# 常用的方法-对象

# 常用的方法-属性

Fabric.js

常用的方法-对象

常用的方法-属性