嵌套时重叠的三角形形状

Question

我正在使用fabricJS创建形状（圆形，三角形，矩形等），并且需要在主形状内创建子形状，依此类推（2级嵌套）。我使用织物提供的方法来创建三角形，但是当我创建子形状时，它会重叠，并且在各种画布尺寸上都发生了这种情况。

Triangle-1

Triangle-2

Triangle-3

Triangle-4

我的三角形代码是

var triangle1 = {
strokeWidth= 2;
stroke= 'blue';
lockScalingX= true;
lockScalingY= true;
lockMovementX= true;
lockMovementY= true;
originX = "center";
originY = "center";
height:canvas.height,
width : canvas.width
...// other props
}

var triangle2 = {
lockScalingX= true;
lockScalingY= true;
lockMovementX= true;
lockMovementY= true;
originX = "center";
originY = "center";
height:canvas.height -(0.250*72), //@ some calculations required
width : canvas.width -(0.250*72), //@ some calculations
...// other props
}

var mainTriangle1 = new fabric.Triangle(triangle1);
var mainTriangle2 = new fabric.Triangle(triangle1);

canvas.add(mainTriangle1,mainTriangle2);

我不知道我是否错过了一些非常基本的东西或完全朝错误的方向发展。我也尝试过多边形点，但是没有运气，这里是fiddle 我的其他形状，例如circle和square都可以正常工作。

我相信我缺少一些东西，任何方向都会很有帮助。

谢谢