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 回答