loadFromJSON不能与clipto一起工作

问题描述：

loadFromJSON不能与clipto参数一起工作，即使我尝试了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(); 
    };

你在说什么的'/n'即将进入'json'？ –

不，我的意思是 ctx.arc（0，0，radius，0，Math.PI * 2，true）半径必须是一个数值。 – kemalatila

答

我能解决这个问题：

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/

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

loadFromJSON不能与clipto一起工作

相关推荐