fabricjs路径的边界框偏移量

Question

我尝试使用fabric.Path创建一个形状，我希望能够围绕它的中心旋转它。问题是，边界框是偏移的，实际形状围绕其中心跳舞：

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

上面的代码可以找到here。

Answer 1

只要根据您正在绘制的SVG弧修复fabric.Path对象的尺寸，和就会将fabric.Group的尺寸固定为相同的尺寸尺寸，您应该能够使形状完美居中。

Example Fiddle

明确调整大小的原因

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后，如果要设置其中任何一个的位置，则坐标相对于{的边界{1}}，而不是整个画布（请参阅小提琴，了解如何调整其位置的示例添加到Group。