基于canvas的绘图工具fabric.js

###下面是canvas fabric.js的用法

锁住

1 lockMovementX    lockMovementY    lockRotation  
2 lockScalingX    lockScalingY

###选中元素时去掉连接线

1 object.hasBorders = false;

###选中元素时去掉四边的框

1 object.hasControls=false;

###设置选中元素时的样子

1 object.set({
2   borderColor: 'red',
3   cornerColor: 'green',
4   cornerSize: 6
5 });

###设置元素不能被操作

1 Object.selectable=false;

###设置背景图

1 canvas.setBackgroundImage('img/golfball.png',canvas.renderAll.bind(canvas));

###设置背景透明显示

1 canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));

###事件

mouse:up mouse:move mouse:dowm
object:modified object:moving  object:selected object:scalig object:rotating 
before:selection:cleared  selection:cleared
after：render
"path:created"  "object:added" "object:removed"

###添加线

1 var line = new fabric.Line([10, 10, 100, 100], {
2   fill: 'green',
3   stroke: 'green'
4 });
5 canvas.add(line);

###添加矩形

1 var canvas = new fabric.Canvas('c');
2 var rect = new fabric.Rect({
3   left: 100,
4   top: 100,
5   fill: 'red',
6   width: 20,
7   height: 20
8 });
9 canvas.add(rect);

###移动到指定位置

1 rect.set({ left: 20, top: 50 });
2 canvas.renderAll();

###设置一些属性

1 rect.set('fill', 'red');
2 rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
3 rect.set('angle', 15).set('flipY', true);

###添加圆和三角形

1 var circle = new fabric.Circle({
2   radius: 20, fill: 'green', left: 100, top: 100
3 });
4 var triangle = new fabric.Triangle({
5   width: 20, height: 30, fill: 'blue', left: 50, top: 50
6 });
7 canvas.add(circle, triangle);

###椭圆

 1 var ellipse = new fabric.Ellipse({
 2   rx: 45,
 3   ry: 80,
 4   fill: 'yellow',
 5   stroke: 'red',
 6   strokeWidth: 3,
 7   angle: 30,
 8   left: 100,
 9   top: 100
10 });
11 canvas.add(ellipse);

###Canvas中操作一些元素的方法

1 var canvas = new fabric.Canvas('c');
2 var rect = new fabric.Rect();
3 canvas.add(rect); // add object
4 
5 canvas.item(0); // reference fabric.Rect added earlier (first object)
6 canvas.getObjects(); // get all objects on canvas (rect will be first and only)
7 
8 canvas.remove(rect); // remove previously-added fabric.Rect