stagegl出现锯齿的解决办法

  • 内容
  • 评论
  • 相关

前几天本人使用stagegl发现了这个bug,我很好奇为什么之前的项目不会,研究之后发现锯齿归根揭底还是缩放的问题。有点类似当年flash,只不过flash有提供平滑,而stagegl的平滑没啥用。

我们先来看一个demo:

http://www.ajexoop.com/test/stageglResize/demo1.html

大家伸缩浏览器试试,是不是有明显的锯齿?什么?看不到?那看看下面这个例子对比一下

http://www.ajexoop.com/test/stageglResize/demo2.html

把他们放到同样大小,发现锯齿了么?(大家可以根据上面demo2的代码解决锯齿)

那我的demo2是怎么解决的锯齿呢?那就是改变自适应方式

我博客里发过的自适应总共是2种:

老自适应:

关于自适应的那点事

再讲讲自适应-移动端自适应

新自适应:

面向canvas,更加简单的自适应方式

由于新的自适应,移动数值是可以和dom相符合的,所以本人出了新自适应后,一直用的是新自适应。但是由于新自适应是由canvas内部元素缩放来自适应的,所以stagegl使用这个自适应就会产生锯齿。也就是stagegl需要使用老版的自适应。这也解释了为什么之前的stagegl项目没有出现锯齿,之前二十二禁区的项目,本人新老自适应都没用,直接用的mate标签自适应。

问题到这就解决了么?没有!就算使用老式自适应,也只能保证自适应的时候不出现锯齿,有很多缩放的动画还是会出现锯齿的,怎么办?这个本人也想了很多办法,也只能说改善,首先stagegl自带的平滑方式,本人试过是没啥用的,当然也不排除是我用的方式不对, stage = new createjs.StageGL(canvas,{"antialias":true});。移动端的锯齿不太容易被发现,大致也是因为多倍像素的原因吧,所以移动端可以暂时忽略这个问题,那PC端怎么办呢?可以少用缩放动画,或者快速的播放缩放动画来达到用户忽略锯齿的目的。或者自己写一个平滑,平滑说到底就是一个数值较低高斯模糊,但是滤镜用了会增加性能消耗,所以可能还不如不用stagegl。

关于锯齿的问题,也欢迎大家再下面的留言区讨论,大家一起分享下缓解锯齿的方法。

评论

0条评论

发表评论

电子邮件地址不会被公开。