stagegl出现锯齿的解决办法

  • 内容
  • 评论
  • 相关

2024年4月30日更新:这个方法虽然可以解除锯齿,但是会出现一层若隐若现的黑边,所以暂时弃用。

先前我也写过一篇解决stagegl锯齿方法的博文,但是解决的不够彻底,图片旋转缩放还是会有锯齿。其实stagegl和canvas是有自带解决锯齿的api的,就是antialias,但是测试的时候发现stagegl中的antialias参数无效,今天研究源码的时候把无效的原因找到了。

45AA0214-602F-45ab-BAC5-AB2719E2AF4F.png

5574D665-B643-4584-B8CA-BCC78C1EC935.png

他这里的isPOT因为false,所以导致了它走不到平滑的代码里,那他这个参数是干嘛的呢,看注释应该是用来保证数值是2的幂用,但是可能官方的算法有问题导致不管怎么样这个值都是false,所以我对这个代码进行了改进。

var canvas,stage,bitmap,bitmap2
canvas = document.getElementById("canvas");
stage = new createjs.StageGL(canvas,{"antialias":true});
stage.setTextureParams = function (gl, isPOT) {
    if (this._antialias) {
        //non POT linear works in some devices, but performance is NOT good, investigate
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    } else {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    }
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
};

// stage = new createjs.Stage(canvas);
bitmap = new createjs.Bitmap("back.png");
stage.addChild(bitmap);

bitmap2 = new createjs.Bitmap("back.png");
stage.addChild(bitmap2);
bitmap2.x = 800;
bitmap2.rotation = 45;

createjs.Ticker.framerate = 30;
createjs.Ticker.addEventListener("tick", stage);

大家可以看到,我重写了setTextureParams方法,使代码无需判断isPOT,这样就很简单的解决了问题。

demo:http://www.ajexoop.com/demo/stagegl-test/index.html

但是最后还是有个问题,createjs官方不会把一个没用的判断给放上去,也就是说取消了这个判断可能在某些地方会出现问题,这个本人是暂时没遇到,大家遇到了可以跟我联系。

评论

0条评论

发表评论

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