createjs图片平滑处理办法

  • 内容
  • 评论
  • 相关

相信很多同学在写createjs的时候遇到过图片旋转后出现锯齿的bug,但是查createjs的api又没有平滑的api,animateCC的平滑又只对AS3项目起作用。其实平滑功能是很简单的,只要你知道他的原理。

我这里先放一张AS3的原理图:

QQ图片20181031135905.png

看不懂?其实很简单,就是上了一层高斯模糊。知道是高斯模糊就简单了我这里贴出代码:

var SmoothingUtil = SmoothingUtil || {
    filters:[new createjs.BlurFilter(2, 2, 1)],
    handler:function (display,rect){
        display.filters = SmoothingUtil.filters;
        display.cache(-2,-2,rect.width+4,rect.height+4);
    }
}

看代码简单吧,然后SmoothingUtil.handler() 调用一下就可以了,传输display是显示对象,rect是display的cache宽高矩形。

最后再讲一下,因为平滑的原理是高斯模糊,所以会造成显示对象一定程度的模糊,所以如果需要高清显示对象的,就需要在模糊和锯齿两者中取舍了。

在flash中平滑的原理也是高斯模糊,大家可以在animateCC的as3项目中试一下。

其实还有一种平滑的办法,就是使用3D坐标进行旋转,但显然这种方法很少引擎能支持。

1542183776360437.jpg

评论

1条评论

发表评论

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