Fabricjs 画布对象无法正确呈现

Question

我需要有关 fabricjs 的帮助，当我克隆并缩小到另一个画布时，对象没有正确渲染。

如果我只使用文本对象没有问题，请看下面的小提琴（保存后） enter code hereFIDDLE

如果我加载图像，则对象未正确对齐。 enter code hereFIDDLE

请帮助解决这个问题。

谢谢。

Answer 1

您对图像不尊重缩放的问题是图像加载异步。因此，您从 json 加载，执行缩放逻辑，几微秒后图像完成加载并设置自己的宽度和高度。

除此之外，您必须以正确的方式使用缩放。

每个人都在手动缩放并使用除法或乘以比例因子来改变左和上。

好方法是使用

canvas.setZoom(scale);

这将为您省去很多麻烦。

  $(function () {
    scale = 0.5;
    canvas1 = new fabric.Canvas('c1');
    canvas1.setDimensions({
        "width": canvas.getWidth() * scale,
        "height": canvas.getHeight() * scale
    })
    var json = localStorage.getItem('save');
    canvas1.loadFromJSON(json, function () {
        canvas1.renderAll();
    });
    canvas1.setZoom(scale);
    canvas1.renderAll();
  });

chek 更新了小提琴 https://jsfiddle.net/asturur/Lep9w01L/11/