fix regular polygin size calculations. close #1015

CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+* Fix `Konva.RegularPolygon` size calculations.
+
 ## 7.1.8
 
 * Fix incorrect rendering of `TextPath` in some cases. (again)

src/shapes/RegularPolygon.ts

@@ -32,23 +32,50 @@ export interface RegularPolygonConfig extends ShapeConfig {
  */
 export class RegularPolygon extends Shape<RegularPolygonConfig> {
   _sceneFunc(context) {
-    var sides = this.sides(),
-      radius = this.radius(),
-      n,
-      x,
-      y;
+    const points = this._getPoints();
 
     context.beginPath();
-    context.moveTo(0, 0 - radius);
+    context.moveTo(points[0].x, points[0].y);
 
-    for (n = 1; n < sides; n++) {
-      x = radius * Math.sin((n * 2 * Math.PI) / sides);
-      y = -1 * radius * Math.cos((n * 2 * Math.PI) / sides);
-      context.lineTo(x, y);
+    for (var n = 1; n < points.length; n++) {
+      context.lineTo(points[n].x, points[n].y);
     }
+
     context.closePath();
     context.fillStrokeShape(this);
   }
+  _getPoints() {
+    const sides = this.attrs.sides;
+    const radius = this.attrs.radius || 0;
+    const points = [];
+    for (var n = 0; n < sides; n++) {
+      points.push({
+        x: radius * Math.sin((n * 2 * Math.PI) / sides),
+        y: -1 * radius * Math.cos((n * 2 * Math.PI) / sides),
+      });
+    }
+    return points;
+  }
+  getSelfRect() {
+    const points = this._getPoints();
+
+    var minX = points[0].x;
+    var maxX = points[0].y;
+    var minY = points[0].x;
+    var maxY = points[0].y;
+    points.forEach((point) => {
+      minX = Math.min(minX, point.x);
+      maxX = Math.max(maxX, point.x);
+      minY = Math.min(minY, point.y);
+      maxY = Math.max(maxY, point.y);
+    });
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY,
+    };
+  }
   getWidth() {
     return this.radius() * 2;
   }

test/unit/shapes/RegularPolygon-test.js

@@ -167,4 +167,36 @@ suite('RegularPolygon', function () {
     cloneAndCompareLayer(layer, 254);
     Konva.pixelRatio = undefined;
   });
+
+  test.only('triangle - bounding box', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var poly = new Konva.RegularPolygon({
+      x: 200,
+      y: 100,
+      sides: 3,
+      radius: 50,
+      fill: 'green',
+      stroke: 'blue',
+      strokeWidth: 5,
+      name: 'foobar',
+    });
+
+    layer.add(poly);
+
+    var tr = new Konva.Transformer({
+      nodes: [poly],
+    });
+    layer.add(tr);
+
+    layer.draw();
+
+    var box = poly.getClientRect();
+
+    assert.equal(box.width, 92.60254037844388);
+    assert.equal(box.height, 81.00000000000003);
+  });
 });