Question

我有一个带有面料的网站，它可以很好地渲染pdf（作为图像）。使用移动浏览器时，它显示良好，并且我启用了允许触摸滚动并可以平移图像（几乎等于滚动，但不如滚动有效）。我在用户必须响应的渲染图像上有注释。到目前为止，查找每个注释对象很繁琐。有什么办法可以以编程方式平移特定x，y中心的织物画布？

谢谢上级

Answer 1

平移画布，以便[0,0]出现在视口的中心。为此，请canvas.absolutePan(new fabric.Point(-canvas.getWidth() / 2, -canvas.getHeight() / 2)
然后将画布偏移到您的对象坐标（在我的示例中，我使用[left,top] + [halfWidth, halfHeight]计算对象中心的偏移量。

到此结束了canvas.absolutePan至[-canvas.getWidth() / 2 + obj.left + obj.width / 2, -canvas.getHeight() / 2 + obj.top + obj.height / 2

工作示例，您可以在这里找到：http://jsfiddle.net/mmalex/2rsevdLa/

function panTo(canvas, obj) {
    let w = canvas.getWidth();
    let h = canvas.getHeight();

    let targetX = obj.left + obj.width / 2;
    let targetY = obj.top + obj.height / 2;

    canvas.absolutePan(new fabric.Point(-w/2+targetX, -h/2+targetY))
}

function recenterCanvas() {
    panTo(canvas, refRect);
    canvas.bringToFront(refRect);
    canvas.renderAll();
}

fabricjs以编程方式在移动浏览器上平移画布

1 个答案: