@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
2 lines (1 loc) • 1.31 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../element/index.js"),o=require("../utils/index.js"),n={buffer:!0,pointerdown({offsetX:t,offsetY:i}){this.bufferCtx.moveTo(t,i),this.points.push({x:o.roundToNDecimalPlaces(t),y:o.roundToNDecimalPlaces(i)})},pointermove({offsetX:t,offsetY:i}){this.bufferCtx.clearRect(0,0,this.el.width,this.el.height),this.bufferCtx.beginPath(),this.bufferCtx.moveTo(this.beginPoint.x,this.beginPoint.y),this.bufferCtx.rect(this.beginPoint.x,this.beginPoint.y,t-this.beginPoint.x,i-this.beginPoint.y),this.endPoint={x:t,y:i},this.bufferCtx.stroke()},pointerup(){if(this.endPoint){this.points.push({x:o.roundToNDecimalPlaces(this.endPoint.x),y:o.roundToNDecimalPlaces(this.endPoint.y)});const t=this.points[0],i=this.points[1];this.ctx.beginPath(),this.ctx.moveTo(t.x,t.y),this.ctx.rect(t.x,t.y,i.x-t.x,i.y-t.y),this.ctx.stroke();const e=s.genRectByTwoPoint(t,i);this.graffitiEleList.push(new s.GraffitiEle({tool:"Rect",...e,points:this.points,shadowColor:this.shadowColor,lineWidth:this.lineWidth,shadowBlur:this.shadowBlur,strokeStyle:this.strokeStyle,fillStyle:this.fillStyle}))}},drawEle(t){let i=t[0],e=t[1];this.ctx.beginPath(),this.ctx.moveTo(i.x,i.y),this.ctx.rect(i.x,i.y,e.x-i.x,e.y-i.y),this.ctx.stroke()}};exports.Rect=n;