canvas fabric.js api梳理

锁住

lockMovementX   lockMovementY   lockRotation  
lockScalingX    lockScalingY

选中元素时去掉连接线

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',
  width: 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({
  width: 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

加载图片的方法

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);

fabric.Image.fromURL('my_image.png', function(oImg) {
  canvas.add(oImg);
});

fabric.Image.fromURL('my_image.png', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});

通过画路径为形状

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

可以设置路径样式

path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });

动画

rect.animate('angle', 45, {
  onChange: canvas.renderAll.bind(canvas)
});

或

rect.animate('left', '+=100', { onChange: canvas.renderAll.bind(canvas) });

或

rect.animate('angle', '-=5', { onChange: canvas.renderAll.bind(canvas) });

或

rect.animate('left', 500, {
  onChange: canvas.renderAll.bind(canvas),
  duration: 1000,
  easing: fabric.util.ease.easeOutBounce
});

组合的使用

var circle = new fabric.Circle({
  radius: 100,
  fill: '#eef',
  scaleY: 0.5,
  originX: 'center',
  originY: 'center'
});

var text = new fabric.Text('hello world', {
  fontSize: 30,
  originX: 'center',
  originY: 'center'
});

var group = new fabric.Group([ circle, text ], {
  left: 150,
  top: 100,
  angle: -10
});

canvas.add(group);

设置组合中的元素

group.item(0).setFill('red');
group.item(1).set({
  text: 'trololo',
  fill: 'white'
});

序列化

var canvas = new fabric.Canvas('c');
JSON.stringify(canvas);

或

canvas.toDatalessJSON()

反序列化

canvas.loadFromJSON（JSON.stringify(canvas)）

透时图片随mouse移动显示

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';


  fabric.loadSVGFromURL('../assets/135.svg', function(objects) {

    var obj = objects[0].scale(0.25);
    canvas.centerObject(obj);
    canvas.add(obj);

    obj.clone(function(c) {
      canvas.add(c.set({ left: 100, top: 100, angle: -15 }));
    });
    obj.clone(function(c) {
      canvas.add(c.set({ left: 480, top: 100, angle: 15 }));
    });
    obj.clone(function(c) {
      canvas.add(c.set({ left: 100, top: 400, angle: -15 }));
    });
    obj.clone(function(c) {
      canvas.add(c.set({ left: 480, top: 400, angle: 15 }));
    });

    canvas.on('mouse:move', function(options) {

      var p = canvas.getPointer(options.e);

      canvas.forEachObject(function(obj) {
        var distX = Math.abs(p.x - obj.left),
            distY = Math.abs(p.y - obj.top),
            dist = Math.round(Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2)));

        obj.setOpacity(1 / (dist / 20));
      });

      canvas.renderAll();
    });
  });
})();

锁定旋转

  var canvas = new fabric.Canvas('c6');
  canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
  canvas.item(0).lockRotation = true;
  this.__canvases.push(canvas);

锁定大小缩放

var canvas = new fabric.Canvas('c7');
  canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
  canvas.item(0).lockScalingX = canvas.item(0).lockScalingY = true;
  this.__canvases.push(canvas);

锁定X轴移动

  var canvas = new fabric.Canvas('c8');
  canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
  canvas.item(0).lockMovementX = true;
  this.__canvases.push(canvas);

锁定Y轴移动

  var canvas = new fabric.Canvas('c9');
  canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
  canvas.item(0).lockMovementY = true;
  this.__canvases.push(canvas);

设置背景图

  var canvas = new fabric.Canvas('c17');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
  this.__canvases.push(canvas);

设置背景图前显

  var canvas = new fabric.Canvas('c13');
  canvas.add(new fabric.Circle({ radius: 30, fill: &