From 3a2f070b6d530dde305609a6b818e6300496c4f6 Mon Sep 17 00:00:00 2001 From: Stefan Hayden Date: Thu, 10 Jan 2019 16:22:07 -0500 Subject: [PATCH 1/3] new Object property strokeUniform allows the stroke width to always stay the same width as object scales --- src/mixins/object_geometry.mixin.js | 17 ++++++++++++++--- src/shapes/object.class.js | 16 ++++++++++++++++ 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index 00f8d448ba8..9e569c3afef 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -592,8 +592,16 @@ if (skewX === 0 && skewY === 0) { return { x: dimensions.x * this.scaleX, y: dimensions.y * this.scaleY }; } - var dimX = dimensions.x / 2, dimY = dimensions.y / 2, - points = [ + var dimX, dimY; + if (this.strokeUniform) { + dimX = this.width / 2; + dimY = this.width / 2; + } + else { + dimX = dimensions.x / 2; + dimY = dimensions.y / 2; + } + var points = [ { x: -dimX, y: -dimY @@ -616,7 +624,10 @@ points[i] = fabric.util.transformPoint(points[i], transformMatrix); } bbox = fabric.util.makeBoundingBoxFromPoints(points); - return { x: bbox.width, y: bbox.height }; + return this.strokeUniform ? + { x: bbox.width + this.strokeWidth, y: bbox.height + this.strokeWidth } + : + { x: bbox.width, y: bbox.height }; }, /* diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 556faec5fc5..74f5218c4e6 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -560,6 +560,16 @@ */ noScaleCache: true, + /** + * When `false`, the stoke width will scale with the object. + * When `true`, the stroke will always match the exact pixel size entered for stroke width. + * default to false + * since 2.5.1 + * @type Boolean + * @default false + */ + strokeUniform: false, + /** * When set to `true`, object's cache will be rerendered next render call. * since 1.7.0 @@ -1323,6 +1333,9 @@ else { alternative && alternative(ctx); } + if (this.strokeUniform) { + ctx.setLineDash(ctx.getLineDash().map(function(value) { return value * ctx.lineWidth; })); + } }, /** @@ -1460,6 +1473,9 @@ } ctx.save(); + if (this.strokeUniform) { + ctx.scale(1 / this.scaleX, 1 / this.scaleY); + } this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke); this._applyPatternGradientTransform(ctx, this.stroke); ctx.stroke(); From 2a09e8f116124c80d4f8dffb4e1254ea6f869831 Mon Sep 17 00:00:00 2001 From: Stefan Hayden Date: Thu, 10 Jan 2019 16:33:23 -0500 Subject: [PATCH 2/3] fix for height --- src/mixins/object_geometry.mixin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index 9e569c3afef..63b7a73b95f 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -595,7 +595,7 @@ var dimX, dimY; if (this.strokeUniform) { dimX = this.width / 2; - dimY = this.width / 2; + dimY = this.height / 2; } else { dimX = dimensions.x / 2; From 4554821e42577d3cdef2d009fea59d2ab8161fa2 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 10 Jan 2019 16:44:32 -0500 Subject: [PATCH 3/3] Update src/shapes/object.class.js Co-Authored-By: stefanhayden --- src/shapes/object.class.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 74f5218c4e6..da967d3f6ea 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -564,7 +564,9 @@ * When `false`, the stoke width will scale with the object. * When `true`, the stroke will always match the exact pixel size entered for stroke width. * default to false - * since 2.5.1 + * @since 2.6.0 + * @type Boolean + * @default false * @type Boolean * @default false */