fabric.js 1.7の 'clipto' funcの使い方

Question

私はfabric.jsを使用します。 私は 'clipto'関数を使って画像をクロップしますが、 ですが、上記の1.7のfabric.jsでは機能しません。

バージョン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' 関数を使用することができますか？

ありがとうございます。

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(); 
});