2

我正在尝试使用 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);

上面的代码可以在这里找到。

4

1 回答 1

0

只要您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"

画布坐标与组坐标

请记住，一旦将Pathand添加Triangle到Group，如果要设置其中任何一个的位置，则坐标相对于 的边界，而Group不是整个画布（有关如何调整其位置的示例，请参见小提琴）添加到Group.

于 2013-06-17T03:32:20.030 回答