Question

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

Answer 1

好的，多亏了碰撞，我会在这里添加我的解决方案。真正发生的事情是我们试图强制重画整个窗口。以下是诀窍：

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);   
}

show hide组合将强制重绘受影响的区域。请注意，需要显示0。使用66ms延迟是因为在应用样式后强制重新绘制（在这种情况下，css调整大小）将绕过浏览器中的重新计算样式功能。 66ms是aprox。 15fps所以它仍然应该在任何以30fps运行的屏幕上瞬间发生（如果一切顺利，将需要两次屏幕刷新）。在60fps的显示屏上可以看到从像素化到非像素化的小瑕疵，但是有多少人仍然密切关注它？

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

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

享受！

〜techdude

调整大小（缩小）图像锯齿状，重绘时平滑（不重新加载）

1 个答案: