diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index fce2f25a792..b63afb9abe6 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -649,6 +649,8 @@ * 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 @@ -657,8 +659,8 @@ _getCacheCanvasDimensions: function() { var zoom = this.canvas && this.canvas.getZoom() || 1, objectScale = this.getObjectScaling(), - dim = this._getNonTransformedDimensions(), 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, @@ -667,7 +669,9 @@ width: width + ALIASING_LIMIT, height: height + ALIASING_LIMIT, zoomX: zoomX, - zoomY: zoomY + zoomY: zoomY, + x: dim.x, + y: dim.y }; }, @@ -685,9 +689,10 @@ return false; } } - var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), 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, @@ -701,21 +706,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); - this.cacheTranslationX = (width + additionalWidth) / 2; - this.cacheTranslationY = (height + additionalHeight) / 2; + 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 = 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; 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..6bc7577be16 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'); + var dims = this.callSuper('_getCacheCanvasDimensions'); 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; }, /** 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) {