fabric.js 学习（一）
宫晟
fabric.js 学习（一）
一、概念（什么是fabric.js?
fabric.js是一个canvas（画布）的库，可以在canvas上绘制图形（包括文字）以及对画布大小的修改，文字样式的修改，图案（图形）颜色填充以及样式大小的修改，生成json、svg数据，生成的canvas功能自带拖拽功能。用来实现类似在线图片编辑等类型的项目选用fabric.js是一个不错的选择。
二、基础使用
首先引入fabric.js并在html页面创建一个画布标签，fabric.js可以通过CDN的方式引入：https://cdn.bootcss.com/fabric.js/4.0.0-beta.5/fabric.min.js，vue项目中可以通过npm的方式（之后详细介绍）。
```
<!--html页面部分-->
<html>
<!--在这里插入内容-->
<canvas id="canvas" width="1200" height="500"></canvas>
</html>
<!--js部分-->
<script>
// 声明画布
var canvas = new fabric.Canvas('canvas');
// 绘制图片
fabric.Image.fromURL('./banner.png', function(oImg) {
oImg.scale(0.1);//图片缩小10倍
canvas.add(oImg);
});
//绘制图形
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
canvas.add(circle);
//绘制不可编辑的文本
var text = new fabric.Text('Hello World', {
//这里是对文字属性的设置（包括）
fontSize: 30,
originX: 'center',
originY: 'center'
})
canvas.add(text);
//绘制可编辑文本
var text = new fabric.IText('Hello World', {
fontSize: 30,
originX: 'center',
originY: 'center'
})
canvas.add(text);
//组合图层
var circle = new fabric.Circle({//绘制圆形
radius: 100,
fill: '#f00',
scaleY: 0.5,
originX: 'center',//调整中心点的X轴坐标
originY: 'center'//调整中心点的Y轴坐标
});
var text = new fabric.IText('Hello World', {//绘制文本
fontSize: 30,
originX: 'center',
originY: 'center',
left:500,
top:100,
})
//组合函数（进行组合）
var group = new fabric.Group([circle, text], {
left: 150,
top: 100,
angle: 10
})
canvas.add(group);
</script>
```
三、常用的配置参数
```
width:宽 number;
height:高 number;
fill:填充颜色 string;
stroke:描边颜色 string;
strokeWidth:描边宽度 number;
angle:角度 number;
left:左边距 number;
top:上边距 number;
originX:横轴中心点:['center'|'left'|'right],
originY:纵轴中心点:['center|'top'|'bottom'],
flipX:水平翻转:boolean,
flipY:垂直翻转：boolean,
```
更多的参数配置参考官方文档。
四、常用事件
```
<!--鼠标事件-->
mouse:down -->鼠标按下时
mouse:move -->鼠标移动时
mouse:up -->鼠标松开时
<!--常用监听事件-->
after:render -->画布重绘后
object:selected -->对象被选中
object:moving -->对象移动
object:rotating -->对象被旋转
object:added -->对象被加入
object:removed -->对象被移除
```
更多的事件配置参考官方文档
五、组合与取消组合（用于实现在线编辑图片图层的合并与拆分）
```
<!--组合-->
$(document).on("click",".btn",function(){
if (!canvas.getActiveObject()) {
return;
}
if (canvas.getActiveObject().type !== 'activeSelection') {
return;
}
canvas.getActiveObject().toGroup();
canvas.requestRenderAll();
});
<!--取消组合-->
$(document).on("click",".btn_cancel",function(){
if (!canvas.getActiveObject()) {
return;
}
if (canvas.getActiveObject().type !== 'group') {
return;
}
canvas.getActiveObject().toActiveSelection();
canvas.requestRenderAll();
})
```
对于上面代码中的getActiveObject()方法其意义是获取画布上所有的活动对象，知识点链接整理转载
于https://blog.csdn.net/daicooper/article
/details/[79800718]https://blog.csdn.net/daicooper/article/details/79800718)
六、复制与粘贴（用于实现在线编辑图片的复制图层与粘贴图层）
```
//复制
$(document).on("click",".copy",function(){
//复制功能的主体
canvas.getActiveObject().clone(function(cloned) {
_clipboard = cloned;
//调用粘贴功能的函数
Paste();
});
})
//粘贴功能函数
function Paste() {
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
clonedObj.canvas = canvas;
clonedObj.forEachObject(function(obj) {
canvas.add(obj);
});
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
_clipboard.top += 10;
_clipboard.left += 10;
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
}
```
七、层级问题
使用fabric.js调整处理层级需要用到如下的方式：
```
//当选择画布中的对象时，该对象不出现在顶层。
canvas.preserveObjectStacking = true;
//获取当前活动对象
var level = canvas.getActiveObject();
下移：canvas.sendBackwards(level);
上移：canvas.bringForward(level);
置顶：canvas.bringToFront(level);
置底：canvas.sendToBack(level);
或者
下移：level.sendBackwards();
上移：level.bringForward();
置顶：level.bringToFront();
置底：level.sendToBack();
```
类似资料：