详解Canvas实用库Fabric.js使用手册

console.log('selected a rectangle');

});

var circle = new fabric.Circle({ radius: 75, fill: 'blue' });

circle.on('selected', function() {

console.log('selected a circle');

});

canvas.add(rect);

canvas.add(circle);

注：常用监听事件如下：

after:render

object:selected

object:moving

object:rotating

object:added

object:removed

组合

new fabric.Group():接受两个参数：要组合对象名称组成的数组、组合到一起的对象的共同属性。

var canvas = new fabric.Canvas('canvas');
 var circle = new fabric.Circle({//绘制圆形
 radius: 100,
 fill: '#f00',
 scaleY: 0.5,
 originX: 'center',//调整中心点的X轴坐标
 originY: 'center'//调整中心点的Y轴坐标
 });
 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);

序列化与反序列化

序列化

var canvas = new fabric.Canvas('canvas');
 var rect = new fabric.Rect({
 width: 100,
 height: 100,
 fill: 'red'
 });
 canvas.add(rect);
 console.log(JSON.stringify(canvas.toJSON()));

反序列化

var canvas = new fabric.Canvas('canvas');
 canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null}')

SVG

var canvas = new fabric.Canvas('canvas');
 var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
 canvas.add(rect);
 canvas.toSVG();

参考文档：http://fabricjs.com/articles/