@tomiaa/canvas-graffiti/lib/index.js

canvas 涂鸦画板，支持笔写、手写、鼠标绘图

"use strict";var r=Object.defineProperty;var h=(s,t,e)=>t in s?r(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var o=(s,t,e)=>(h(s,typeof t!="symbol"?t+"":t,e),e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./utils/index.js");class n{constructor(t){o(this,"options",{currentTool:"Marker",createBufferCanvasStyle:{},allowType:["pen","mouse","touch"],allowButton:[0]});o(this,"el");o(this,"beginPoint",{x:0,y:0});o(this,"endPoint");o(this,"points",[]);o(this,"currentTool","Marker");o(this,"bufferCanvas");o(this,"allowType");o(this,"allowButton");Object.assign(this.options,t),typeof this.options.el=="string"?this.el=document.querySelector(this.options.el):this.el=this.options.el,this.currentTool=this.options.currentTool,this.allowType=this.options.allowType,this.allowButton=this.options.allowButton,this.init()}get color(){return this.ctx.fillStyle}set color(t){this.ctx.strokeStyle=t,this.ctx.fillStyle=t}get lineWidth(){return this.ctx.lineWidth}set lineWidth(t){this.ctx.lineWidth=t}get tool(){return a[this.currentTool]}set tool(t){this.currentTool=t}get ctx(){return this.el.getContext("2d")}get bufferCtx(){var t;return(t=this.bufferCanvas)==null?void 0:t.getContext("2d")}init(){this.pointerdown=this.pointerdown.bind(this),this.pointermove=this.pointermove.bind(this),this.pointerup=this.pointerup.bind(this),this.bindCanvasEventListener()}bindCanvasEventListener(){this.el.addEventListener("pointerdown",this.pointerdown)}removeEventListener(t=["pointerdown","pointermove","pointerup"]){t.forEach(e=>{this.el.removeEventListener(e,this[e]),document.removeEventListener(e,this[e])})}pointerdown(t){var e,i;this.allowType.includes(t.pointerType)&&(t.pointerType==="mouse"&&!this.allowButton.includes(t.button)||(this.el.style.touchAction="none",this.beginPoint={x:t.offsetX,y:t.offsetY},t.preventDefault(),this.tool.buffer&&this.createBufferCanvas(),this.tool&&((i=(e=this.tool)==null?void 0:e.pointerdown)==null||i.call(this,t)),this.el.addEventListener("pointermove",this.pointermove),document.addEventListener("pointerup",this.pointerup)))}pointermove(t){var e,i;t.preventDefault(),this.allowType.includes(t.pointerType)&&((i=(e=this.tool)==null?void 0:e.pointermove)==null||i.call(this,t))}pointerup(t){var e,i,l;this.el.style.touchAction="auto",this.allowType.includes(t.pointerType)&&(~~this.beginPoint.x===~~t.offsetX&&~~this.beginPoint.y===~~t.offsetY&&(this.ctx.beginPath(),this.ctx.arc(t.offsetX,t.offsetY,1,0,2*Math.PI,!1),this.ctx.stroke(),this.ctx.fill()),t.preventDefault(),(i=(e=this.tool)==null?void 0:e.pointerup)==null||i.call(this,t),this.removeEventListener(["pointermove","pointerup"]),this.beginPoint={x:0,y:0},this.endPoint=void 0,this.points=[],(l=this.bufferCanvas)==null||l.remove())}clear(){this.ctx.clearRect(0,0,this.el.width,this.el.height)}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 e=this.options.createBufferCanvasStyle;if(e)for(const i in e)t.setAttribute(i,e[i]);this.el.parentElement.appendChild(t),this.bufferCanvas=t,this.bufferCtx.fillStyle=this.color,this.bufferCtx.strokeStyle=this.color,this.bufferCtx.lineWidth=this.lineWidth}destroy(t){this.removeEventListener(),t&&this.el.remove()}toDataURL(t="image/png",e=.92){return this.el.toDataURL(t,e)}toPicFile(t="0.png"){return new Promise(e=>{this.el.toBlob(i=>{i&&e(new File([i],t))})})}}o(n,"toolList",[{label:"记号笔",value:"Marker"},{label:"直线",value:"Line"},{label:"空心矩形",value:"Rect"},{label:"实心矩形",value:"FillRect"},{label:"空心圆",value:"Arc"},{label:"实心圆",value:"FillArc"}]),o(n,"allowTypes",[{label:"鼠标",value:"mouse"},{label:"手写",value:"touch"},{label:"笔写",value:"pen"}]);exports.CanvasGraffiti=n;exports.default=n;