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

Question

我有一个带有织物的网站，它可以很好地呈现 pdf（作为图像）。使用移动浏览器显示正常，我启用了 allowtouchscrolling 并可以平移图像（几乎等于滚动，但不如滚动有效）。我在渲染的图像上有注释，用户必须做出响应。到目前为止，查找每个注释对象很乏味。有没有办法以编程方式将织物画布平移到特定的 x,y 中心？

谢谢 前置

Answer 1

1. 平移画布，使[0,0] 出现在视口中心。 要做到这一点canvas.absolutePan(new fabric.Point(-canvas.getWidth() / 2, -canvas.getHeight() / 2)

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