在Fabric.js中真正旋转等边三角形的中心 [英] Truly rotate center of equilateral triangle in Fabric.js

问题描述

使用Fabric.js，我无法真正围绕其中心点旋转三角形，或者至少我认为应该将其作为中心点旋转.我创建了一个 jsFiddle 进行演示.三角形很简单，我使用originX: 'center'并将它与originY相同，但是随着三角形的旋转，在x和y方向上仍然会有轻微的移动.如何确保三角形永不移动?

Using Fabric.js, I'm having trouble truly rotating a triangle around its center point, or at least what I believe should be the center point. I created a jsFiddle that demonstrates. The triangle is simple, and I used originX: 'center' and the same for originY, however as the triangle is rotating, there is still slight movement in the x and y directions. How do I make sure that the triangle never moves?

我找到了这个答案，并且想知道这是否是正确的方法? 如何围绕fabric.js中的一个指定点旋转?

I found this answer and was wondering if this is the right path to take? how to rotate around one specified point in fabric.js?

新的工作包括实施上述链接问题的答案.这是代码:

New efforts include implementing the answer from the above linked question. Here's the code:

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;`
}

但是，这对我不起作用.旋转时三角形仍会移动一点.

This, however is not working for me. The triangle still moves a bit while rotating.

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

I tried setting the specified rotation points from the linked question above. It hasn't worked for me. The triangle rotates exactly the same.

EDIT2 :随着我对这一问题的深入研究，我开始相信这不仅仅是一个Fabric.js问题.看起来更多的是webGL，但不是问题，只是形状转换的方式.我可以看到旋转矩形和三角形之间是有区别的.使用中心原点，矩形始终永远不会出现移动.我没有找到答案，但是我将webGL作为标签包括在内，希望能对此有所帮助.有没有人遇到过这个?

As I dive more into this, I'm starting to believe this is more than a Fabric.js question. It seems like more webGL, but not an issue, just the way shapes are transformed. I can see that there is a difference between rotating a rectangle and a triangle. Using center origins, rectangles always never appear to move around. I have not found the answer but I'm including webGL as a tag to hopefully get some help on this. Has anyone ever encountered this?

推荐答案

fabric.js #L14>将左上角的点平移到形状的边框的中心.边界框的中心不是三角形的中心.

fabric.js calculates the centre point of a shape by translating a point in the top left corner to the centre of the bounding box of the shape. The centre of the bounding box is not the centre of the triangle.

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

For an isosceles triangle (where 2 sides are the same length) with its base at the bottom - which I believe is the default for fabric.js - the centre point of the triangle is located at one third the height of the triangle.

您可以在此处中描述的方法来查找新的左上角(将x和y值)更改为形状，方法是围绕三角形的中心旋转原始的左上角.

You can use the method described here to find a new top-left corner (the x and y values) for the shape by rotating the original top-left about the centre of the triangle.

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才能起作用.

You will need a recent version of fabric.js for this to work.

这篇关于在Fabric.js中真正旋转等边三角形的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！