7

Fabric.js で画像フィルターをアニメーション化することは可能ですか? 「ピクセル化」フィルタなど。

4

2 に答える 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 に答える