Question

我刚刚开始使用fabric.js，我想知道是否有办法以可以使用笛卡尔坐标的方式创建画布？例如，我想在（0,0）创建的圆圈显示在我的画布中心，x轴为-400到400，y.axis为-400到400，高y的值上升，x的值越大越好。

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

Answer 1

如果不引入视觉伪像，则无法更改canvas元素的原点。您可以做的是将画布平移到虚拟的“ 0,0”位置。请记住，您将不得不根据自己的特定用例调整X_PAN_VALUE和Y_PAN_VALUE。

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

迟到总比没有好；）

Answer 2

您可以使用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/

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

2 个答案: