基于canvas的绘图工具fabric.js

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

锁住

lockMovementX    lockMovementY    lockRotation  
lockScalingX    lockScalingY

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

1 object.hasBorders = false;

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

object.hasControls=false;

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

object.set({
  borderColor: 'red',
  cornerColor: 'green',
  cornerSize: 6
});

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

Object.selectable=false;

###设置背景图

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

###设置背景透明显示

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"

###添加线

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

###添加矩形

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
   20,
  height: 20
});
canvas.add(rect);

###移动到指定位置

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

###设置一些属性

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

###添加圆和三角形

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
   20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);

###椭圆

var ellipse = new fabric.Ellipse({
  rx: 45,
  ry: 80,
  fill: 'yellow',
  stroke: 'red',
  strokeWidth: 3,
  angle: 30,
  left: 100,
  top: 100
});
canvas.add(ellipse);

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

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object

canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)

canvas.remove(rect); // remove previously-added fabric.Rect