@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
2 lines (1 loc) • 1.78 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../element/index.js"),h=require("../utils/index.js"),r={pointerdown({offsetX:e,offsetY:s}){this.points.push({x:h.roundToNDecimalPlaces(e),y:h.roundToNDecimalPlaces(s)}),this.ctx.beginPath(),this.ctx.moveTo(this.beginPoint.x,this.beginPoint.y),this.ctx.arc(this.beginPoint.x,this.beginPoint.y,this.lineWidth/2,0,2*Math.PI),this.ctx.fill()},pointermove({offsetX:e,offsetY:s}){if(this.points.push({x:h.roundToNDecimalPlaces(e),y:h.roundToNDecimalPlaces(s)}),this.points.length<3)return;const t=this.points.slice(-2),o=t[0],i={x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2};this.ctx.beginPath(),this.ctx.moveTo(this.beginPoint.x,this.beginPoint.y),this.ctx.quadraticCurveTo(o.x,o.y,i.x,i.y),this.ctx.stroke(),this.beginPoint=i},pointerup(){this.ctx.beginPath(),this.ctx.arc(this.beginPoint.x,this.beginPoint.y,this.lineWidth/2,0,2*Math.PI),this.ctx.fill();let e=this.width,s=this.height,t=0,o=0;this.points.forEach(i=>{i.x<e&&(e=i.x),i.x>t&&(t=i.x),i.y<s&&(s=i.y),i.y>o&&(o=i.y)}),this.graffitiEleList.push(new c.GraffitiEle({tool:"Marker",left:e,top:s,right:t,bottom:o,points:this.points,shadowColor:this.shadowColor,lineWidth:this.lineWidth,shadowBlur:this.shadowBlur,strokeStyle:this.strokeStyle,fillStyle:this.fillStyle}))},drawEle(e){let s=[],t=e[0];this.ctx.beginPath(),this.ctx.moveTo(t.x,t.y),this.ctx.arc(t.x,t.y,this.lineWidth/2,0,2*Math.PI),this.ctx.fill(),e.forEach(o=>{if(s.push(o),s.length<3)return;const i=s.slice(-2),l=i[0],n={x:(i[0].x+i[1].x)/2,y:(i[0].y+i[1].y)/2};this.ctx.beginPath(),this.ctx.moveTo(t.x,t.y),this.ctx.quadraticCurveTo(l.x,l.y,n.x,n.y),this.ctx.stroke(),t=n}),this.ctx.arc(t.x,t.y,this.lineWidth/2,0,2*Math.PI),this.ctx.fill(),s=[]}};exports.Marker=r;