3

我使用 css 缩小图像，但它的边缘是锯齿状的。但是，如果我快速切换到 chrome 中的另一个选项卡然后返回，它会正确绘制。我认为这是因为重绘期间发生的一些事情。有没有办法使用jquery强制重绘？我尝试添加类、元素和更改其他属性。

4

1 回答 1

3

好的，多亏了这个问题，我将在这里添加我的解决方案。真正发生的是我们正试图强制重新绘制整个窗口。以下是诀窍：

function reDraw(){
    //hack to redraw the elements on the page to avoid choppy look of resized items
    //prevent reDraw from firing too early
    setTimeout(function(){$('body').hide().show(0)},66);   
}

显示隐藏组合将强制重新绘制受影响的区域。请注意，显示中的 0 是必需的。使用 66 毫秒延迟是因为在应用样式后立即强制重新绘制（在本例中为 css 调整大小）将绕过浏览器中的重新计算样式功能。大约 66 毫秒。15fps，所以它仍然应该在任何以 30fps 运行的屏幕上立即发生（如果一切顺利，它将需要两次屏幕刷新）。在 60fps 的显示器上可以看到从像素化到非像素化的小光点，但有多少人会密切关注呢？

无论如何，这是我们的解决方案。对我们来说，它被用在一个与视频游戏非常相似的网站上，就动画循环和其他东西而言。因为屏幕已经刷新了很多，我们发现我们只需要在调整PNG大小后调用reDraw函数，但您的要求可能会有所不同。

请注意，此功能可能会占用大量资源，并且我观察到许多浏览器在此之后需要收集垃圾，因此您可能需要评估实时方面的必要性。谨慎使用。

享受！

〜技术老兄

于 2013-08-30T18:19:34.013 回答