Control cusomization part 3 - allow for rounded corners (#2942)

Using Object.cornerStyle = 'circle' or 'rect'
fabricjs · May 5, 2016 · b99eebd · b99eebd
1 parent e5bedf3
commit b99eebd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js
@@ -286,7 +286,7 @@
           scaleOffset = this.cornerSize,
           left = -(width + scaleOffset) / 2,
           top = -(height + scaleOffset) / 2,
-          methodName = this.transparentCorners ? 'strokeRect' : 'fillRect';
+          methodName = this.transparentCorners ? 'stroke' : 'fill';
 
       ctx.save();
       ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
@@ -357,11 +357,22 @@
       if (!this.isControlVisible(control)) {
         return;
       }
-      var size = this.cornerSize;
-      isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
-      ctx[methodName](left, top, size, size);
-      if (!this.transparentCorners && this.cornerStrokeColor) {
-        ctx.strokeRect(left, top, size, size);
+      var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
+      switch (this.cornerStyle) {
+        case 'circle':
+          ctx.beginPath();
+          ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
+          ctx[methodName]();
+          if (stroke) {
+            ctx.stroke();
+          }
+          break;
+        default:
+          isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
+          ctx[methodName + 'Rect'](left, top, size, size);
+          if (stroke) {
+            ctx.strokeRect(left, top, size, size);
+          }
       }
     },
 

diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
@@ -463,6 +463,13 @@
      */
     cornerStrokeColor:        null,
 
+    /**
+     * Specify style of control, 'rect' or 'circle'
+     * @since 1.6.2
+     * @type String
+     */
+    cornerStyle:          'rect',
+
     /**
      * Array specifying dash pattern of an object's control (hasBorder must be true)
      * @since 1.6.2