Skip to content

Commit

Permalink
strokeUniform property (fabricjs#5473)
Browse files Browse the repository at this point in the history
* new Object property strokeUniform allows the stroke width to always stay the same width as object scales

* fix for height

* Update src/shapes/object.class.js

Co-Authored-By: stefanhayden <alt255@gmail.com>
  • Loading branch information
stefanhayden authored and asturur committed Feb 16, 2019
1 parent dd6c798 commit 33ac81a
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 3 deletions.
17 changes: 14 additions & 3 deletions src/mixins/object_geometry.mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.height / 2;
}
else {
dimX = dimensions.x / 2;
dimY = dimensions.y / 2;
}
var points = [
{
x: -dimX,
y: -dimY
Expand All @@ -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 };
},

/*
Expand Down
18 changes: 18 additions & 0 deletions src/shapes/object.class.js
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,18 @@
*/
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.6.0
* @type Boolean
* @default false
* @type Boolean
* @default false
*/
strokeUniform: false,

/**
* When set to `true`, object's cache will be rerendered next render call.
* since 1.7.0
Expand Down Expand Up @@ -1327,6 +1339,9 @@
else {
alternative && alternative(ctx);
}
if (this.strokeUniform) {
ctx.setLineDash(ctx.getLineDash().map(function(value) { return value * ctx.lineWidth; }));
}
},

/**
Expand Down Expand Up @@ -1464,6 +1479,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();
Expand Down

0 comments on commit 33ac81a

Please sign in to comment.