在 Fabric.js 中真正旋转等边三角形的中心

使用 Fabric.js，我无法真正围绕其中心点旋转三角形，或者至少我认为应该是中心点。我创建了一个jsFiddle http://jsfiddle.net/UW8Be/这表明。三角形很简单，我用了originX: 'center'原点Y 也是如此，但是当三角形旋转时，x 和 y 方向仍然有轻微的移动。如何确保三角形永远不会移动？

我找到了这个答案，想知道这是否是正确的道路？如何围绕fabric.js中的一个指定点旋转？ https://stackoverflow.com/questions/8829929/how-to-rotate-around-one-specified-point-in-fabric-js

编辑：新的努力包括实施上述链接问题的答案。这是代码：

function createTriangle(x, y, angle)
{

    var t = new fabric.Triangle(
    {
        width: 350,
        height: 300,
        selectable: false,
        fill: 'rgba(0,0,0,0)',
        stroke: 'white',
        strokeWidth: 2,
        left: x,
        top: y,
        angle: angle
    });


    var rotation_origin = new fabric.Point(t.getCenterPoint().x, t.getCenterPoint().y);
    var angle_randians = fabric.util.degreesToRadians(angle);
    var rotatePoint = fabric.util.rotatePoint(new fabric.Point(rotation_origin.x, rotation_origin.y), rotation_origin, angle_randians);

    t.originX = rotatePoint.x;
    t.originY = rotatePoint.y;  
    return t;`
}

然而，这对我不起作用。三角形在旋转的同时仍然移动了一点。

EDIT:我尝试从上面的链接问题设置指定的旋转点。它对我没有用。三角形的旋转完全相同。

EDIT2:当我更深入地研究这个问题时，我开始相信这不仅仅是一个 Fabric.js 问题。它看起来更像是 webGL，但不是问题，只是形状转换的方式而已。我可以看到旋转矩形和旋转三角形之间存在差异。使用中心原点，矩形永远不会出现移动。我还没有找到答案，但我将 webGL 作为标签，希望能得到一些帮助。有人遇到过这种情况吗？

Fabric.js计算中心点 https://github.com/kangax/fabric.js/blob/601fdc9d64c7445e234a1f50a592f56943255bc5/src/mixins/object_origin.mixin.js#L71的形状由平移左上角的点 https://github.com/kangax/fabric.js/blob/601fdc9d64c7445e234a1f50a592f56943255bc5/src/mixins/object_origin.mixin.js#L14到形状边界框的中心。边界框的中心不是三角形的中心。

对于底边在底部的等腰三角形（其中两条边长度相同）——我相信这是 Fabric.js 的默认设置——三角形的中心点位于三角形高度的三分之一处。

您可以使用描述的方法here https://github.com/kangax/fabric.js/issues/439#issuecomment-24029367找到一个新的左上角（x and y通过围绕三角形中心旋转原始左上角来获得形状的值）。

function createTriangle(x, y, angle)
{
    var width = 350;
    var height = 300;
    var pos = fabric.util.rotatePoint(
        new fabric.Point(x, y),
        new fabric.Point(x + width / 2, y + height / 3 * 2),
        fabric.util.degreesToRadians(angle)
    );
    return new fabric.Triangle(
    {
        width: width,
        height: height,
        selectable: false,
        fill: 'rgba(0,0,0,0)',
        stroke: 'white',
        strokeWidth: 2,
        left: pos.x,
        top: pos.y,
        angle: angle
    });
}

您需要最新版本的 Fabric.js 才能正常工作。