javascript - 如何在fabric js中保留图像的位置

Question

我正在尝试使用 Fabric js 进行图像处理。我正在处理非常大的图像，因此我必须在图像处理后保存 Canvas 的副本，以便下次可以使用 jquery 的 id.show 更快地显示它。
但我想在确切的位置渲染图像。我正在使用canvas.zoomToPoint and canvas.relativePan缩放和平移图像，但在执行缩放+平移之后应用图像处理以显示隐藏的 Canvas 并应用 hiddencanvas.zoomToPoint and hiddencanvas.relativePan在隐藏的 Canvas 上，它不会在我离开旧 Canvas 的确切位置渲染图像。
我做错了什么吗？这是一个支持 Fiddle但是， fiddle 通过上传来渲染图像，如果您缩放和平移并单击反转，则反转的图像不会移动到那里平移代码:``var panning = false; canvas.on('鼠标:向上', 函数 (e) { 平移=假； });

    canvas.on('mouse:down', function (e) {
        panning = true;
    });
    canvas.on('mouse:move', function(e) {
        if (panning && e && e.e) {
             var x = e.offsetX, y = e.offsetY;
             var delta = new fabric.Point(e.e.movementX, e.e.movementY);
             canvas.relativePan(delta);
             //Above statement pan's the image but what to save to server in order to render the image on the exact panned location ?
        }
    });

`` 而这是缩放代码:canvas.zoomToPoint({ x: x, y: y }, newZoom);

Answer 1

我找到了答案，这是一个非常愚蠢的错误。

每个 Canvas 都有一个视口(viewport)变换。 所以，我们只需要获取 canvas.viewportTransform 即可获取 ScaleX、scaleY、left、top 为 [scaleX, 0,0, scaleY, left,top] 。

希望，它会对某人有所帮助。