背景：在实际工作中，接触到批改作业的整体流程。因此，对作业批改有了一些了解，所以想分享一下，希望能给大家一起讨论带来启发1.什么是Fabric.js一个强大的Javascript库，让使用HTML5canvas变得轻而易举。Fabric.js提供了Canvas缺少对象模型、交互等一整套不可或缺的工具2.为什么用它而不用别人首先，Canvas提供了画布能力，但是api不够友好。我们在PC端使用nativecanvas进行校正，但经调查不适合应用到小程序中。帆布。画简单的图形还好，画一些复杂的图形，写一些复杂的效果就没那么方便了。因此，我们决定使用Fabric.js来开发，主要是以对象的形式编写代码。3.Native：canvas和fabric在相同条件下绘制矩形的对比a.原生画布varcanvasEl=document.getElementById('c');varctx=canvasEl.getContext('2d');ctx.fillStyle='红色';//在100,100个点处创建一个大小为20x20的矩形ctx.fillRect(100,100,20,20);b.fabric.jsvarcanvas=newfabric.Canvas('c');//创建一个矩形对象varrect=newfabric.Rect({left:100,top:100fill:"red",width:20,Height:20});//“添加”一个矩形到画布canvas.add(rect);使用免费画笔a.nativecanvasconstdrawLine=(x1,y1,x2,y2)=>{const{ctx}=getCanvas();ctx.lineWidth=2;ctx.lineCap='圆形';ctx.lineJoin='圆形';CTX。fillStyle='红色';ctx.strokeStyle='红色';ctx.moveTo(x1,y1);//lineTo(x,y)从当前位置画一条线到指定的x和y位置ctx.lineTo(x2,y2);//通过线条画出图形的轮廓ctx.stroke();ctx.closePath();};使用fabric不仅仅是因为它以物体的形式绘制图形，更重要的是它集成了非常强大的交互功能。b.使用Fabric.jsfreeDraw(){canvasCtx.isDrawingMode=true;canvasCtx.freeDrawingBrush.color='红色';canvasCtx.freeDrawingBrush.width=2;};4.导入使用方法：1.npm安装：npminstallfabric--save2.通过CDN导入：3.项目引入：import{fabric}from'fabric'创建实例：js:canvasCtx=newfabric.Canvas('my-canvas',{enableRetinaScaling:true,perPixelTargetFind:true,//基于像素的对象检测skipTargetFind:true,selection:false,selectable:false});dom:实例创建完成后，fabric.js会构建两层canvas元素：lower-canvas和upper-canvaslower-canvas：只负责渲染元素upper-canvas：负责所有事件处理5、事件绑定mouseEvent(){canvasCtx.on('mouse:down',(options)=>{TODO:获取点坐标});canvasCtx.on('鼠标:移动',(选项)=>{去做：}）;canvasCtx.on('mouse:up',(options)=>{TODO:};}最新版Fabric不再需要判断手动或点击事件，兼容Events.js兼容移动端手势操作：从下图可以看出，不同平台下触发的事件是不一样的，开箱即用PC端：移动端：6.画图creatImg(){constimageUrl=newImage();imageUrl.setAttribute('crossOrigin','Anonymous');//图片跨域imageUrl.src=object.url;图片网址。onload=()=>{constimageBg=newfabric.Image(imageUrl,{angle:90,//旋转角度hasBorders:false,//去除边框，可以正常运行selectable:false,hasControls:false,//只有Mobile不能（编辑）操作crossOrigin:'Anonymous'//图片跨域});canvasCtx.add(imageBg);};}7.移动图像handleMoveCnavas(options){const{x,y}=movePosition;constdelta=newfabric.Point(options.x-x,options.y-y);canvasCtx.relativePan（增量）；移动位置=选项；}###8.缩放事件下图是移动端示意图：//options----坐标点//targetTouches双指触发，长度为2handleDoubleFinger(options){const{clientX:finger1X,clientY:finger1Y}=options.e.targetTouches[0];const{clientX:finger2X,clientY:finger2Y}=options.e.targetTouches[1];constpowX=(finger2X-finger1X)*(finger2X-finger1X);constpowY=(finger2Y-finger1Y)*(finger2Y-finger1Y);//计算两根手指之间的距离constdistance=Math.sqrt(powX+powY);//每个Letratio=-0.05;if(distance>preDistance){比率=0.05;}preDistance=距离；constx=scaleCenter.x||(Math.abs(finger1X+finger2X))/2;consty=scaleCenter.y||(Math.abs(finger1Y+finger2Y))/2;scaleCenter={x,y};//计算当前缩放尺寸letzoom=ratio+canvasCtx.getZoom();//获取当前缩放比例zoom=Math.max(0.5,zoom);zoom=Math.min(3,zoom);constzoomPoint=newfabric.Point(x,y);canvasCtx.zoomToPoint(zoomPoint,zoom);}9.旋转保存旋转前：旋转后：总结：Fabric主要是基于canvas的创新，可以解决很多原生canvas处理起来特别麻烦的问题。在整个实例对象下面，有一个_objects数组，用来存放画板上的所有元素。元素的个数直接决定了数组的长度。当undo功能开启时，数组本质上是维持完成的当然，Fabric的功能远不止这些。更深入的理解需要以后不断的积累和总结。附录：一些常用的APIadd(object)addinsertAt(object,index)addremove(object)removeforEachObject循环遍历getObjects()getallobjectsitem(int)getsub-itemisEmpty()判断是否画板为空size()画板元素个数fabric.util.drawDashedLine绘制虚线clear()clearrenderAll()redrawrequestRenderAll()请求重新渲染rendercanvas()重画板getCenter().top/left获取中心坐标toDatalessJSON()将画板信息序列化为最小的jsontoJSON()将画板信息序列化为jsonmoveTo(object,index)movesetCursor()setgestureicongetSelectionContext()getselectedcontextgetSelectionElement()getselectedelementgetActiveObject()获取选中对象getActiveObjects()获取多个选中对象discardActiveObject()取消当前选中对象rotate()设置旋转角度setCoords()设置坐标Fabric.jsChinese：中文链接Fabric.js原文：官网文档
