Truly rotate center of equilateral triangle in Fabric.js

问题

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?

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?

EDIT: 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.

EDIT: 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: 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?

回答1:

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.

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.

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

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

来源：https://stackoverflow.com/questions/20961546/truly-rotate-center-of-equilateral-triangle-in-fabric-js