From a9a8789af6319a2d4d55b1433ab130fa9fbc211a Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Sun, 19 Apr 2020 20:44:33 -0400 Subject: [PATCH 1/4] Clear lastVec in onBroadMouseDown --- src/helper/blob-tools/broad-brush-helper.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/helper/blob-tools/broad-brush-helper.js b/src/helper/blob-tools/broad-brush-helper.js index dbd81eb6..a0be22ef 100644 --- a/src/helper/blob-tools/broad-brush-helper.js +++ b/src/helper/blob-tools/broad-brush-helper.js @@ -34,6 +34,7 @@ class BroadBrushHelper { onBroadMouseDown (event, tool, options) { this.steps = 0; this.smoothed = 0; + this.lastVec = null; tool.minDistance = Math.min(5, Math.max(2 / paper.view.zoom, options.brushSize / 2)); tool.maxDistance = options.brushSize; if (event.event.button > 0) return; // only first mouse button From 55bc3dc4b6de0660853c15e61b39f721acdcd983 Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Sun, 19 Apr 2020 20:50:19 -0400 Subject: [PATCH 2/4] Don't double-add points to broad brush path --- src/helper/blob-tools/broad-brush-helper.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/helper/blob-tools/broad-brush-helper.js b/src/helper/blob-tools/broad-brush-helper.js index a0be22ef..c5d4cec5 100644 --- a/src/helper/blob-tools/broad-brush-helper.js +++ b/src/helper/blob-tools/broad-brush-helper.js @@ -38,7 +38,7 @@ class BroadBrushHelper { tool.minDistance = Math.min(5, Math.max(2 / paper.view.zoom, options.brushSize / 2)); tool.maxDistance = options.brushSize; if (event.event.button > 0) return; // only first mouse button - + this.finalPath = new paper.Path.Circle({ center: event.point, radius: options.brushSize / 2 @@ -46,7 +46,7 @@ class BroadBrushHelper { styleBlob(this.finalPath, options); this.lastPoint = event.point; } - + onBroadMouseDrag (event, tool, options) { this.steps++; const step = (event.delta).normalize(options.brushSize / 2); @@ -97,12 +97,8 @@ class BroadBrushHelper { this.finalPath.insert(0, new paper.Segment(this.lastPoint.subtract(step))); this.finalPath.add(new paper.Segment(this.lastPoint.add(step))); } - const top = event.middlePoint.add(step); - const bottom = event.middlePoint.subtract(step); - this.finalPath.add(top); this.finalPath.add(event.point.add(step)); - this.finalPath.insert(0, bottom); this.finalPath.insert(0, event.point.subtract(step)); if (this.finalPath.segments.length > this.smoothed + (this.smoothingThreshold * 2)) { @@ -220,7 +216,7 @@ class BroadBrushHelper { this.finalPath.remove(); this.finalPath = newPath; } - + // Try to merge end caps for (const cap of this.endCaps) { const temp = this.union(this.finalPath, cap); From baa95edc47faef3d772038f1e41784085025334d Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Sun, 19 Apr 2020 21:34:39 -0400 Subject: [PATCH 3/4] Set broad brush stroke angle to vertex normal --- src/helper/blob-tools/broad-brush-helper.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/helper/blob-tools/broad-brush-helper.js b/src/helper/blob-tools/broad-brush-helper.js index c5d4cec5..791905e1 100644 --- a/src/helper/blob-tools/broad-brush-helper.js +++ b/src/helper/blob-tools/broad-brush-helper.js @@ -79,7 +79,6 @@ class BroadBrushHelper { this.endCaps.push(this.union(circ, this.union(rect, rect2))); } } - this.lastVec = event.delta; step.angle += 90; // Move the first point out away from the drag so that the end of the path is rounded @@ -98,12 +97,27 @@ class BroadBrushHelper { this.finalPath.add(new paper.Segment(this.lastPoint.add(step))); } + // Update angle of the last brush step's points to match the average angle of the last mouse vector and this + // mouse vector (aka the vertex normal). + if (this.lastVec) { + const lastNormal = this.lastVec.normalize(options.brushSize / 2).rotate(90); + const averageNormal = new paper.Point( + lastNormal.x + step.x, + lastNormal.y + step.y + ).normalize(options.brushSize / 2); + + this.finalPath.segments[0].point = this.lastPoint.subtract(averageNormal); + this.finalPath.segments[this.finalPath.segments.length - 1].point = this.lastPoint.add(averageNormal); + } + this.finalPath.add(event.point.add(step)); this.finalPath.insert(0, event.point.subtract(step)); if (this.finalPath.segments.length > this.smoothed + (this.smoothingThreshold * 2)) { this.simplify(1); } + + this.lastVec = event.delta; this.lastPoint = event.point; } From 690efcb39f0802331631e0ad57d2b733e478f72e Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Sun, 19 Apr 2020 21:56:42 -0400 Subject: [PATCH 4/4] Use proper mouse delta in onBroadMouseUp The given event.delta is the difference between the mouse down coords and the mouse up coords, but we want the difference between the last mouse drag coords and the mouse up coords. --- src/helper/blob-tools/broad-brush-helper.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/helper/blob-tools/broad-brush-helper.js b/src/helper/blob-tools/broad-brush-helper.js index 791905e1..be69cb6e 100644 --- a/src/helper/blob-tools/broad-brush-helper.js +++ b/src/helper/blob-tools/broad-brush-helper.js @@ -196,10 +196,15 @@ class BroadBrushHelper { return this.finalPath; } + let delta = this.lastVec; + // If the mouse up is at the same point as the mouse drag event then we need // the second to last point to get the right direction vector for the end cap if (!event.point.equals(this.lastPoint)) { - const step = event.delta.normalize(options.brushSize / 2); + // The given event.delta is the difference between the mouse down coords and the mouse up coords, + // but we want the difference between the last mouse drag coords and the mouse up coords. + delta = event.point.subtract(this.lastPoint); + const step = delta.normalize(options.brushSize / 2); step.angle += 90; const top = event.point.add(step); @@ -210,7 +215,7 @@ class BroadBrushHelper { // Simplify before adding end cap so cap doesn't get warped this.simplify(1); - const handleVec = event.delta.normalize(options.brushSize / 2); + const handleVec = delta.normalize(options.brushSize / 2); this.finalPath.add(new paper.Segment( event.point.add(handleVec), handleVec.rotate(90),