@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
2 lines (1 loc) • 3.31 kB
JavaScript
"use strict";var l=Object.defineProperty;var a=(f,t,e)=>t in f?l(f,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):f[t]=e;var s=(f,t,e)=>(a(f,typeof t!="symbol"?t+"":t,e),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../index2.js"),c=require("../tools/index.js"),g=require("../utils/index.js"),r=20;class u{constructor(t,e){s(this,"left");s(this,"top");s(this,"right");s(this,"bottom");s(this,"width");s(this,"height");s(this,"points");s(this,"isSelected",!1);s(this,"graffiti");s(this,"graffitiEles");s(this,"eventFn");s(this,"isCdTime");s(this,"offsetX");s(this,"offsetY");s(this,"lineWidth");s(this,"bufferCanvas");this.graffiti=t,this.graffitiEles=e,this.lineWidth=t.lineWidth,this.offsetX=0,this.offsetY=0,e.forEach((i,o)=>{o===0?(this.left=i.left,this.right=i.right,this.top=i.top,this.bottom=i.bottom):(this.left>=i.left&&(this.left=i.left),this.right<=i.right&&(this.right=i.right),this.top>=i.top&&(this.top=i.top),this.bottom<=i.bottom&&(this.bottom=i.bottom))}),this.width=this.right-this.left,this.height=this.bottom-this.top,this.bindKeyEvent()}get ctx(){var t;return(t=this.bufferCanvas)==null?void 0:t.getContext("2d")}selected(){const t=this.graffiti.ctx;return t.save(),t.beginPath(),t.strokeStyle=d.SYSTEM_COLOR,t.lineJoin="round",t.lineWidth=1,t.setLineDash([10,5]),t.moveTo(this.left,this.top),t.strokeRect(this.left-1,this.top-1,this.width+2,this.height+2),t.restore(),this.isSelected=!0,this}cancelSelected(){this.isSelected=!1,this.graffiti.flush(),this.graffiti.drawEles(),this.graffiti.eleGroup=null,this.graffitiEles=null}moveGroup(t,e){const i=new Date().getTime();this.offsetX+=t,this.offsetY+=e,!(this.isCdTime+16>i)&&(this.isCdTime=i,this.left+=this.offsetX,this.right+=this.offsetX,this.top+=this.offsetY,this.bottom+=this.offsetY,this.graffitiEles.forEach(o=>{o.moveEle(this.offsetX,this.offsetY)}),this.graffiti.flush(),this.graffiti.drawEles(),this.selected(),this.offsetX=0,this.offsetY=0)}toDataURL(t="image/png",e=.92){const i=this.graffiti.el,o=this.graffiti.dpr,h=i.cloneNode();h.style.position="absolute",h.style.zIndex+=100,h.style.pointerEvents="none",h.width=(r*2+this.width)*o,h.height=(this.height+r*2)*o,h.style.width=r*2+this.width+"px",h.style.height=this.height+r*2+"px",i.appendChild(h),this.bufferCanvas=h,this.ctx.lineCap="round",this.ctx.lineJoin="round",this.ctx.imageSmoothingEnabled=!0,this.ctx.scale(o,o),this.drawEleList();const n=h.toDataURL(t,e);return setTimeout(()=>{this.bufferCanvas.remove(),this.cancelSelected()},0),n}drawEleList(){this.ctx.save(),this.graffitiEles=this.graffitiEles.filter(t=>!t.isDeleted),this.graffitiEles.forEach(t=>{var e;g.updateCtx(this,t),(e=c.tools[t.tool].drawEle)==null||e.call(this,t.points.map(i=>({x:i.x-this.left+r,y:i.y-this.top+r,pressure:i.pressure})))}),this.ctx.restore()}moveFinish(){}deleteGroup(){var t,e;this.graffitiEles.forEach(i=>{i.deleteEle()}),document.removeEventListener("keydown",this.eventFn),(e=(t=this.graffiti.customizeHandle)==null?void 0:t.onGroupHandle)==null||e.call(this.graffiti,null),this.cancelSelected(),this.graffiti.emitStackChange()}bindKeyEvent(){this.eventFn=t=>{this.isSelected&&(t.preventDefault(),(t.key==="Backspace"||t.key==="Delete")&&this.deleteGroup())},document.addEventListener("keydown",this.eventFn)}}exports.EleGroup=u;