前言之前使用这个框架写过一个卡片DIY的项目，中间遇到很多问题都只能通过google或github issues才能解决，国内资料较少，所以才想写这篇文章来简单的做下总结，希望可以帮到其他人哈。附上个人项目地址：vue-card-diy 欢迎star~ ✨什么是Fabric.js?Fabric.js 是一个强大的H5 canvas框架，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。该框架是个开源项目，项目地址： githubFabric.js有什么功能？使用Fabric.js，你可以在画布上创建和填充对象; 比如简单的几何形状 - 矩形，圆形，椭圆形，多边形，自定义图片或由数百或数千个简单路径组成的更复杂的形状。 另外，还可以使用鼠标缩放，移动和旋转这些对象； 修改它们的属性 - 颜色，透明度，z-index等。也可以将画布上的对象进行组合。下面我将会介绍我常用的功能以及场景，更多功能可以参考 官方文档安装npm安装npm install fabric –save通过cdn引用<script src=“http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>初始化首先在html页面中写一个350 x 200的canvas标签, 这里不写宽高也行，后面可以通过js来设置宽高<canvas id=“canvas” width=“350” height=“200”></canvas>初始化fabric的canvas对象，创建一个卡片（后面都用card表示画布对象）const card = new fabric.Canvas(‘canvas’) // …这里可以写canvas对象的一些配置，后面将会介绍// 如果<canvas>标签没设置宽高，可以通过js动态设置card.setWidth(350)card.setHeight(200)就是这么简单，这样就创建了一个基本的画布。开始花样操作监听画布上的事件官方提供了很多事件，以下为常用的事件：object:added 添加图层object:modified 编辑图层object:removed 移除图层selection:created 初次选中图层selection:updated 图层选择变化selection:cleared 清空图层选中// 在canvas对象初始化后，通过以下方式监听// 比如监听画布的图层编辑事件card.on(‘object:modified’, (e) => { console.log(e.target) // e.target为当前编辑的Object // …旋转，缩放，移动等编辑图层的操作都监听到 // 所以如果有撤销/恢复的场景，这里可以保存编辑状态});设置画布背景// 读取图片地址，设置画布背景fabric.Image.fromURL(‘xx/xx/bg.jpg’, (img) => { img.set({ // 通过scale来设置图片大小，这里设置和画布一样大 scaleX: card.width / img.width, scaleY: card.height / img.height, }); // 设置背景 card.setBackgroundImage(img, card.renderAll.bind(card)); card.renderAll();});如果要设置画布的背景颜色，可以在canvas初始化时设置const card = new fabric.Canvas(‘canvas’, { backgroundColor: ‘blue’ // 画布背景色为蓝色});// 或者card.backgroundColor = ‘blue’;// 或者card.setBackgroundColor(‘blue’);向画布添加图层对象fabric.js提供了很多对象，除了基本的 Rect，Circle，Line，Ellipse，Polygon，Polyline，Triangle对象外，还有如 Image，Textbox，Group等更高级的对象，这些都是继承自Fabric的Object对象。下面我就介绍如何添加图片和文字，其他对象大同小异/*** 如何向画布添加一个Image对象？/// 方式一（通过img元素添加）const imgElement = document.getElementById(‘my-image’);const imgInstance = new fabric.Image(imgElement, { left: 100, // 图片相对画布的左侧距离 top: 100, // 图片相对画布的顶部距离 angle: 30, // 图片旋转角度 opacity: 0.85, // 图片透明度 // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半 scaleX: 0.5, scaleY: 0.5});// 添加对象后, 如下图card.add(imgInstance);// 方式二（通过图片路径添加）fabric.Image.fromURL(‘xx/xx/vue-logo.png’, (img) => { img.set({ hasControls: false, // 是否开启图层的控件 borderColor: ‘orange’, // 图层控件边框的颜色 }); // 添加对象后, 如下图 canvas.add(img);});/** 如何向画布添加一个Textbox对象？*/const textbox = new fabric.Textbox(‘这是一段文字’, { left: 50, top: 50, width: 150, fontSize: 20, // 字体大小 fontWeight: 800, // 字体粗细 // fill: ‘red’, // 字体颜色 // fontStyle: ‘italic’, // 斜体 // fontFamily: ‘Delicious’, // 设置字体 // stroke: ‘green’, // 描边颜色 // strokeWidth: 3, // 描边宽度 hasControls: false, borderColor: ‘orange’, editingBorderColor: ‘blue’ // 点击文字进入编辑状态时的边框颜色});// 添加文字后，如下图card.add(textbox);获取当前选中的图层对象// 方式一this.selectedObj = card.getActiveObject(); // 返回当前画布中被选中的图层 // 方式二card.on(‘selection:created’, (e) => { // 选中图层事件触发时，动态更新赋值 this.selectedObj = e.target})旋转图层// 顺时针90°旋转const currAngle = this.selectedObj.angle; // 当前图层的角度const angle = currAngle === 360 ? 90 :currAngle + 90;this.selectedObj.rotate(angle);// 如果是通过滑块的方式控制旋转// this.selectedObj.rotate(slideValue);// 所有图层的操作之后，都需要调用这个方法card.renderAll()翻转图层// 水平翻转，同理垂直翻转改为scaleY属性this.selectedObj.set({ scaleX: -this.selectedObj.scaleX,})card.renderAll()移除图层card.remove(this.selectedObj) // 传入需要移除的objectcard.renderAll()控制画布上的图层层级向画布添加图层，默认是依次往上叠加，但是当你选中一个图层进入active状态时，该图层会默认置于顶层，如果像禁止选中图层时指定，可以：// 在画布初始化后设置card.preserveObjectStacking = true // 禁止选中图层时自定置于顶部设置之后，我选中vue logo就是这个样子，不会置顶。如何上移和下移图层？// 上移图层this.selectedObj.bringForward();// 下移图层this.selectedObj.sendBackwards();// 也可以使用canvas对象的moveTo方法，移至图层到指定位置card.moveTo(object, index);画布状态记录框架提供了如 toJSON 和 loadFromJSON 方法，作用分别为导出当前画布的json信息，加载json画布信息来还原画布状态。// 导出当前画布信息const currState = card.toJSON(); // 导出的Json如下图// 加载画布信息card.loadFromJSON(lastState, () => { card.renderAll();});将画布导出成图片const dataURL = card.toDataURL({ format: ‘jpeg’, // jpeg或png quality: 0.8 // 图片质量，仅jpeg时可用 // 截取指定位置和大小 //left: 100, //top: 100, //width: 200, //height: 200});Fabric.js的基本介绍就到这里，这个框架很强大，还有很多功能可以去试试，欢迎大家评论交流哈！如转载本文请注明文章作者及出处！