用Fabric.js玩转H5Canvas

前言之前用这个框架写过一个卡片DIY项目。中间遇到很多问题只能通过google或者githubissues解决。国内的资料很少，所以想写这篇文章来简单总结一下，希望对大家有所帮助。附上个人项目地址：vue-card-diy欢迎star~?什么是Fabric.js？Fabric.js是一个强大的H5画布框架，它在原生画布之上提供了一个交互式对象模型，通过一个简单的API在画布上执行丰富的操作。该框架是一个开源项目，项目地址：githubFabric.js有哪些功能？使用Fabric.js，您可以在画布上创建和填充对象；例如简单的几何形状-矩形、圆形、椭圆形、多边形、自定义图像或由成百上千条简单路径组成的更复杂的形状。此外，可以使用鼠标缩放、移动和旋转这些对象；修改它们的属性——颜色、透明度、z-index等。画布上的对象也可以组合。下面我就介绍一下我常用的功能和场景。更多功能请参考官方文档安装npm安装npminstallfabric--save通过CDN引用初始化首先，在html页面写一个350x200的canvas标签。这里宽高不写也可以，后面可以通过js设置宽高初始化的canvas对象fabric，创建一个卡片（卡片后面用来表示canvas对象）constcard=newfabric.Canvas('canvas')//...这里可以写一些canvas对象的配置，后面会介绍later//如果标签没有设置宽高，可以通过js动态设置card.setWidth(350)card.setHeight(200)soeasy，这样就创建了一个基本的canvas。启动模式操作并监视画布上的事件。官方提供了很多事件。以下是常用的事件：object:addedaddlayerobject:modifiededitlayerobject:removedremovelayerselection:createdselectlayerselection:updatedforthefirsttimeLayerselectionchangeselection:clearedClearlayerselection//画布对象后初始化后，通过以下方式监听//例如监听canvas的图层编辑事件card.on('object:modified',(e)=>{console.log(e.target)//e.target是当前编辑的Object//...旋转、缩放、移动等编辑层操作被监控//所以如果有undo/redo场景，可以在这里保存编辑状态});setcanvasbackground//读取图片地址，设置canvas背景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.renderAll（）；}）；如果要设置canvas的背景色，可以在canvas初始化时设置constcard=newfabric.Canvas('canvas',{backgroundColor:'blue'//canvas的背景色为蓝色});//或card.backgroundColor='blue';//或card.setBackgroundColor('blue');给画布添加层对象fabric.js提供了很多对象，除了基本的Rect、Circle、Line、Ellipse、Polygon、Polyline、Triangle对象外，还有Image、Textbox、Group等更高级的对象，都是继承自Fabric的Object对象。下面我将介绍如何添加图片和文字，其他对象类似/***如何在画布上添加一个Image对象？*///方法一（通过img元素添加）constimgElement=document.getElementById('my-image');constimgInstance=newfabric.Image(imgElement,{left:100,//图片相对于canvastop的左边距离:100,//图片顶部到canvasangle的距离: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',//图层控件边框颜色});//添加对象后,As如下所示canvas.add(img);});/***如何向画布添加一个文本框对象？*/consttextbox=newfabric.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();//返回当前帆布中的选定层//方法2card.on（'选择：创建'，（e）=>{//触发所选图层事件时，动态更新并分配了此。selectionobj=e。target})Rotatelayer//顺时针旋转90°constcurrAngle=this.selectedObj.angle;//当前图层的角度constangle=currAngle===360?90:当前角度+90;this.selectedObj.rotate(angle);//如果旋转是由滑块控制的//this.selectedObj.rotate(slideValue);//所有图层操作完成后，需要调用该方法card.renderAll()翻转图层//水平翻转，类似垂直翻转到scaleY属性this.selectedObj.set({scaleX:-this.selectedObj.scaleX,})card.renderAll()removelayercard.remove(this.selectedObj)//传入objectcard需要删除。renderAll()控制画布上的图层以将图层添加到画布中。默认是一层层叠加，但是当你选择一个图层进入激活状态时，该图层会默认放在最上面的图层上。如果在图层被禁止选中时指定，可以：//画布初始化后设置card.preserveObjectStacking=true//当图层被禁止选中时，会放在最上面。,不会粘在上面如何上下移动图层？//图层上移this.selectedObj.bringForward();//图层下移this.selectedObj.sendBackwards();//也可以使用canvas对象的moveTo方法将图层移动到卡片指定位置.moveTo（对象，索引）；canvas状态记录框架提供toJSON、loadFromJSON等方法，用于导出当前canvas的json信息，加载jsoncanvas信息恢复canvas状态。//导出当前画布信息constcurrState=card.toJSON();//导出的Json如下图//加载画布信息card.loadFromJSON(lastState,()=>{car??d.renderAll();});导出画布创建图片constdataURL=card.toDataURL({format:'jpeg',//jpegorpngquality:0.8//图片质量，仅jpeg可用//截取指定位置和大小//left:100,//顶部：100，//宽度：200，//高度：200}）；这是Fabric.js的基本介绍。这个框架非常强大，有很多功能你可以试试。欢迎评论交流！如转载本文，请注明文章作者及出处！