Fabric.js で画像フィルターをアニメーション化することは可能ですか? 「ピクセル化」フィルタなど。
質問する
822 次
2 に答える
1
デモと同じ方法で解決しました。残念ながら、フィルターをアニメーション化することはできません。処理に時間がかかりすぎます。
これが私のコードです:
image = ... //Image, where the filter should be applied
var filter = new fabric.Image.filters.RemoveWhite({
threshold: 0,
distance: 140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));
animate(image,1, 400); //Start the Animation
function animate(image,value, stop){
value += ((stop-value)*0.02); //Change the threshold-value
if (image.filters[0]) {
image.filters[0]['threshold'] = value;
console.log(value);
image.applyFilters(canvas.renderAll.bind(canvas)); //Start creating the new image
if(value<stop-100){
setTimeout(function(){act(image,value,stop);},1);
}
}
}
コードが最も効率的なものではないことはわかっていますが、機能します。また、フィルターのアニメーション化に時間がかかりすぎることがわかります。
(1920x1080px の画像でテストしましたが、小さい画像でも使用できるかもしれません)
于 2013-11-18T16:42:36.193 に答える