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

Question

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

谢谢普雷姆

Answer 1

平移 canvas 以便 [0,0] 出现在视口中央。为此，请执行 canvas.absolutePan(new fabric.Point(-canvas.getWidth() / 2, -canvas.getHeight() / 2)
然后另外偏移 canvas 到您的对象坐标（在我的示例中，我使用 [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 在移动浏览器上以编程方式平移 canvas

fabricjs programmatically pan canvas on mobile browser

fabricjs