From 0a7aba74eeab98b4c4c0546800fbfea7399930b2 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Fri, 12 Jan 2018 07:30:53 +0900 Subject: [PATCH] GIving brushes a _render method (#4613) * solves error * rerender just if there is an activeObject --- src/brushes/base_brush.class.js | 11 +++++++++ src/brushes/circle_brush.class.js | 26 +++++++++++++++++---- src/brushes/pencil_brush.class.js | 4 +--- src/brushes/spray_brush.class.js | 38 +++++++++++++++++++------------ src/mixins/canvas_events.mixin.js | 4 +++- 5 files changed, 60 insertions(+), 23 deletions(-) diff --git a/src/brushes/base_brush.class.js b/src/brushes/base_brush.class.js index 4a23a79f..5dc741ad 100644 --- a/src/brushes/base_brush.class.js +++ b/src/brushes/base_brush.class.js @@ -83,6 +83,17 @@ 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(); + 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 df45f071..c6cd6af9 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); @@ -51,6 +48,25 @@ 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; + this._saveAndTransform(ctx); + 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/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 2c87a46c..6beccb07 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 c15bd2b2..5fcb2b57 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,18 +144,16 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric }, /** - * Renders brush + * Render new chunk of spray brush */ - render: function() { - var ctx = this.canvas.contextTop; + render: function(sprayChunk) { + 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 = 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 +162,21 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric ctx.restore(); }, + /** + * Render all spray chunks + */ + _render: function() { + var ctx = this.canvas.contextTop, i, ilen; + ctx.fillStyle = this.color; + + this._saveAndTransform(ctx); + + for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + this.render(this.sprayChunks[i]); + } + ctx.restore(); + }, + /** * @param {Object} pointer */ diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index e8917275..4e1a2370 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); }