From 8056ad0e28c8d87ccb7fde8d3717e8907fa1d7f2 Mon Sep 17 00:00:00 2001 From: Asturur Date: Mon, 26 Jun 2017 11:33:33 +0200 Subject: [PATCH 1/3] first try --- src/shapes/object.class.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index bfa59290b83..74771fae49c 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -922,15 +922,26 @@ } } var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + minCacheSize = fabric.minCacheSize, width = dims.width, height = dims.height, zoomX = dims.zoomX, zoomY = dims.zoomY, + canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, - shouldRedraw = dimensionsChanged || zoomChanged; + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && canvasWidth > minCacheSize + 1 && canvasHeight > minCacheSize + 1, + shouldRedraw = dimensionsChanged || zoomChanged, + shouldResizeCanvas = sizeGrowing || sizeShrinking, + additionalWidth = 0, additionalHeight = 0; + if (sizeGrowing) { + additionalWidth = (width * 0.1) & ~1; + additionalHeight = (height * 0.1) & ~1; + } if (shouldRedraw) { - if (dimensionsChanged) { - this._cacheCanvas.width = Math.ceil(width); - this._cacheCanvas.height = Math.ceil(height); + if (shouldResizeCanvas) { + this._cacheCanvas.width = Math.max(Math.ceil(width) + additionalWidth, minCacheSize + 1); + this._cacheCanvas.height = Math.max(Math.ceil(height) + additionalHeight, minCacheSize + 1); this.cacheWidth = width; this.cacheHeight = height; } @@ -938,7 +949,7 @@ this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); this._cacheContext.clearRect(0, 0, this._cacheCanvas.width, this._cacheCanvas.height); } - this._cacheContext.translate(width / 2, height / 2); + this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); this._cacheContext.scale(zoomX, zoomY); this.zoomX = zoomX; this.zoomY = zoomY; @@ -1272,7 +1283,7 @@ */ drawCacheOnCanvas: function(ctx) { ctx.scale(1 / this.zoomX, 1 / this.zoomY); - ctx.drawImage(this._cacheCanvas, -this.cacheWidth / 2, -this.cacheHeight / 2); + ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); }, /** From 989df527e2b526ca932af82d5b30e1a73a37d4db Mon Sep 17 00:00:00 2001 From: Asturur Date: Tue, 27 Jun 2017 08:31:55 +0200 Subject: [PATCH 2/3] step increase size of canvas --- src/shapes/object.class.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 74771fae49c..846b4f7145b 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -922,30 +922,37 @@ } } var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - minCacheSize = fabric.minCacheSize, + minCacheSize = fabric.minCacheSideLimit, width = dims.width, height = dims.height, zoomX = dims.zoomX, zoomY = dims.zoomY, - canvasWidth = this._cacheCanvas.width, - canvasHeight = this._cacheCanvas.height, dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, - sizeGrowing = width > canvasWidth || height > canvasHeight, - sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && canvasWidth > minCacheSize + 1 && canvasHeight > minCacheSize + 1, shouldRedraw = dimensionsChanged || zoomChanged, - shouldResizeCanvas = sizeGrowing || sizeShrinking, - additionalWidth = 0, additionalHeight = 0; - if (sizeGrowing) { - additionalWidth = (width * 0.1) & ~1; - additionalHeight = (height * 0.1) & ~1; + additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; + if (dimensionsChanged) { + var canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && + canvasWidth > minCacheSize && canvasHeight > minCacheSize; + shouldResizeCanvas = sizeGrowing || sizeShrinking; + if (sizeGrowing) { + additionalWidth = (width * 0.1) & ~1; + additionalHeight = (height * 0.1) & ~1; + } } if (shouldRedraw) { if (shouldResizeCanvas) { - this._cacheCanvas.width = Math.max(Math.ceil(width) + additionalWidth, minCacheSize + 1); - this._cacheCanvas.height = Math.max(Math.ceil(height) + additionalHeight, minCacheSize + 1); + this._cacheCanvas.width = Math.max(Math.ceil(width) + additionalWidth, minCacheSize); + this._cacheCanvas.height = Math.max(Math.ceil(height) + additionalHeight, minCacheSize); this.cacheWidth = width; this.cacheHeight = height; + this.cacheTranslationX = (width + additionalWidth) / 2; + this.cacheTranslationY = (height + additionalHeight) / 2; + console.log('resized', this._cacheCanvas.width, this._cacheCanvas.height) } else { + console.log('not resized') this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); this._cacheContext.clearRect(0, 0, this._cacheCanvas.width, this._cacheCanvas.height); } From 28745cd0a63a91fccf3bcd38ab2eeffbb1776107 Mon Sep 17 00:00:00 2001 From: Asturur Date: Tue, 27 Jun 2017 08:40:05 +0200 Subject: [PATCH 3/3] removed console.log git push --- src/shapes/object.class.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 846b4f7145b..c127bd0c91f 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -949,10 +949,8 @@ this.cacheHeight = height; this.cacheTranslationX = (width + additionalWidth) / 2; this.cacheTranslationY = (height + additionalHeight) / 2; - console.log('resized', this._cacheCanvas.width, this._cacheCanvas.height) } else { - console.log('not resized') this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); this._cacheContext.clearRect(0, 0, this._cacheCanvas.width, this._cacheCanvas.height); }