在iPad和iPhone上缩放时背景图像模糊

Question

我正在创建一个网络应用程序,我允许用户缩放某些100x100px背景图像.

当他们双击图像时,我将图像缩放到其大小的两倍(-webkit-transform:scale(2)).

转换完成后,我将100x100px图像与更大的200x200px图像交换.出于某种原因,图像非常模糊.

所以我尝试使用img标签而不是div标签来显示我的图像.这里的图像根本不模糊.为什么是这样？

我需要使用背景图像来规避iPad和iPhone上的内存限制(如果我使用img标签,我会打到内存墙).

谁能帮我？非常感谢.

Answer 1

我声称三件事：

1. 缩放 div 会拉伸像素，但不会增加更多像素。
2. 背景大小：包含；确保您的背景图像完全显示
3. div 永远不会改变大小。

1. 正如你在这里看到的， div 仍然是 200x200 像素
2. 即使图像是 400x400 像素，图像也会调整为 200x200 像素。看这里
3. 几乎在1中证明了。字体仍然清晰，但javascript认为宽度和高度是200x200像素。

好吧，你的修复：

有几种方法。

您可以更改宽度和高度而不是缩放。这并不漂亮，或者至少你很幸运，如果这个动画不缺少它的方式抛出（在 iOS 上）。

其他可能是缩放和检测webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() {
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
});

记得解除webkitTransitionEnd事件的绑定。否则它会加倍函数调用。

但发生了什么，动画又回来了。因此，我们必须将转换保留在一个类中，以便我们可以在需要时添加和删除它：

div {
   -moz-transition-duration: 0ms;
}
div.transition {
    -moz-transition-duration: 200ms;
}

然后当我们必须制作动画时添加类：

setTimeout(function() {
    $('div').addClass("transition");
    $('div').css({
        backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
        webkitTransform: 'scale( 2 )',
        mozTransform: 'scale( 2 )'
    });
}, 3000);

并在webkitTransitionEnd中再次删除它

$(this).removeClass('transition');
$(this).css({
   "-webkit-transform": "scale(1)",
   "width": "400px",
   "height": "400px"

}); $(this).unbind("webkitTransitionEnd");

什么？？！它没有及时添加/删除班级？！发生什么事。

有时浏览器需要一些时间来确保添加该类。因此，您需要将 css 的设置包装在 setTimeout(function(){...}, 0); 中

setTimeout(function() {
    $('div').addClass("transition");
    setTimeout(function(){
        $('div').css({
            backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
            webkitTransform: 'scale( 2 )',
            mozTransform: 'scale( 2 )'
        });
    }, 0);
}, 3000);

另外，当我们删除该类时：

$(this).removeClass('transition');
setTimeout(function(){
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
}, 0);

这么长时间以来，现在的问题是它正在按比例放大并变得模糊，而在缩放之后它变得超级锐利。

我不知道我们能做些什么，但希望它能对你有所帮助！

安德烈亚斯