2017-11-05 8 views
0

スレッシュホールドフィルタに問題があります。これまでのコード:キャンバス - ThresholdFilterの後に要素が消える

var stage = new c.Stage("Canvas"); 
var canvas = document.getElementById('Canvas'); 
var currHeight = $('.canvasColumn').height(); 


canvas.width = 3335; 
canvas.height = 3335; 
$('#Canvas').css("height", currHeight + "px"); 
$('#Canvas').css("width", currHeight + "px"); 


$('#button').on("click",() => { 
    var imgfb = new Image(); 
    imgfb.src = "/public/img/testFB.png"; 

    var bmp = new c.Bitmap(imgfb); 
    bmp.set({x : 0, y: 0, name : "testFB"}); 
    stage.addChild(bmp); 
    stage.update(); 

    //layer is a function which sets onClickListeners for pressmove etc. 
    layer(bmp); 
}); 

$('#filt').on("click" ,() => { 
    var bmp = stage.getChildByName("testFB"); 
    bmp.cache(bmp.x, bmp.y, bmp.image.width, bmp.image.height); 
    bmp.filters = [new createjs.ThresholdFilter(0, 0, 0, 0xdf1318, true)]; 
    bmp.updateCache(); 
    stage.update(); 
}); 

高解像度のPNGのために、私はキャンバスの高さと幅のスタイルを縮小する必要があります。ビットマップがx = y = 0の位置にある限りフィルタを実行すると動作します。しかし、私はビットマップを移動するとすぐに画面(キャンバス)からのフィルタリングの後に消えます。私の間違いを指摘できますか?

この例で使用される画像はここで見つけることができます:

http://www.freepngimg.com/download/facebook/1-2-facebook-download-png.png


PS:私は設定した場合:

bmp.cache(0, 0, 10000, 7000); 

を、それも動作しますが、ひどく遅いです。

答えて

1

私は解決策を見つけた:

キャッシュの入力paramsはxとyは局所意味し、ベースBMPれます。したがって、両方を0に設定してください。

関連する問題