解决 webgl graphics 绘制 mask 遮罩 蒙版 锯齿 问题

如题
 
设置 mask 普通用法如下
let icon1:Laya.Image = new Laya.Image("皮肤资源地址..........."); // 用户头像地址
let mask1:Laya.Sprite = new Laya.Sprite();
mask1.graphics.drawCircle(72/2, 72/2, 72/2, "#00ff00");
icon1.mask = mask1;
上面这种是很普遍的用法,但是这样用会有锯齿。
 
下面解决锯齿问题
准备一张用 photoshop 画出来的圆形 png 如下图

masks.png

 
第一步都一样 首先加载这个圆形蒙版遮罩图片资源
然后代码如下
let icon2:Laya.Image = new Laya.Image("皮肤资源地址..........."); // 用户头像地址
icon2.width = 100;
icon2.height = 100;
let maskTexture:Laya.Texture = Laya.loader.getRes("圆形蒙版遮罩图片资源地址......................"); // 圆形蒙版遮罩图片资源地址
let mask2:Laya.Sprite = new Laya.Sprite();
mask2.graphics.drawImage(maskTexture, 0, 0, icon2.width, icon2.height);
icon2.mask = mask2;
这样锯齿就没了
已邀请:

Laya_Fred

赞同来自:

感谢您提供的技术分享!

要回复问题请先

商务合作
商务合作