@jianghh/canvas-graffiti
Version:
canvas涂鸦库,支持手写、笔写、鼠标,选中元素,并且移动、删除等功能。集成撤销重做操作。
2 lines (1 loc) • 2.4 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../element/index.js"),h=require("../utils/index.js");let u=!1;const W={pointerdown({offsetX:e,offsetY:l,pointerType:n,pressure:o}){this.points.push({x:h.roundToNDecimalPlaces(e),y:h.roundToNDecimalPlaces(l),pressure:h.roundToNDecimalPlaces(o)}),n==="pen"&&o!==0?(this.ctx.lineWidth=this.lineWidth*.5,u=!0):(this.ctx.lineWidth=this.lineWidth*.8,u=!1),this.ctx.moveTo(this.beginPoint.x,this.beginPoint.y)},pointermove({offsetX:e,offsetY:l,pressure:n}){const o=h.roundToNDecimalPlaces(n);if(u?this.points.push({x:h.roundToNDecimalPlaces(e),y:h.roundToNDecimalPlaces(l),pressure:o}):this.points.push({x:h.roundToNDecimalPlaces(e),y:h.roundToNDecimalPlaces(l)}),this.points.length<3)return;const t=this.points.slice(-2),d=t[0],c={x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2};if(u){const a=g(o)+.5;this.ctx.lineWidth=this.lineWidth*a}else{let a=Math.sqrt(Math.pow(e-t[0].x,2)+Math.pow(l-t[0].y,2));const P=T(a)+.8;this.ctx.lineWidth=this.lineWidth*P}this.ctx.beginPath(),this.ctx.moveTo(this.beginPoint.x,this.beginPoint.y),this.ctx.quadraticCurveTo(d.x,d.y,c.x,c.y),this.ctx.stroke(),this.beginPoint=c},pointerup(){this.ctx.lineWidth=this.lineWidth,i=0,s=.2;let e=this.width,l=this.height,n=0,o=0;this.points.forEach(t=>{t.x<e&&(e=t.x),t.x>n&&(n=t.x),t.y<l&&(l=t.y),t.y>o&&(o=t.y)}),this.graffitiEleList.push(new E.GraffitiEle({tool:"Pen",left:e,top:l,right:n,bottom:o,points:this.points,shadowColor:this.shadowColor,lineWidth:this.lineWidth,shadowBlur:this.shadowBlur,strokeStyle:this.strokeStyle,fillStyle:this.fillStyle}))},drawEle(e){let l=[],n=e[0];e.forEach(o=>{if(l.push(o),l.length<3)return;const t=l.slice(-2),d=t[0],c={x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2};if(o.pressure&&o.pressure>0){const a=g(o.pressure)+.5;this.ctx.lineWidth=this.lineWidth*a}else{let a=Math.sqrt(Math.pow(o.x-t[0].x,2)+Math.pow(o.y-t[0].y,2));const P=T(a)+.8;this.ctx.lineWidth=this.lineWidth*P}this.ctx.beginPath(),this.ctx.moveTo(n.x,n.y),this.ctx.quadraticCurveTo(d.x,d.y,c.x,c.y),this.ctx.stroke(),n=c}),i=0,s=.2,l=[]}};let i=0;const r=2,x=8,y=40;function T(e){return e>=x*2?(i<=-12+r?i=-12:i-=r,i/y):e>=x?(i<=0?i<-r?i+=r:i=0:i>r?i-=r:i=0,i/y):(i<x-r?i+=r:i=x,i/y)}let s=.2,w=0;const f=.05,p=.35;function g(e){return e>=.5?(s>=.5?s=.5:s+=f,s):e>=.15?(e>w?s<=p?s+=f:s=p:s>=.2?s-=f:s=.15,s):(s<=f?s=0:s-=f,s)}exports.Pen=W;