参考：
https://blog.csdn.net/u014032819/article/details/77864682
http://fabricjs.com/controls-customization
需要有画布
<canvas id="c" width="300" height="300" style="border:0px solid #aaa">
</canvas>
获得画布
var canvas = this.__canvas = new fabric.Canvas('c');
设置调节矩柄是否空心
fabric.Object.prototype.transparentCorners = false;
设置每个对象位置为中心坐标（代替左上角坐标)
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
设置控制矩柄可用点 (去掉四个单向缩放点)
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function(obj) {
obj['setControlVisible']('mt', false);
obj['setControlVisible']('mb', false);
obj['setControlVisible']('ml', false);
obj['setControlVisible']('mr', false);
})
});
设置矩柄色
obj['borderColor'] = 0x0;
obj['cornerColor'] = 0x0;
obj['cornerStrokeColor'] = 0x0;
添加个色块
var rect = new fabric.Rect({
left: 100,
top: 50,
width: 100,
height: 100,
fill: 'green',
angle: 20,
padding: 0
});
canvas.add(rect);
给每个组件加黑边
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function(obj) {
var bound = obj.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
})
});
矩柄设置为圆形
obj['cornerStyle'] = 'circle';
添加图片操作
fabric.Image.fromURL('img/demo.jpg', function(img) {
canvas.add(img.set({left:200,top:0,angle:45}).scale(.05));
});
添加svg
fabric.loadSVGFromURL('img/demo.svg', function(objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
shape.scale(0.6).set({ left: 200, top: 100, angle:-45 }).setCoords();
canvas.add(shape);
});
添加多边形
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);
插入html图片
<body>
<canvas id="canvas" width='800' height='800'></canvas>
<img src="./2.png" id="img">
<script type="text/javascript" src="./script.js"></script>
</body>
var canvas = new fabric.Canvas('canvas');//声明画布
var imgElement = document.getElementById('img');//声明我们的图片
var imgInstance = new fabric.Image(imgElement,{ //设置图片在canvas中的位置和样子
left:100,
top:100,
width:200,
height:100,
angle:30//设置旋转
});
canvas.add(imgInstance);//加入到canvas中
添加滤镜
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('2.jpg', function(img) {
//添加过滤器
img.filters.push(new fabric.Image.filters.Grayscale());
//应用过滤器并重新渲染画布执行
img.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(img);//把图片添加到画布上
});
设置颜色
new fabric.Color('#f55');
new fabric.Color('#123123');
new fabric.Color('356735');
new fabric.Color('rgb(100,0,100)');
new fabric.Color('rgba(10, 20, 30, 0.5)');
转换颜色
new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"
设置渐变色
circle.setGradient('fill', {
//色标的位置
x1: 0,
y1: 0,//圆的最上沿位置
x2: 0,
y2: circle.height ,//圆的最下沿位置
//渐变的颜色
colorStops: {
0: '#000',
1: '#fff'
}
});
colorStops: {
0: "red",
0.2: "orange",
0.4: "yellow",
0.6: "green",
0.8: "blue",
1: "purple"
}//彩虹的效果
添加文本
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
鼠标交互
var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function(options) {
console.log(options.e.clientX, options.e.clientY)
})
mouse:down :鼠标按下时
mouse:move :鼠标移动时
mouse:up :鼠标抬起时
after:render :画布重绘后
object:selected:对象被选中
object:moving:对象移动
object:rotating:对象被旋转
object:added:对象被加入
object:removed对象被移除
选中事件
var canvas = new fabric.Canvas('canvas');
//方形
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {//选中监听事件
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);
动画
rect.animate('angle',360,{
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('angle','-=5',{onChange:canvas.renderAll.bind(canvas),});
复杂动画
shape.animate('angle','-=50',{
onChange:canvas.renderAll.bind(canvas)
,duration:2000
,easing:fabric.util.ease.easeOutBounce
});
组合对象
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'
});
组合中再添加对象
group.add(new fabric.Rect({
fill: 'blue',
width: 100,
height: 100,
originX: 'center',
originY: 'center'
}));//不更新组合区域，可能后加入的图形不能显示完全
添加并更新
group.addWithUpdate(new fabric.Rect({//更新组合区域
...
left: group.getLeft(),
top: group.getTop(),
originX: 'center',
originY: 'center'
}));
复制一份图形，重新渲染
var group = new fabric.Group([
canvas.item(0).clone(),
canvas.item(1).clone()
]);
// remove all objects and re-render
canvas.clear().renderAll();
// add group onto canvas
canvas.add(group);
加载三个图片并打包组合
fabric.Image.fromURL('1.png', function(img) {
var img1 = img.scale(0.1).set({
left: 100,
top: 100
});
fabric.Image.fromURL('2.png', function(img) {
var img2 = img.scale(0.1).set({
left: 175,
top: 175
});
fabric.Image.fromURL('1.png', function(img) {
var img3 = img.scale(0.1).set({ left: 250, top: 250 });
canvas.add(new fabric.Group([img1, img2, img3], { left: 200, top: 200 }));
});
});
});
序列化
console.log(JSON.stringify(canvas.toJSON()));
解析序列化
var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON( jsonStr );
转化图形为SVG
console.log(canvas.toSVG());
置顶
https://www.jianshu.com/p/939974a482fe
下移：canvas.sendBackwards(canvas.getActiveObject());
上移：canvas.bringForward(canvas.getActiveObject());
置顶：canvas.bringToFront(canvas.getActiveObject());
置底：canvas.sendToBack(canvas.getActiveObject());
取消所有选择并渲染
canvas.discardActiveObject();
canvas.requestRenderAll();
禁止多选
canvas.selection = false
