Fabricjs canvas 对象未正确呈现

Question

我需要有关 fabricjs 的帮助，当我克隆并缩小到另一个对象时，对象无法正确呈现 canvas。

如果我只对文本对象做没有问题请看下面fiddle（保存后） 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 已更新 fiddle https://jsfiddle.net/asturur/Lep9w01L/11/

Fabricjs canvas 对象未正确呈现

Fabricjs canvas objects not rendering properly

fabricjs