loadFromJSON 不能与 clipto 一起使用

Posted 2023-03-25

【中文标题】loadFromJSON 不能与 clipto 一起使用

【英文标题】：loadFromJSON dosen't work with clipto

【发布时间】：2017-04-14 21:04:57

【问题描述】：

即使我尝试了作为演示提供的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();
  ;

【问题讨论】：

您是在谈论即将进入json 的/n 吗？

不，我的意思是 ctx.arc(0, 0, radius, 0, Math.PI * 2, true) radius 必须是一个数值。

【参考方案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/

【讨论】：

这是一个很好的解决方案。但是，这会将对象剪辑为整数而不是变量，这会导致剪辑不灵活。这意味着通过拖动对象，您仍然可以看到固定的剪切区域。而如果我们剪切到变量，通过拖动对象，您会看到剪切区域会发生变化（随着我们剪切到的对象的边界）