html - loadFromJSON 不适用于 clipto

Question

即使我在 http://fabricjs.com/kitchensink 上尝试过，loadFromJSON 也无法使用 clipto 参数作为演示给出。

对象在 Canvas 上也显示为圆形，但是当我导出为 JSON 文件时，fabricJS 导出了不正确的内容，因此我无法再次加载 JSON 文件。

导出的 JSON:

{"objects":[{"type":"rect","originX":"left","originY":"top","left":241,"top":253,"width":50,"height":50,"fill":"#06980e","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":5.59,"scaleY":5.59,"angle":0,"flipX":false,"flipY":false,"opacity":0.8,"shadow":null,"visible":true,"clipTo":"function (ctx) {\n ctx.arc(0, 0, radius, 0, Math.PI * 2, true);\n }","backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":""}

我该如何解决这个问题？这部分代码可能有问题。

    $scope.clip = function() {
      var obj = canvas.getActiveObject();
      if (!obj) return;

      if (obj.clipTo) {
          obj.clipTo = null;
      }
      else {
          var radius = obj.width < obj.height ? (obj.width / 2) : (obj.height / 2);
          obj.clipTo = function (ctx) {
              ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
          };
      }
      canvas.renderAll();
  };

Answer 1

我刚刚能够解决这个问题:

object.cLeft = -(eWidth / 2) + left;
object.cTop = -(eHeight / 2) + top;
object.cWidth = parseInt(width * eScaleX);
object.cHeight = parseInt(eScaleY * height);

object.clipTo = function (ctx) {
  ctx.rect(this.cLeft, this.cTop, this.cWidth, this.cHeight);
}

以 JSON 格式存储 Canvas 时:

var json = JSON.stringify(canvas.toObject(['cLeft','cTop','cWidth','cHeight']));

工作示例: https://jsfiddle.net/Shahbaz/k8ewrvsc/3/