如何使fabric.js画布中心为0,0？

【问题标题】：How to make fabric.js canvas center be 0,0?如何使fabric.js画布中心为0,0？
【发布时间】：2019-07-19 00:29:39
【问题描述】：

我刚从 fabric.js 开始，我想知道是否有一种方法可以创建一个可以使用笛卡尔坐标的画布？例如，我希望在 (0,0) 处创建的圆圈显示在画布的中心，在 x 轴上达到 -400 到 400，在 y 轴上达到 -400 到 400，更高y 值上升，x 值上升。

有没有办法在不手动翻译每个位置的情况下做到这一点？

【问题讨论】：

标签： html canvas fabricjs

【解决方案1】：

您可以使用originX 和originY 属性。

var obj = canvas.getObjects();
for (var i in obj) {
    obj[i].set({
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0
    });
}
canvas.renderAll();

用例子检查这个小提琴：http://jsfiddle.net/1ow02gea/51/

【讨论】：

谢谢，但这不是我想要的...我想改变画布本身的坐标系，使点 (0,0) 位于画布的中心（宽度/2，高度/2）。根据您的 Fiddle，圆圈和文本的坐标应该是 (0,0) 而不是 (100,100) 并且仍然位于画布的中心。

【解决方案2】：

如果不引入视觉工件，您无法更改画布元素的原点。您可以做的是 pan 画布到一个虚拟的“0,0”位置。请记住，您必须根据您的特定用例调整 X_PAN_VALUE 和 Y_PAN_VALUE。

canvas.viewportTransform[4] = X_PAN_VALUE;
canvas.viewportTransform[5] = Y_PAN_VALUE;

迟到总比没有好;)

【讨论】：