缩放后Fabricjs画布重置 [英] Fabricjs canvas reset after zooming

问题描述

我有一个 fabricjs 画布，我需要它能够放大和缩小以及更改图像/对象里面好几次.

I have a fabricjs canvas that I need to be able to zoom in and out and also change the image/object inside several times.

为此，我在页面首次加载时设置了画布，如下所示:

For this I setup the canvas in the first time the page loads like this:

fabric.Object.prototype.hasBorders = false;
fabric.Object.prototype.hasControls = false;

canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false});

canvas.defaultCursor = "pointer";
canvas.backgroundImageStretch = false;
canvas.selection = false;
canvas.clear();

var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}
canvas.deactivateAll().renderAll();

然后，当我需要更改画布中的图像/对象或重新加载页面时，我尝试像这样重置画布:

Then when I need to change the image/object in the canvas or when the page reloads, I try to reset the canvas like this:

canvas.clear();
canvas.remove(canvas.getActiveObject());
var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}

不确定是否重要，但是更改图像的方式是通过更改"my_image"中的源并使用上述方法重置画布.

Not sure if it matters but the way I change the image is by changing the source in 'my_image' and reseting the canvas with the above method.

根据此线程，在我使用canvas.zoomToPoint之前，此方法一直有效，之后，当我重置缩放或在缩放时用鼠标单击画布时，图像/对象开始更改位置，似乎在左上角的每个更改处跳转，最终从视图中消失.

This works well until I use canvas.zoomToPoint, as per this thread, after this, the image/object starts changing position when I reset the zoom or click the canvas with the mouse while it is zoomed, seeming to jump at each change in the top left corner direction, eventually disappearing from view.

重置缩放比例:

canvas.setZoom(1);
resetCanvas(); //(above method)

如何恢复图像/对象的位置?

How can I restore the image/object position?

我尝试执行初始设置而不是重置，并进行接缝以使其在视觉上起作用，但实际上是在每次新设置时都在上层画布上添加了新层，因此效果不佳.

I tried doing the initial setup instead of the reset and seamed to work visually but was in fact adding a new layer of upper canvas at each new setup so it is no good.

是否有一种方法可以将画布重置为原始状态而不会导致此行为，并且仍然能够正确放大/缩小?

Is there a way to reset the canvas to original state without causing this behavior and still be able to zoom in/out correctly?

推荐答案

我最终解决了自己遇到的问题.

I eventually fixed the problems I was having.

要重置缩放，而不是仅使用canvas.setZoom(1)将缩放设置为1，我将canvas.zoomToPoint方法重新应用到具有缩放1的同一点，以强制初始缩放，但要考虑所使用的同一点放大.

To reset the zoom, instead of just setting the zoom to 1 with canvas.setZoom(1), I reapplied the canvas.zoomToPoint method to the same point but with zoom 1, to force the initial zoom but regarding the same point that was used to zoom in.

关于恢复图像在画布中的位置的问题(例如在平移后)，就像删除图像，将其居中放置在画布中并将其重新添加到画布中一样简单，就像第一次添加时所做的那样:

As for the problem of restoring the image position in canvas (after panning for instance) it is as simple as removing the image, centering it in the canvas and re-adding it to the canvas as was done when adding first time:

  var img = canvas.getActiveObject();
  canvas.remove(img);
  canvas.centerObject(img);
  canvas.setActiveObject(img);
  canvas.add(img);

  canvas.renderAll();

这篇关于缩放后Fabricjs画布重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！