Merge pull request #1635 from asturur/Polygons-and-Polylines

Fix polygons and polylines rendering

src/shapes/polygon.class.js

@@ -39,21 +39,19 @@
      * Constructor
      * @param {Array} points Array of points
      * @param {Object} [options] Options object
-     * @param {Boolean} [skipOffset] Whether points offsetting should be skipped
      * @return {fabric.Polygon} thisArg
      */
-    initialize: function(points, options, skipOffset) {
+    initialize: function(points, options) {
       options = options || { };
       this.points = points;
       this.callSuper('initialize', options);
-      this._calcDimensions(skipOffset);
+      this._calcDimensions();
     },
 
     /**
      * @private
-     * @param {Boolean} [skipOffset] Whether points offsetting should be skipped
      */
-    _calcDimensions: function(skipOffset) {
+    _calcDimensions: function() {
 
       var points = this.points,
           minX = min(points, 'x'),
@@ -64,20 +62,19 @@
       this.width = (maxX - minX) || 1;
       this.height = (maxY - minY) || 1;
 
-      this.minX = minX;
-      this.minY = minY;
-
-      if (skipOffset) {
-        return;
-      }
-
-      var halfWidth = this.width / 2 + this.minX,
-          halfHeight = this.height / 2 + this.minY;
+      this.left = minX,
+      this.top = minY;
+    },
 
+    /**
+     * @private
+     */
+    _applyPointOffset: function() {
       // change points to offset polygon into a bounding box
+      // executed one time
       this.points.forEach(function(p) {
-        p.x -= halfWidth;
-        p.y -= halfHeight;
+        p.x -= (this.left + this.width / 2);
+        p.y -= (this.top + this.height / 2);
       }, this);
     },
 
@@ -126,6 +123,14 @@
     _render: function(ctx) {
       var point;
       ctx.beginPath();
+
+      if (this._applyPointOffset) {
+        if (!(this.group && this.group.type === 'path-group')) {
+          this._applyPointOffset();
+        }
+        this._applyPointOffset = null;
+      }
+
       ctx.moveTo(this.points[0].x, this.points[0].y);
       for (var i = 0, len = this.points.length; i < len; i++) {
         point = this.points[i];
@@ -194,7 +199,7 @@
       return null;
     }
 
-    return new fabric.Polygon(points, extend(parsedAttributes, options), true);
+    return new fabric.Polygon(points, extend(parsedAttributes, options));
   };
   /* _FROM_SVG_END_ */
 

src/shapes/polyline.class.js

@@ -52,19 +52,25 @@
      *   top: 100
      * });
      */
-    initialize: function(points, options, skipOffset) {
+    initialize: function(points, options) {
       options = options || { };
       this.set('points', points);
       this.callSuper('initialize', options);
-      this._calcDimensions(skipOffset);
+      this._calcDimensions();
     },
 
     /**
      * @private
-     * @param {Boolean} [skipOffset] Whether points offsetting should be skipped
      */
-    _calcDimensions: function(skipOffset) {
-      return fabric.Polygon.prototype._calcDimensions.call(this, skipOffset);
+    _calcDimensions: function() {
+      return fabric.Polygon.prototype._calcDimensions.call(this);
+    },
+
+    /**
+     * @private
+     */
+    _applyPointOffset: function() {
+      return fabric.Polygon.prototype._applyPointOffset.call(this);
     },
 
     /**
@@ -110,6 +116,14 @@
     _render: function(ctx) {
       var point;
       ctx.beginPath();
+
+      if (this._applyPointOffset) {
+        if (!(this.group && this.group.type === 'path-group')) {
+          this._applyPointOffset();
+        }
+        this._applyPointOffset = null;
+      }
+
       ctx.moveTo(this.points[0].x, this.points[0].y);
       for (var i = 0, len = this.points.length; i < len; i++) {
         point = this.points[i];
@@ -174,7 +188,7 @@
       return null;
     }
 
-    return new fabric.Polyline(points, fabric.util.object.extend(parsedAttributes, options), true);
+    return new fabric.Polyline(points, fabric.util.object.extend(parsedAttributes, options));
   };
   /* _FROM_SVG_END_ */
 

test/unit/polygon.js

@@ -11,8 +11,8 @@
     'type':               'polygon',
     'originX':            'left',
     'originY':            'top',
-    'left':               0,
-    'top':                0,
+    'left':               10,
+    'top':                12,
     'width':              10,
     'height':             10,
     'fill':               'rgb(0,0,0)',
@@ -46,7 +46,7 @@
     ok(polygon instanceof fabric.Object);
 
     equal(polygon.type, 'polygon');
-    deepEqual(polygon.get('points'), [ { x: -5, y: -5 }, { x: 5, y: 5 } ]);
+    deepEqual(polygon.get('points'), [ { x: 10, y: 12 }, { x: 20, y: 22 } ]);
   });
 
   test('complexity', function() {
@@ -121,7 +121,9 @@
       'strokeLineJoin':   'bevil',
       'strokeMiterLimit': 5,
       'opacity':          0.34,
-      'points':           expectedPoints
+      'points':           expectedPoints,
+      'top':              10,
+      'left':             10
     }));
 
     deepEqual(polygonWithAttrs.get('transformMatrix'), [ 2, 0, 0, 2, -10, -20 ]);

test/unit/polyline.js

@@ -11,8 +11,8 @@
     'type':               'polyline',
     'originX':            'left',
     'originY':            'top',
-    'left':               0,
-    'top':                0,
+    'left':               10,
+    'top':                12,
     'width':              10,
     'height':             10,
     'fill':               'rgb(0,0,0)',
@@ -46,7 +46,7 @@
     ok(polyline instanceof fabric.Object);
 
     equal(polyline.type, 'polyline');
-    deepEqual(polyline.get('points'), [ { x: -5, y: -5 }, { x: 5, y: 5 } ]);
+    deepEqual(polyline.get('points'), [ { x: 10, y: 12 }, { x: 20, y: 22 } ]);
   });
 
   test('complexity', function() {
@@ -110,7 +110,9 @@
       'strokeLineJoin': 'bevil',
       'strokeMiterLimit': 5,
       'opacity': 0.34,
-      'points': expectedPoints
+      'points': expectedPoints,
+      'left': 10,
+      'top': 10
     }));
 
     deepEqual(polylineWithAttrs.get('transformMatrix'), [ 2, 0, 0, 2, -10, -20 ]);