按原点定位多边形 (fabric.js)

Question

我通过关于原点对称地定义点创建了一个简单的六边形。但是，六边形并未相对于 canvas 上的 0,0 点定位。它似乎正在使用边界矩形的 top/left 。有没有办法使用0,0点作为原点？

var HH = 87;
var HV = 50;

var canvas = new fabric.Canvas('c', {
    backgroundColor: '#e0e0e0'
});

hex = new fabric.Polygon([
        {x: 0, y: -2 * HV},
        {x: HH, y: -HV},
        {x: HH, y: HV},
        {x: 0, y: 2 * HV},
        {x: -HH, y: HV},
        {x: -HH, y: -HV}
    ], {
        left: 0,
        top: 0,
        fill: 'blue',
        selectable: true
    });

canvas.add(hex);

我围绕任意原点绘制此多边形。当我将它放在 canvas 上的 X、Y 处时，我希望多边形的 0,0 点位于 canvas 点 X、Y 上。

Answer 1

您可以按照您在评论中指出的那样设置 originX 和 originY。你想要的值是 center

hex = new fabric.Polygon([
        { x: 0, y: -2 * HV },
        { x: HH, y: -HV },
        { x: HH, y: HV },
        { x: 0, y: 2 * HV },
        { x: -HH, y: HV },
        { x: -HH, y: -HV }
], {
    originX: 'center',
    originY: 'center',
    fill: 'blue',
    selectable: true
});

请注意，您不需要顶部和左侧的值（它们默认为 0）。

If I set originX and originY on the polygon to 0, it works as I want, but the docs say those properties take 'left', 'center', 'right'.

这是因为转换点的代码位做了类似

的事情

point coordinates = intial value

if (originX === 'left') {
    adjust point x value
}
else if (originX === 'right') {
    adjust point y value
}

// do similar thing for originY
...

因此，任何不是 'left' 或 'right' 的值都将被视为 'center'。您可以通过执行类似

的操作来测试它

hex = new fabric.Polygon([
        { x: 0, y: -2 * HV },
        { x: HH, y: -HV },
        { x: HH, y: HV },
        { x: 0, y: 2 * HV },
        { x: -HH, y: HV },
        { x: -HH, y: -HV }
], {
    originX: 'something',
    originY: 'something',
    fill: 'blue',
    selectable: true
});

虽然我不会依赖它在库更新时以类似方式运行。

按原点定位多边形 (fabric.js)

Positioning a polygon by its origin (fabric.js)

fabricjs