Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Partially solve cache fuzzyness #4452

Merged
merged 4 commits into from
Nov 12, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fixed tests
asturur committed Nov 12, 2017

Verified

This commit was signed with the committer’s verified signature. The key has expired.
neSpecc Peter
commit 81f10aa74e4f21fb74522048eb95633a77247187
15 changes: 9 additions & 6 deletions src/shapes/object.class.js
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/shapes/text.class.js
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 3 additions & 3 deletions test/unit/object.js
Original file line number Diff line number Diff line change
@@ -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) {