Смещение ограничивающего прямоугольника пути fabricjs

Я пытаюсь создать фигуру с помощью ткани.Путь, и я хотел бы иметь возможность вращать его вокруг своего центра. Проблема в том, что ограничивающий прямоугольник смещен, и фактическая форма танцует вокруг его центра:

Введите описание изображения здесь

this.canvas = new fabric.Canvas('c')
this.canvas.clear();

var triangle = new fabric.Triangle({
width: 20,
            height: 20,
            fill: '#35a2da',
left: 410,
top: 350,
angle: 90
});


var path = new fabric.Path(
  "M 200 175 A 25 25 0 1 0 217.678 217.678",
        {
        fill : '',
        stroke : '#35a2da',
        strokeWidth : 7,
        left: 200, 
        top:200
    });

var rotate = new fabric.Group([path, triangle], {left:200, top:200});

this.canvas.add(rotate);

Приведенный выше код можно найтиздесь .

1 2
javascript path

1 ответ:

Пока вы фиксируете размеры объекта fabric.Path на основе дуги SVG, которую вы рисуете, и фиксируете размеры объекта fabric.Group к этим же размерам, вы должны быть в состоянии получить форму, идеально центрированную.

Пример Скрипки

Причины эксплицитности калибровки

fabric.Path

Причина, по которой вы хотите явно задать ширину и высоту fabric.Path, заключается в том, что в противном случае размер по умолчанию будет включать дополнительный размер от удара по дуге.

fabric.Group

Причина явного задания размера fabric.Group заключается в том, что при расположении fabric.Triangle в начале дуги границы будут выходить за пределы той окружности, на которой вы хотите быть идеально центрированы.

Как динамически вычислить путь SVG значка поворота

Я написал эту функцию, которая возвращает объект с точками, которые вам понадобятся для визуализации дуги SVG, учитывая радиус: 

function rotatePoints(radius) {
    // Get 45 degrees in radians
    var angle = Math.PI / 4;
    return {
        radius: radius,
        startPos: {
            x: radius,
            y: 0
        },
        endPos: {
            x: radius + (radius * Math.cos(angle)),
            y: radius + (radius * Math.sin(angle))
        }
    }
}

Например, учитывая радиус 30, вы можете построить путь SVG следующим образом: 

var pathPts = rotatePoints(30);
var pathSVG = [
    'M', pathPts.startPos.x, pathPts.startPos.y,
    'A', pathPts.radius, pathPts.radius,
    0, 1, 0,
    pathPts.endPos.x, pathPts.endPos.y
];    
pathSVG.join(' ') // result: "M 30 0 A 30 30 0 1 0 51.21320343559643 51.21320343559643"

Координаты холста против координат группы

Имейте в виду, что как только вы добавляете Path и Triangle к Group, Если вы хотите установить положение любого из них, координаты относительно границ Group, а не всего холста (см. скрипку для примера того, как их позиции корректируются, добавляясь к Group.

0