fabricjs clipTo不工作

Question

我有这样一个简单的脚本：

fabric.Image.fromURL(url, function(oImg) { 
     oImg.set({selectable:false}) 
     oImg.clipTo = function(ctx) { 
      console.log("ctx") 
      console.log(ctx) 
     } 
    }) 

这里clipTo功能不被调用。 我想剪辑oImg但不调用clipTo。

这里有什么问题？

Answer 1

玩家，

这里是工作代码：

var canvas = new fabric.Canvas('c1'); 
var src = "http://fabricjs.com/lib/pug.jpg"; 
canvas.backgroundColor = "#333"; 

var object; 
fabric.util.loadImage(src, function (img) { 
    object = new fabric.Image(img); 
    object.set({ 
     left: 100, 
     top: 100, 
     selectable: false, 
     clipTo: function(ctx) { 
      console.log("ctx") 
      console.log(ctx); 
      ctx.rect(
         2, 
         2, 
         430, 
         430 
        ); 
     } 
    }); 
    object.hasRotatingPoint = true; 
    object.scaleX = object.scaleY = 0.25; 
    canvas.add(object); 
    canvas.renderAll(); 
}); 

其实，你的代码工作的罚款也是如此。我相信只有与库版本不同。我用1.7.1 我的猜测并不适合你，因为你的图像没有被激活或没有被加载到画布中，而你试图剪辑它。

另外，我用fabric.util.loadImage，而不是fabric.Image.fromURL

对于fabric.Image.fromURL你应该积极的对象，然后设置属性。要创建一个活动对象，你应该这样做：

var objImg = null; 
var image = fabric.Image.fromURL(img, function(oImg) { 
        oImg.set({width: oImg.width, 
           height: oImg.height, 
           left: 100, 
           top: 100, 
           originX: 'center', 
           originY: 'center', 
           selectable: false, 
           perPixelTargetFind: true, 
           transparentCorners: false}); 

        canvas.setActiveObject(oImg); 
        objImg = canvas.getActiveObject(); 
        objImg.clipTo = function(ctx) { 
       console.log("ctx") 
       console.log(ctx); 
       ctx.rect(
          2, 
          2, 
          430, 
          430 
         ); 
      } 
        canvas.add(oImg); 
});