diff --git a/src/components/forms/slider.css b/src/components/forms/slider.css index 4374e16a..873930fa 100644 --- a/src/components/forms/slider.css +++ b/src/components/forms/slider.css @@ -17,4 +17,5 @@ background-color: white; border-radius: 100%; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); + touch-action: none; } diff --git a/src/helper/bit-tools/brush-tool.js b/src/helper/bit-tools/brush-tool.js index fa2a59b9..5417e686 100644 --- a/src/helper/bit-tools/brush-tool.js +++ b/src/helper/bit-tools/brush-tool.js @@ -35,6 +35,9 @@ class BrushTool extends paper.Tool { } // Draw a brush mark at the given point draw (x, y) { + if (!this.tmpCanvas) { + this.tmpCanvas = getBrushMark(this.size, this.color); + } const roundedUpRadius = Math.ceil(this.size / 2); getRaster().drawImage(this.tmpCanvas, new paper.Point(~~x - roundedUpRadius, ~~y - roundedUpRadius)); } diff --git a/src/helper/bit-tools/line-tool.js b/src/helper/bit-tools/line-tool.js index e20e1a8e..bb22240e 100644 --- a/src/helper/bit-tools/line-tool.js +++ b/src/helper/bit-tools/line-tool.js @@ -38,6 +38,9 @@ class LineTool extends paper.Tool { } // Draw a brush mark at the given point draw (x, y) { + if (!this.tmpCanvas) { + this.tmpCanvas = getBrushMark(this.size, this.color); + } const roundedUpRadius = Math.ceil(this.size / 2); this.drawTarget.drawImage(this.tmpCanvas, new paper.Point(~~x - roundedUpRadius, ~~y - roundedUpRadius)); } @@ -72,8 +75,8 @@ class LineTool extends paper.Tool { handleMouseDown (event) { if (event.event.button > 0) return; // only first mouse button this.active = true; - - this.cursorPreview.remove(); + + if (this.cursorPreview) this.cursorPreview.remove(); const tmpCanvas = document.createElement('canvas'); tmpCanvas.width = ART_BOARD_WIDTH;