javascript - Fabricjs 在 LoadfromJson 之后应用 ClipTo

Question

loadFromJson 采用 3 个参数，第 3 个参数是应用于每个加载对象的函数。如何将 ClipTo 函数应用于加载的每个图像？

我尝试过这个:

        this.canvas.loadFromJSON(this.getJson(), () => {
      fabric.Image.fromURL(url.replace(/^https:\/\//i, 'http://').concat('?').concat(Math.random().toString(36).substring(7)), (img) => {
          img.scaleToWidth(this.canvas.getWidth() - 4)
          this.canvas.add(img)
          img.sendToBack()
          this.canvas.renderAll()
          var image = document.getElementById(this.props.product._id+this.props.type+"-productPreviewImage")
          image.src = this.canvas.toDataURL()


      }, {
        crossOrigin: 'anonymous',
        objectCaching: false
      });


    }, (img) => {
      if (img.type == 'image') {
        img.clipTo = (ctx) => {
          img.setCoords();
          var clipRect = this.canvas.getObjects().filter(p => p.clipFor === 'layer')[0]
          var scaleXTo1 = (1 / img.scaleX);
          var scaleYTo1 = (1 / img.scaleY);
          ctx.save();

          var ctxLeft = -(img.width / 2) + 1;
          var ctxTop = -(img.height / 2) + 1;
          var ctxWidth = clipRect.width - clipRect.strokeWidth;
          var ctxHeight = clipRect.height - clipRect.strokeWidth;

          ctx.translate(ctxLeft, ctxTop);
          ctx.scale(scaleXTo1, scaleYTo1);
          ctx.rotate((img.angle * -1)* (Math.PI / 180))

          ctx.beginPath();
          ctx.rect(
              clipRect.left - img.oCoords.tl.x,
              clipRect.top - img.oCoords.tl.y,
              clipRect.width,
              clipRect.height
          );
          ctx.closePath();
          ctx.restore()
        }
      }
    })

不幸的是，它会引发有关 img.setCoords() 不是函数的错误。

Answer 1

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  // `o` = json object
  // `object` = fabric.Object instance
  // ... do some stuff ...
});

如文档 loadFromJSON 中所述，reviver 函数有两个参数。第一个是 json 中的当前对象，第二个是 Fabric 对象实例。所以你需要使用第二个参数。