@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
2 lines (1 loc) • 9.39 kB
JavaScript
"use strict";var z=Object.defineProperty;var H=(s,t,i)=>t in s?z(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var h=(s,t,i)=>(H(s,typeof t!="symbol"?t+"":t,i),i),b=(s,t,i)=>{if(!t.has(s))throw TypeError("Cannot "+i)};var o=(s,t,i)=>(b(s,t,"read from private field"),i?i.call(s):t.get(s)),l=(s,t,i)=>{if(t.has(s))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(s):t.set(s,i)},r=(s,t,i,e)=>(b(s,t,"write to private field"),e?e.call(s,i):t.set(s,i),i);var u=(s,t,i)=>(b(s,t,"access private method"),i);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./tools/index.js"),B=require("./stack/index.js"),E=require("./element/index.js"),W=require("./assets/cursor.png.js"),P=require("./assets/eraser.png.js"),L=require("./utils/index.js"),R=require("./element/group.js"),D="#1493ee";var d,C,m,x,p,f,w,a,c,S,k,v,T;class G{constructor(t,i){l(this,S);l(this,v);h(this,"options",{initialTool:"Marker",createBufferCanvasStyle:{},allowType:["pen","mouse","touch"],allowButton:[0],shadowColor:"rgba(1,1,1,0.6)",shadowBlur:0,lineWidth:2,color:"#333"});h(this,"customizeHandle");h(this,"el");h(this,"cacheStack");h(this,"beginPoint",{x:0,y:0});h(this,"endPoint");h(this,"points",[]);l(this,d,void 0);h(this,"bufferCanvas");h(this,"allowType");h(this,"allowButton");h(this,"graffitiEleList",[]);l(this,C,1);l(this,m,void 0);l(this,x,void 0);h(this,"eleGroup");l(this,p,void 0);l(this,f,void 0);l(this,w,void 0);l(this,a,void 0);l(this,c,void 0);Object.assign(this.options,t),i&&(this.customizeHandle=i),this.dpr=t.devicePixelRatio||window.devicePixelRatio,typeof this.options.el=="string"?this.el=document.querySelector(this.options.el):this.el=this.options.el,this.options.width?this.width=this.options.width:this.width=this.el.width,this.options.height?this.height=this.options.height:this.height=this.el.height,this.options.lineWidth&&(this.lineWidth=this.options.lineWidth),this.options.color&&(this.strokeStyle=this.fillStyle=this.options.color),r(this,c,this.options.shadowBlur||0),r(this,a,this.options.shadowColor||"rgba(1,1,1,0.6)"),this.toolName=this.options.initialTool,this.allowType=this.options.allowType,this.allowButton=this.options.allowButton,this.ctx.scale(this.dpr,this.dpr),this.cacheStack=new B.CacheStack(t.cacheSize||5),this.init(),u(this,S,k).call(this)}get width(){return o(this,m)}set width(t){r(this,m,t),this.ctx.canvas.width=t*this.dpr,this.ctx.canvas.style.width=t+"px"}get height(){return o(this,x)}set height(t){r(this,x,t),this.ctx.canvas.height=t*this.dpr,this.ctx.canvas.style.height=t+"px"}set lineWidth(t){r(this,p,t),this.ctx.lineWidth=t}get lineWidth(){return o(this,p)}set dpr(t){r(this,C,t)}get dpr(){return o(this,C)}set strokeStyle(t){r(this,w,t),this.ctx.strokeStyle=t}get strokeStyle(){return o(this,w)}set fillStyle(t){r(this,f,t),this.ctx.fillStyle=t}get fillStyle(){return o(this,f)}set shadowColor(t){r(this,a,t),this.ctx.shadowColor=t}get shadowColor(){return o(this,a)}set shadowBlur(t){r(this,c,t),this.ctx.shadowBlur=t}get shadowBlur(){return o(this,c)}get tool(){return g.tools[o(this,d)]}set toolName(t){var i,e;this.eleGroup&&(this.eleGroup.cancelSelected(),(e=(i=this.customizeHandle)==null?void 0:i.onGroupHandle)==null||e.call(this,this.eleGroup)),t==="Cursor"?this.ctx.canvas.style.cursor="url("+W.default+"), auto":t==="Erase"?this.ctx.canvas.style.cursor="url("+P.default+"), auto":this.ctx.canvas.style.cursor="crosshair",r(this,d,t)}get toolName(){return o(this,d)}get ctx(){return this.el.getContext("2d")}get bufferCtx(){var t;return(t=this.bufferCanvas)==null?void 0:t.getContext("2d")}init(){this.el.style.touchAction="none",this.pointerdown=this.pointerdown.bind(this),this.pointermove=this.pointermove.bind(this),this.pointerup=this.pointerup.bind(this),this.bindCanvasEventListener()}updateAllowType(t){this.allowType=t}plugin(...t){t.forEach(i=>{g.tools[i.name]?console.error("tool注入失败，已有同名的tool对象，请检查"):g.tools[i.name]=i.tool})}bindCanvasEventListener(){this.el.addEventListener("pointerdown",this.pointerdown)}removeEventListener(t=["pointerdown","pointermove","pointerup"]){t.forEach(i=>{this.el.removeEventListener(i,this[i]),document.removeEventListener(i,this[i])})}pointerdown(t){var i,e;if(!this.allowType.includes("touch")&&t.pointerType==="touch"){if(t.pressure===0)return}else if(!this.allowType.includes(t.pointerType))return;t.pointerType==="mouse"&&!this.allowButton.includes(t.button)||(this.beginPoint={x:t.offsetX,y:t.offsetY},t.preventDefault(),this.tool.buffer&&this.createBufferCanvas(),this.cacheStack.preItem||this.emitStackChange(),this.tool&&((e=(i=this.tool)==null?void 0:i.pointerdown)==null||e.call(this,t)),this.el.addEventListener("pointermove",this.pointermove),document.addEventListener("pointerup",this.pointerup))}pointermove(t){var i,e;if(!this.allowType.includes("touch")&&t.pointerType==="touch"){if(t.pressure===0)return}else if(!this.allowType.includes(t.pointerType))return;t.preventDefault(),(e=(i=this.tool)==null?void 0:i.pointermove)==null||e.call(this,t)}pointerup(t){var i,e,n;if(!this.allowType.includes("touch")&&t.pointerType==="touch"){if(t.pressure===0)return}else if(!this.allowType.includes(t.pointerType))return;t.preventDefault(),(e=(i=this.tool)==null?void 0:i.pointerup)==null||e.call(this,t),this.removeEventListener(["pointermove","pointerup"]),this.toolName!=="Cursor"&&this.emitStackChange(),this.beginPoint={x:0,y:0},this.endPoint=void 0,this.points=[],(n=this.bufferCanvas)==null||n.remove()}revoke(){var i,e,n,y;const t=this.cacheStack.pop();t&&this.setCanvasData(t),(e=(i=this.customizeHandle)==null?void 0:i.onActionHandle)==null||e.call(this,t,this.cacheStack.revokeSize,this.cacheStack.redoSize),this.eleGroup&&(this.eleGroup=null,(y=(n=this.customizeHandle)==null?void 0:n.onGroupHandle)==null||y.call(this,null))}redo(){var i,e,n,y;const t=this.cacheStack.popRedo();t&&this.setCanvasData(t),(e=(i=this.customizeHandle)==null?void 0:i.onActionHandle)==null||e.call(this,t,this.cacheStack.revokeSize,this.cacheStack.redoSize),this.eleGroup&&(this.eleGroup=null,(y=(n=this.customizeHandle)==null?void 0:n.onGroupHandle)==null||y.call(this,null))}updateCanvasSize(t){u(this,v,T).call(this,t),this.emitStackChange()}flush(){this.ctx.clearRect(0,0,this.el.width,this.el.height)}clear(){this.flush(),this.graffitiEleList=[],this.eleGroup=null}emitStackChange(){var i,e;const t=this.getCanvasData();this.cacheStack.push(t),(e=(i=this.customizeHandle)==null?void 0:i.onActionHandle)==null||e.call(this,t,this.cacheStack.revokeSize,this.cacheStack.redoSize)}drawEles(t){this.ctx.save(),t?t.forEach(i=>{var e;L.updateCtx(this,i),(e=g.tools[i.tool].drawEle)==null||e.call(this,i.points)}):(this.graffitiEleList=this.graffitiEleList.filter(i=>!i.isDeleted),this.graffitiEleList.forEach(i=>{var e;L.updateCtx(this,i),(e=g.tools[i.tool].drawEle)==null||e.call(this,i.points)})),this.ctx.restore()}getCanvasData(){return{eleInfoList:this.graffitiEleList.map(i=>({tool:i.tool,left:i.left,top:i.top,right:i.right,bottom:i.bottom,points:i.points,shadowColor:i.shadowColor,lineWidth:i.lineWidth,shadowBlur:i.shadowBlur,strokeStyle:i.strokeStyle,fillStyle:i.fillStyle})),width:this.width,height:this.height,lineWidth:this.lineWidth,shadowBlur:this.shadowBlur,shadowColor:this.shadowColor,fillStyle:this.fillStyle,strokeStyle:this.strokeStyle,dpr:this.dpr}}setCanvasData(t){this.flush(),this.graffitiEleList=t.eleInfoList.map(i=>new E.GraffitiEle(i)),this.width!==t.width||this.height!==t.height?(Object.assign(this,t),u(this,v,T).call(this,{width:t.width,height:t.height})):(Object.assign(this,t),this.ctx.scale(this.dpr,this.dpr),u(this,S,k).call(this),this.drawEles())}createBufferCanvas(){const t=this.el.cloneNode();t.style.zIndex+=100,t.style.pointerEvents="none",t.style.position="absolute",t.style.left=this.el.offsetLeft+"px",t.style.top=this.el.offsetTop+"px";const i=this.options.createBufferCanvasStyle;if(i)for(const e in i)t.setAttribute(e,i[e]);this.el.parentElement.appendChild(t),this.bufferCanvas=t,this.bufferCtx.scale(this.dpr,this.dpr),this.bufferCtx.fillStyle=this.fillStyle,this.bufferCtx.strokeStyle=this.strokeStyle,this.bufferCtx.globalAlpha=.3,this.bufferCtx.lineWidth=1}destroy(t){this.removeEventListener(),this.cacheStack.clear(),this.clear(),this.options=null,this.customizeHandle=null,t&&this.el.remove()}toDataURL(t="image/png",i=.92){return this.el.toDataURL(t,i)}toPicFile(t="canvas.png"){return new Promise(i=>{this.el.toBlob(e=>{e&&i(new File([e],t))})})}}d=new WeakMap,C=new WeakMap,m=new WeakMap,x=new WeakMap,p=new WeakMap,f=new WeakMap,w=new WeakMap,a=new WeakMap,c=new WeakMap,S=new WeakSet,k=function(){this.ctx.lineCap="round",this.ctx.lineJoin="round",this.ctx.imageSmoothingEnabled=!0,this.fillStyle=o(this,f),this.strokeStyle=o(this,w),this.lineWidth=o(this,p),this.shadowBlur=o(this,c),this.shadowColor=o(this,a)},v=new WeakSet,T=function(t){const{width:i,height:e}=t;this.cacheStack.preItem||this.emitStackChange(),i&&(this.width=i),e&&(this.height=e),u(this,S,k).call(this),this.ctx.scale(this.dpr,this.dpr),this.drawEles()};exports.CacheStack=B.CacheStack;exports.GraffitiEle=E.GraffitiEle;exports.genRectByTwoPoint=E.genRectByTwoPoint;exports.isRectIntersect=E.isRectIntersect;exports.EleGroup=R.EleGroup;exports.CanvasGraffiti=G;exports.SYSTEM_COLOR=D;exports.default=G;