Question

loadFromJSON使用了clipto参数，即使我尝试了以http://fabricjs.com/kitchensink为例进行演示。

对象在画布上显示为舍入，但当我导出为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/

loadFromJSON不能使用clipto

1 个答案: