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

【问题标题】：How to use 'clipto' func in fabric.js 1.7 above如何在上面的fabric.js 1.7中使用'clipto' func
【发布时间】：2017-08-05 00:02:38
【问题描述】：

我使用 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/

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

提前谢谢你。

【问题讨论】：

请查看此帖stackoverflow.com/a/42076133/7132835
感谢您的善意建议！我认为还有另一个问题。当我在 'clipTo' 函数中使用 'ctx.rect()' 而不是 'path.render(ctx)' 时，它运行良好。见，link。但是我在clipTo func中使用'path.render（ctx）'，它只绘制黑色区域，如link。

标签： javascript fabricjs

【解决方案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();
});

【讨论】：