loadFromJSONはcliptoで動作しません

Question

loadFromJSON cliptoパラメータで作業しても、デモとして与えられたhttp://fabricjs.com/kitchensinkを試しました。

キャンバス上に丸みを帯びたオブジェクトが表示されますが、JSONファイルとしてエクスポートすると、JSONファイルが正しく読み込まれないため、fabricJSが間違った書き出しをエクスポートします。

エクスポート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/