loadFromJSON 不能与 clipto 一起使用

Question

即使我尝试了作为演示提供的http://fabricjs.com/kitchensink，loadFromJSON 也无法使用 clipto 参数。

对象在画布上也显示为圆形，但是当我导出为 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 格式存储画布时：

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

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