Question

我正在尝试使用结构js进行图像处理。我正在处理非常大的图像，因此我必须在图像处理之后保存画布的副本，以便下次使用jquery的id可以更快地显示它。 show。
但我想在准确的位置渲染图像。我正在使用canvas.zoomToPoint and canvas.relativePan缩放和平移图像，但在我进行缩放+平移然后应用图像处理以显示隐藏的画布并在隐藏的画布上应用hiddencanvas.zoomToPoint and hiddencanvas.relativePan之后，它不会渲染图像在我离开旧帆布的确切位置。我是否有任何错误。这里有一个支持Fiddle。但是，小提琴通过上传渲染图像，如果你缩放和平移并点击反转，倒置的图像就不会移动到那里平移代码：```var panning = false; canvas.on（＆＃39; mouse：up＆＃39;，function（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.viewportTransform然后我们就可以得到ScaleX，scaleY，left，top作为[scaleX，0,0，scaleY，left，top]。

希望，它会帮助某人。

如何在结构js

1 个答案: