From b8efde8aea9c8e231ce51e66c2a7985b87dc3ebe Mon Sep 17 00:00:00 2001 From: Asturur Date: Sun, 12 Nov 2017 14:20:59 +0100 Subject: [PATCH 1/4] made less funzzy --- src/shapes/object.class.js | 25 +++++++++++++++++++------ src/shapes/text.class.js | 12 +++++++----- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index fce2f25a792..4a9a466e17c 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -649,15 +649,16 @@ * Return the dimension and the zoom level needed to create a cache canvas * big enough to host the object to be cached. * @private + * @param {Object} dim.x width of object to be cached + * @param {Object} dim.y height of object to be cached * @return {Object}.width width of canvas * @return {Object}.height height of canvas * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function() { + _getCacheCanvasDimensions: function(dim) { var zoom = this.canvas && this.canvas.getZoom() || 1, objectScale = this.getObjectScaling(), - dim = this._getNonTransformedDimensions(), retina = this.canvas && this.canvas._isRetinaScaling() ? fabric.devicePixelRatio : 1, zoomX = objectScale.scaleX * zoom * retina, zoomY = objectScale.scaleY * zoom * retina, @@ -685,9 +686,10 @@ return false; } } - var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + var dim = this._getNonTransformedDimensions(), + dims = this._limitCacheSize(this._getCacheCanvasDimensions(dim)), minCacheSize = fabric.minCacheSideLimit, - width = dims.width, height = dims.height, + width = dims.width, height = dims.height, drawingWidth, drawingHeight, zoomX = dims.zoomX, zoomY = dims.zoomY, dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, @@ -709,13 +711,24 @@ if (shouldResizeCanvas) { this._cacheCanvas.width = Math.max(Math.ceil(width) + additionalWidth, minCacheSize); this._cacheCanvas.height = Math.max(Math.ceil(height) + additionalHeight, minCacheSize); - this.cacheTranslationX = (width + additionalWidth) / 2; - this.cacheTranslationY = (height + additionalHeight) / 2; } else { this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); this._cacheContext.clearRect(0, 0, this._cacheCanvas.width, this._cacheCanvas.height); } + drawingWidth = dim.x * zoomX / 2; + drawingHeight = dim.y * zoomY / 2; + this.cacheTranslationX = Math.round(this._cacheCanvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(this._cacheCanvas.height / 2 - drawingHeight) + drawingHeight; + console.log({ + drawingWidth: drawingWidth, + drawingHeight: drawingHeight, + tX: this.cacheTranslationX, + tY: this.cacheTranslationY, + w: this._cacheCanvas.width, + h: this._cacheCanvas.height, + dim: dim, + }) this.cacheWidth = width; this.cacheHeight = height; this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index a714bee0379..a620df97212 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -383,17 +383,19 @@ * Return the dimension and the zoom level needed to create a cache canvas * big enough to host the object to be cached. * @private + * @param {Object} dim.x width of object to be cached + * @param {Object} dim.y height of object to be cached * @return {Object}.width width of canvas * @return {Object}.height height of canvas * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function() { - var dim = this.callSuper('_getCacheCanvasDimensions'); + _getCacheCanvasDimensions: function(dim) { + var dims = this.callSuper('_getCacheCanvasDimensions', dim); var fontSize = this.fontSize; - dim.width += fontSize * dim.zoomX; - dim.height += fontSize * dim.zoomY; - return dim; + dims.width += fontSize * dims.zoomX; + dims.height += fontSize * dims.zoomY; + return dims; }, /** From cfb894cbf02520194ce46c82026f864c6a3413fc Mon Sep 17 00:00:00 2001 From: Asturur Date: Sun, 12 Nov 2017 14:29:10 +0100 Subject: [PATCH 2/4] solved lint --- src/shapes/object.class.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 4a9a466e17c..d9e81b106b1 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -720,15 +720,6 @@ drawingHeight = dim.y * zoomY / 2; this.cacheTranslationX = Math.round(this._cacheCanvas.width / 2 - drawingWidth) + drawingWidth; this.cacheTranslationY = Math.round(this._cacheCanvas.height / 2 - drawingHeight) + drawingHeight; - console.log({ - drawingWidth: drawingWidth, - drawingHeight: drawingHeight, - tX: this.cacheTranslationX, - tY: this.cacheTranslationY, - w: this._cacheCanvas.width, - h: this._cacheCanvas.height, - dim: dim, - }) this.cacheWidth = width; this.cacheHeight = height; this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); From db4580334a5fc85c96a85294b89b83d4d81853be Mon Sep 17 00:00:00 2001 From: Asturur Date: Sun, 12 Nov 2017 14:42:18 +0100 Subject: [PATCH 3/4] cleaned a bit --- src/shapes/object.class.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index d9e81b106b1..3ddaa7f1b76 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -686,7 +686,7 @@ return false; } } - var dim = this._getNonTransformedDimensions(), + var dim = this._getNonTransformedDimensions(), canvas = this._cacheCanvas, dims = this._limitCacheSize(this._getCacheCanvasDimensions(dim)), minCacheSize = fabric.minCacheSideLimit, width = dims.width, height = dims.height, drawingWidth, drawingHeight, @@ -703,23 +703,23 @@ canvasWidth > minCacheSize && canvasHeight > minCacheSize; shouldResizeCanvas = sizeGrowing || sizeShrinking; if (sizeGrowing) { - additionalWidth = (width * 0.1) & ~1; - additionalHeight = (height * 0.1) & ~1; + additionalWidth = width * 0.1; + additionalHeight = height * 0.1; } } if (shouldRedraw) { if (shouldResizeCanvas) { - this._cacheCanvas.width = Math.max(Math.ceil(width) + additionalWidth, minCacheSize); - this._cacheCanvas.height = Math.max(Math.ceil(height) + additionalHeight, minCacheSize); + canvas.width = Math.max(Math.ceil(width + additionalWidth), minCacheSize); + canvas.height = Math.max(Math.ceil(height + additionalHeight), minCacheSize); } else { this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); - this._cacheContext.clearRect(0, 0, this._cacheCanvas.width, this._cacheCanvas.height); + this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); } drawingWidth = dim.x * zoomX / 2; drawingHeight = dim.y * zoomY / 2; - this.cacheTranslationX = Math.round(this._cacheCanvas.width / 2 - drawingWidth) + drawingWidth; - this.cacheTranslationY = Math.round(this._cacheCanvas.height / 2 - drawingHeight) + drawingHeight; + this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; this.cacheWidth = width; this.cacheHeight = height; this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); From 81f10aa74e4f21fb74522048eb95633a77247187 Mon Sep 17 00:00:00 2001 From: Asturur Date: Sun, 12 Nov 2017 14:56:31 +0100 Subject: [PATCH 4/4] fixed tests --- src/shapes/object.class.js | 15 +++++++++------ src/shapes/text.class.js | 4 ++-- test/unit/object.js | 6 +++--- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 3ddaa7f1b76..b63afb9abe6 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -656,10 +656,11 @@ * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function(dim) { + _getCacheCanvasDimensions: function() { var zoom = this.canvas && this.canvas.getZoom() || 1, objectScale = this.getObjectScaling(), retina = this.canvas && this.canvas._isRetinaScaling() ? fabric.devicePixelRatio : 1, + dim = this._getNonTransformedDimensions(), zoomX = objectScale.scaleX * zoom * retina, zoomY = objectScale.scaleY * zoom * retina, width = dim.x * zoomX, @@ -668,7 +669,9 @@ width: width + ALIASING_LIMIT, height: height + ALIASING_LIMIT, zoomX: zoomX, - zoomY: zoomY + zoomY: zoomY, + x: dim.x, + y: dim.y }; }, @@ -686,8 +689,8 @@ return false; } } - var dim = this._getNonTransformedDimensions(), canvas = this._cacheCanvas, - dims = this._limitCacheSize(this._getCacheCanvasDimensions(dim)), + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), minCacheSize = fabric.minCacheSideLimit, width = dims.width, height = dims.height, drawingWidth, drawingHeight, zoomX = dims.zoomX, zoomY = dims.zoomY, @@ -716,8 +719,8 @@ this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); } - drawingWidth = dim.x * zoomX / 2; - drawingHeight = dim.y * zoomY / 2; + drawingWidth = dims.x * zoomX / 2; + drawingHeight = dims.y * zoomY / 2; this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; this.cacheWidth = width; diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index a620df97212..6bc7577be16 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -390,8 +390,8 @@ * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function(dim) { - var dims = this.callSuper('_getCacheCanvasDimensions', dim); + _getCacheCanvasDimensions: function() { + var dims = this.callSuper('_getCacheCanvasDimensions'); var fontSize = this.fontSize; dims.width += fontSize * dims.zoomX; dims.height += fontSize * dims.zoomY; diff --git a/test/unit/object.js b/test/unit/object.js index 5a5866ef29f..be914e851b1 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -1049,14 +1049,14 @@ QUnit.test('_getCacheCanvasDimensions returns dimensions and zoom for cache canvas', function(assert) { var object = new fabric.Object({ width: 10, height: 10, strokeWidth: 0 }); var dims = object._getCacheCanvasDimensions(); - assert.deepEqual(dims, { width: 12, height: 12, zoomX: 1, zoomY: 1 }, 'if no scaling is applied cache is as big as object'); + assert.deepEqual(dims, { width: 12, height: 12, zoomX: 1, zoomY: 1, x: 10, y: 10 }, 'if no scaling is applied cache is as big as object'); object.strokeWidth = 2; dims = object._getCacheCanvasDimensions(); - assert.deepEqual(dims, { width: 14, height: 14, zoomX: 1, zoomY: 1 }, 'cache contains the stroke'); + assert.deepEqual(dims, { width: 14, height: 14, zoomX: 1, zoomY: 1, x: 12, y: 12 }, 'cache contains the stroke'); object.scaleX = 2; object.scaleY = 3; dims = object._getCacheCanvasDimensions(); - assert.deepEqual(dims, { width: 26, height: 38, zoomX: 2, zoomY: 3 }, 'cache is as big as the scaled object'); + assert.deepEqual(dims, { width: 26, height: 38, zoomX: 2, zoomY: 3, x: 12, y: 12 }, 'cache is as big as the scaled object'); }); QUnit.test('_updateCacheCanvas check if cache canvas should be updated', function(assert) {