Поверните вращение центра равностороннего треугольника в Fabric.js

Question

Используя Fabric.js, у меня возникают проблемы с истинным поворотом треугольника вокруг его центральной точки или, по крайней мере, то, что, по моему мнению, должно быть центральной точкой. Я создал jsFiddle, который демонстрирует. Треугольник прост, и я использовал originX: 'center' и то же самое для originY, однако по мере поворота треугольника все еще незначительное движение в направлениях x и y. Как я могу убедиться, что треугольник никогда не перемещается?

Я нашел этот ответ и задавался вопросом, правильно ли это сделать? how to rotate around one specified point in fabric.js?

EDIT: Новые усилия включают в себя выполнение ответа из вышеуказанного связанного вопроса. Вот код:

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 в качестве тега, чтобы надеяться на помощь. Кто-нибудь когда-нибудь сталкивался с этим?

Answer 1

fabric.js calculates the centre point формы от translating a point in the top left corner до центра ограничивающей коробки формы. Центр ограничительной рамки не является центром треугольника.

Для равнобедренного треугольника (где две стороны имеют одинаковую длину) с его основанием внизу - по моему мнению, это значение по умолчанию для fabric.js - центральная точка треугольника расположена на одной трети высоты треугольник.

Вы можете использовать метод, описанный here, чтобы найти новый верхний левый угол (в 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.