Question

我使用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);
    }
});

Answer 1

我设法通过使用更改事件而不是使用滑块启动/停止事件来弄明白。当我滑过图像时，它们可以顺畅地从一个图像到另一个图像。

$('#slider').change(function(){
    var sliderVal = $(this).val();
    var img = images[sliderVal];
    console.log('source ' + img.src);
    a_ctx.drawImage(img,300,300); 
});

jQuery Mobile Sliders图像序列

1 个答案: