fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
2 lines • 3.46 kB
JavaScript
import{_defineProperty as e}from"../../_virtual/_@oxc-project_runtime@0.122.0/helpers/defineProperty.min.mjs";import{Shadow as t}from"../Shadow.min.mjs";import{getSmoothPathFromPoints as n,joinPath as r}from"../util/path/index.min.mjs";import{BaseBrush as i}from"./BaseBrush.min.mjs";import{Path as a}from"../shapes/Path.min.mjs";var o=class o extends i{constructor(t){super(t),e(this,`decimate`,.4),e(this,`drawStraightLine`,!1),e(this,`straightLineKey`,`shiftKey`),this._points=[],this._hasStraightLine=!1}needsFullRender(){return super.needsFullRender()||this._hasStraightLine}static drawSegment(e,t,n){let r=t.midPointFrom(n);return e.quadraticCurveTo(t.x,t.y,r.x,r.y),r}onMouseDown(e,{e:t}){this.canvas._isMainEvent(t)&&(this.drawStraightLine=!!this.straightLineKey&&t[this.straightLineKey],this._prepareForDrawing(e),this._addPoint(e),this._render())}onMouseMove(e,{e:t}){if(this.canvas._isMainEvent(t)&&(this.drawStraightLine=!!this.straightLineKey&&t[this.straightLineKey],(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(e))&&this._addPoint(e)&&this._points.length>1))if(this.needsFullRender())this.canvas.clearContext(this.canvas.contextTop),this._render();else{let e=this._points,t=e.length,n=this.canvas.contextTop;this._saveAndTransform(n),this.oldEnd&&(n.beginPath(),n.moveTo(this.oldEnd.x,this.oldEnd.y)),this.oldEnd=o.drawSegment(n,e[t-2],e[t-1]),n.stroke(),n.restore()}}onMouseUp({e}){return!this.canvas._isMainEvent(e)||(this.drawStraightLine=!1,this.oldEnd=void 0,this._finalizeAndAddPath(),!1)}_prepareForDrawing(e){this._reset(),this._addPoint(e),this.canvas.contextTop.moveTo(e.x,e.y)}_addPoint(e){return!(this._points.length>1&&e.eq(this._points[this._points.length-1]))&&(this.drawStraightLine&&this._points.length>1&&(this._hasStraightLine=!0,this._points.pop()),this._points.push(e),!0)}_reset(){this._points=[],this._setBrushStyles(this.canvas.contextTop),this._setShadow(),this._hasStraightLine=!1}_render(e=this.canvas.contextTop){let t=this._points[0],n=this._points[1];if(this._saveAndTransform(e),e.beginPath(),this._points.length===2&&t.x===n.x&&t.y===n.y){let e=this.width/1e3;t.x-=e,n.x+=e}e.moveTo(t.x,t.y);for(let r=1;r<this._points.length;r++)o.drawSegment(e,t,n),t=this._points[r],n=this._points[r+1];e.lineTo(t.x,t.y),e.stroke(),e.restore()}convertPointsToSVGPath(e){return n(e,this.width/1e3)}createPath(e){let n=new a(e,{fill:null,stroke:this.color,strokeWidth:this.width,strokeLineCap:this.strokeLineCap,strokeMiterLimit:this.strokeMiterLimit,strokeLineJoin:this.strokeLineJoin,strokeDashArray:this.strokeDashArray});return this.shadow&&(this.shadow.affectStroke=!0,n.shadow=new t(this.shadow)),n}decimatePoints(e,t){if(e.length<=2)return e;let n,r=e[0],i=(t/this.canvas.getZoom())**2,a=e.length-1,o=[r];for(let t=1;t<a-1;t++)n=(r.x-e[t].x)**2+(r.y-e[t].y)**2,n>=i&&(r=e[t],o.push(r));return o.push(e[a]),o}_finalizeAndAddPath(){this.canvas.contextTop.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate));let e=this.convertPointsToSVGPath(this._points);if(function(e){return r(e)===`M 0 0 Q 0 0 0 0 L 0 0`}(e))return void this.canvas.requestRenderAll();let t=this.createPath(e);this.canvas.clearContext(this.canvas.contextTop),this.canvas.fire(`before:path:created`,{path:t}),this.canvas.add(t),this.canvas.requestRenderAll(),t.setCoords(),this._resetShadow(),this.canvas.fire(`path:created`,{path:t})}};export{o as PencilBrush};
//# sourceMappingURL=PencilBrush.min.mjs.map