按原点定位多边形（fabric.js）

Question

我通过对原点对称地定义点来创建一个简单的六边形。但是，六边形相对于画布上的0,0点没有定位。它似乎使用了边界矩形的顶部/左边。有没有办法使用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);

我在任意原点绘制这个多边形。当我将它放在画布上的X，Y时，我希望多边形的0点位于画布点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）。

  

如果我将多边形上的originX和originY设置为0，它可以正常工作，   但是文档说这些属性采用“左”，“中”，“右”。

这是因为翻译点的代码就像

一样

point coordinates = intial value

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

// do similar thing for originY
...

因此，任何非“左”或“右”的值都将被视为“中心”。您可以通过执行类似

的操作来测试此操作

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

虽然在更新库时我不会依赖它的功能。