From 5c2232ff90cc74ff46ebdd7fc91b69028d7d8937 Mon Sep 17 00:00:00 2001 From: Asturur Date: Sun, 7 Jan 2018 15:20:11 +0100 Subject: [PATCH 1/4] solves error --- src/brushes/circle_brush.class.js | 22 ++++++++++++++++++++ src/brushes/spray_brush.class.js | 34 ++++++++++++++++++++++--------- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/src/brushes/circle_brush.class.js b/src/brushes/circle_brush.class.js index df45f071b8e..fae738830d7 100644 --- a/src/brushes/circle_brush.class.js +++ b/src/brushes/circle_brush.class.js @@ -51,6 +51,28 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric this.drawDot(pointer); }, + /** + * Render the full state of the brush + * @private + */ + _render: function() { + var ctx = this.canvas.contextTop, i, len, + points = this.points, point, + v = this.canvas.viewportTransform; + + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + for (i = 0, len = points.length; i < len; i++) { + point = points[i]; + ctx.fillStyle = point.fill; + ctx.beginPath(); + ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + } + ctx.restore(); + }, + /** * Invoked on mouse move * @param {Object} pointer diff --git a/src/brushes/spray_brush.class.js b/src/brushes/spray_brush.class.js index c15bd2b29af..b1fc5aeb658 100644 --- a/src/brushes/spray_brush.class.js +++ b/src/brushes/spray_brush.class.js @@ -66,7 +66,7 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric this._setShadow(); this.addSprayChunk(pointer); - this.render(); + this.render(this.sprayChunkPoints); }, /** @@ -75,7 +75,7 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric */ onMouseMove: function(pointer) { this.addSprayChunk(pointer); - this.render(); + this.render(this.sprayChunkPoints); }, /** @@ -101,8 +101,6 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric originY: 'center', fill: this.color }); - - this.shadow && rect.setShadow(this.shadow); rects.push(rect); } } @@ -112,8 +110,7 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric } var group = new fabric.Group(rects, { originX: 'center', originY: 'center' }); - group.canvas = this.canvas; - + this.shadow && group.setShadow(this.shadow); this.canvas.add(group); this.canvas.fire('path:created', { path: group }); @@ -147,9 +144,9 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric }, /** - * Renders brush + * Render new chunk of spray brush */ - render: function() { + render: function(sprayChunk) { var ctx = this.canvas.contextTop; ctx.fillStyle = this.color; @@ -157,8 +154,8 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric ctx.save(); ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - for (i = 0, len = this.sprayChunkPoints.length; i < len; i++) { - var point = this.sprayChunkPoints[i]; + for (i = 0, len = sprayChunk.length; i < len; i++) { + var point = sprayChunk[i]; if (typeof point.opacity !== 'undefined') { ctx.globalAlpha = point.opacity; } @@ -167,6 +164,23 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric ctx.restore(); }, + /** + * Render all spray chunks + */ + _render: function() { + var ctx = this.canvas.contextTop; + ctx.fillStyle = this.color; + + var v = this.canvas.viewportTransform, i, ilen; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + + for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + this.render(this.sprayChunks[i]); + } + ctx.restore(); + }, + /** * @param {Object} pointer */ From 3a0f86c71502f7347e592c82320fd1d08a08670d Mon Sep 17 00:00:00 2001 From: Asturur Date: Thu, 11 Jan 2018 22:49:08 +0100 Subject: [PATCH 2/4] rerender just if there is an activeObject --- src/mixins/canvas_events.mixin.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index e89172757a1..4e1a2370758 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/src/mixins/canvas_events.mixin.js @@ -455,7 +455,9 @@ */ _onMouseDownInDrawingMode: function(e) { this._isCurrentlyDrawing = true; - this.discardActiveObject(e).requestRenderAll(); + if (this.getActiveObject()) { + this.discardActiveObject(e).requestRenderAll(); + } if (this.clipTo) { fabric.util.clipContext(this, this.contextTop); } From 09f1b8f3ee87ac4ab92569e4bd3127bc22eab8e9 Mon Sep 17 00:00:00 2001 From: Asturur Date: Thu, 11 Jan 2018 23:12:35 +0100 Subject: [PATCH 3/4] common method --- src/brushes/base_brush.class.js | 6 ++++++ src/brushes/circle_brush.class.js | 14 ++++---------- src/brushes/pencil_brush.class.js | 4 +--- src/brushes/spray_brush.class.js | 12 ++++-------- 4 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/brushes/base_brush.class.js b/src/brushes/base_brush.class.js index 4a23a79f258..a8499fb2e21 100644 --- a/src/brushes/base_brush.class.js +++ b/src/brushes/base_brush.class.js @@ -83,6 +83,12 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype } }, + _saveAndTransform: function(ctx) { + var v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + }, + /** * Sets brush shadow styles * @private diff --git a/src/brushes/circle_brush.class.js b/src/brushes/circle_brush.class.js index fae738830d7..c6cd6af9cfc 100644 --- a/src/brushes/circle_brush.class.js +++ b/src/brushes/circle_brush.class.js @@ -27,11 +27,8 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric */ drawDot: function(pointer) { var point = this.addPoint(pointer), - ctx = this.canvas.contextTop, - v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - + ctx = this.canvas.contextTop; + this._saveAndTransform(ctx); ctx.fillStyle = point.fill; ctx.beginPath(); ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); @@ -57,11 +54,8 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric */ _render: function() { var ctx = this.canvas.contextTop, i, len, - points = this.points, point, - v = this.canvas.viewportTransform; - - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + points = this.points, point; + this._saveAndTransform(ctx); for (i = 0, len = points.length; i < len; i++) { point = points[i]; ctx.fillStyle = point.fill; diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 2c87a46ccba..6beccb07d95 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -99,12 +99,10 @@ */ _render: function() { var ctx = this.canvas.contextTop, i, len, - v = this.canvas.viewportTransform, p1 = this._points[0], p2 = this._points[1]; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this._saveAndTransform(ctx); ctx.beginPath(); //if we only have 2 points in the path and they are the same //it means that the user only clicked the canvas without moving the mouse diff --git a/src/brushes/spray_brush.class.js b/src/brushes/spray_brush.class.js index b1fc5aeb658..5fcb2b57cf3 100644 --- a/src/brushes/spray_brush.class.js +++ b/src/brushes/spray_brush.class.js @@ -147,12 +147,10 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric * Render new chunk of spray brush */ render: function(sprayChunk) { - var ctx = this.canvas.contextTop; + var ctx = this.canvas.contextTop, i, len; ctx.fillStyle = this.color; - var v = this.canvas.viewportTransform, i, len; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this._saveAndTransform(ctx); for (i = 0, len = sprayChunk.length; i < len; i++) { var point = sprayChunk[i]; @@ -168,12 +166,10 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric * Render all spray chunks */ _render: function() { - var ctx = this.canvas.contextTop; + var ctx = this.canvas.contextTop, i, ilen; ctx.fillStyle = this.color; - var v = this.canvas.viewportTransform, i, ilen; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this._saveAndTransform(ctx); for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { this.render(this.sprayChunks[i]); From a18d86f312158531d5959455841952f80b4abae3 Mon Sep 17 00:00:00 2001 From: Asturur Date: Thu, 11 Jan 2018 23:16:08 +0100 Subject: [PATCH 4/4] common method --- src/brushes/base_brush.class.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/brushes/base_brush.class.js b/src/brushes/base_brush.class.js index a8499fb2e21..5dc741ad5d5 100644 --- a/src/brushes/base_brush.class.js +++ b/src/brushes/base_brush.class.js @@ -83,6 +83,11 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype } }, + /** + * Sets the transformation on given context + * @param {RenderingContext2d} ctx context to render on + * @private + */ _saveAndTransform: function(ctx) { var v = this.canvas.viewportTransform; ctx.save();