javascript - 如何在上面的fabric.js 1.7中使用 'clipto' func

Question

我使用fabric.js。我使用“clipto”功能来裁剪图像，但在fabric.js 1.7以上版本中不起作用。

当我包含 1.6.7 或更低版本时，它运行良好。

https://jsfiddle.net/uemon/nqg2q2qs/

var canvas = new fabric.Canvas('c',{ 
backgroundColor: '#ffffff', 
});

var imgURL = 'http://fabricjs.com/lib/pug.jpg';
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z'); 

fabric.Image.fromURL(imgURL, function(image) {

   canvas.add(image);
   image.set({
            clipTo: function(ctx) {
                path.set({ 
                        left: -100, 
                        top: -100 
                    });
                path.render(ctx);
            }
   });
   canvas.renderAll();
});  

但是当我包含1.7.0或更高版本的fabric.js时，它不起作用。

https://jsfiddle.net/uemon/affumnxh/1/

如何在1.7或以上版本中使用'clipto'功能？

提前谢谢您。

Answer 1

我可以通过使用“objectCaching: false”解决该问题。

参见https://github.com/kangax/fabric.js/issues/3454

最终代码如下。

var canvas = new fabric.Canvas('c',{ 
  backgroundColor: '#ffffff', 
});

var imgURL = 'http://fabricjs.com/lib/pug.jpg';
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z'); 


fabric.Image.fromURL(imgURL, function(image) {

   canvas.add(image);
   image.set({
            clipTo: function(ctx) {
                path.set({ 
                        left: -100, 
                        top: -100,
                        objectCaching: false
                    });
            path.render(ctx);
        }
   });
   canvas.renderAll();
});