2

jQuery Mobile フレームワークを使用してスマートフォンに医用画像を表示するモバイル アプリを作成しています。単一のキャンバスに表示したい複数の画像 (時には 100 以上) があり、アニメーションを作成するシリーズの一部であるため、スライダーを使用して画像をできるだけスムーズに移動したいと考えています。

現時点では、以下のコードでここまで到達しましたが、画像をスライドするとスムーズに移動できず、遅延が発生します。画像を表示するには、特定のインデックスに移動する必要があります。値をスライドしても表示されないため、次のインデックスに移動します。

私の他のオプションは、すべての画像を img タグに配置し、配列インデックスをスライドさせて表示/非表示にすることです。しかし、ある時点で画像をズーム/フィルタリングしたいので、キャンバスを使用したいと思います。

アイデア、プラグイン/ライブラリは非常に役立ちます。

var a=document.getElementById("myCanvas");
var a_ctx=a.getContext("2d");

var images = [];

$("#slider").attr("max", instUrlArr.length).slider("refresh");

//on page init it will preload all images from array
for(var i = 0;i<instUrlArr.length;i++){
    images[i] = new Image();
    images[i].src = instUrlArr[i];
}
$('#slider').slider({
        stop: function(event,ui){
        var sliderVal = $('#slider').val();
        var img = images[sliderVal];
        console.log('source ' + img.src);

        a_ctx.drawImage(img,400,300);
    }
});
4

1 に答える 1

0

スライダーの開始/停止イベントを使用するのではなく、変更イベントを使用してそれを理解することができました。画像をスライドすると、画像から画像へとスムーズに描画されます。

$('#slider').change(function(){
    var sliderVal = $(this).val();
    var img = images[sliderVal];
    console.log('source ' + img.src);
    a_ctx.drawImage(img,300,300); 
});
于 2013-03-16T12:00:15.817 に答える