strokeUniform property (#5473)

* 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 <[email protected]>
fabricjs · Feb 16, 2019 · 850c617 · 850c617
1 parent a85dc37
commit 850c617
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git 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.height / 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
@@ -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
@@ -1327,6 +1339,9 @@
       else {
         alternative && alternative(ctx);
       }
+      if (this.strokeUniform) {
+        ctx.setLineDash(ctx.getLineDash().map(function(value) { return value * ctx.lineWidth; }));
+      }
     },
 
     /**
@@ -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();