@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
2 lines (1 loc) • 1.44 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../element/index.js"),u={buffer:!0,pointerdown({offsetX:i,offsetY:e}){e+=12,this.bufferCtx.moveTo(i,e),this.points.push({x:i>>0,y:e>>0}),this.bufferCtx.lineJoin="round",this.bufferCtx.lineWidth=4,this.bufferCtx.strokeStyle=this.fillStyle,this.bufferCtx.shadowColor=this.shadowColor,this.bufferCtx.shadowBlur=6,r.call(this,{left:i,top:e,right:i,bottom:e})},pointermove({offsetX:i,offsetY:e}){if(e+=12,this.points.push({x:i>>0,y:e>>0}),this.points.length<4)return;const t=this.points.slice(-4);this.bufferCtx.clearRect(0,0,this.el.width,this.el.height);const f={x:(t[2].x+t[3].x)/2,y:(t[2].y+t[3].y)/2},s=o.genRectByTwoPoint(t[1],t[3]);r.call(this,s),this.bufferCtx.beginPath(),this.bufferCtx.moveTo(this.beginPoint.x,this.beginPoint.y),this.bufferCtx.lineTo(t[0].x,t[0].y),this.bufferCtx.lineTo(t[1].x,t[1].y),this.bufferCtx.lineTo(t[2].x,t[2].y),this.bufferCtx.lineTo(t[3].x,t[3].y),this.bufferCtx.stroke(),this.beginPoint=f}};function r(i){let e=!1;this.graffitiEleList.forEach(t=>{o.isRectIntersect(t,i)&&["Marker","Pen"].includes(t.tool)&&t.points.some((s,l)=>{const h=t.points[l+1]||null;let n;if(h?n=o.genRectByTwoPoint(s,h):n={left:s.x-this.lineWidth,top:s.y-this.lineWidth,right:s.x+this.lineWidth,bottom:s.y+this.lineWidth},o.isRectIntersect(n,i))return!0})&&(e=!0,t.deleteEle())}),e&&(this.flush(),this.drawEles())}exports.Erase=u;