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

Question

使用Fabric.js,我无法真正围绕其中心点旋转三角形,或者至少我认为应该是中心点.我创建了一个演示的jsFiddle.三角形很简单,我使用originX: 'center'和原点相同,但是当三角形旋转时,在x和y方向上仍然有轻微的移动.如何确保三角形不会移动？

我找到了这个答案,并想知道这是否是正确的选择？ 如何围绕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;`
}

然而,这对我不起作用.旋转时三角形仍会移动一点.

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

编辑2:当我更深入地了解这一点时,我开始相信这不仅仅是一个Fabric.js问题.它似乎更像是webGL,但不是问题,只是形状转换的方式.我可以看到旋转矩形和三角形之间存在差异.使用中心原点,矩形似乎永远不会移动.我还没有找到答案,但我将webGL作为标签包含在内,希望能得到一些帮助.有没有人见过这个？

Answer 1

fabric.js 通过将左上角的点转换为形状边界框的中心来计算形状的中心点.边界框的中心不是三角形的中心.

对于等腰三角形(其中两边长度相同),其底部位于底部 - 我认为这是fabric.js的默认值 - 三角形的中心点位于三角形高度的三分之一处.

您可以使用此处描述的方法,通过围绕三角形的中心旋转原始左上角来查找形状的新左上角(x和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才能使用.