http://gad.qq.com/article/detail/7172155
NGUI的UILabel中实现字体的描边是通过以方形的方式对字体网格顶点偏移一定位置后作为其描边网格。以这种方式描边在边角处会生硬,描边不均匀问题,特别是在比较大的字体描边时偏移越大这种生硬,不均匀程度越明显。处理这种描边一可以通过改进shader的方式来做调整,这里我介绍林一种新的方式:以圆形方式对字体网格顶点偏移一定位置后作为其描边网格。
具体修改是将UILabel 中的OnFill方法中:
// Apply an effect if one was requested
if (effectStyle != Effect.None)
pos.y = mEffectDistance.y;
ApplyShadow(verts, uvs, cols, offset, end, pos.x, -pos.y);
if (effectStyle == Effect.Outline)
{
ApplyShadow(verts, uvs, cols, offset, end, -pos.x, pos.y);
offset = end;
end = verts.size;
ApplyShadow(verts, uvs, cols, offset, end, pos.x, pos.y);
offset = end;
end = verts.size;
ApplyShadow(verts, uvs, cols, offset, end, -pos.x, -pos.y);
}
}
{
int end = verts.size;
pos.x = mEffectDistance.x;pos.y = mEffectDistance.y;
ApplyShadow(verts, uvs, cols, offset, end, pos.x, -pos.y);
if (effectStyle == Effect.Outline)
{
offset = end;
end = verts.size;ApplyShadow(verts, uvs, cols, offset, end, -pos.x, pos.y);
offset = end;
end = verts.size;
ApplyShadow(verts, uvs, cols, offset, end, pos.x, pos.y);
offset = end;
end = verts.size;
ApplyShadow(verts, uvs, cols, offset, end, -pos.x, -pos.y);
}
}
替换为如下代码:
// Apply an effect if one was requested
if (effectStyle != Effect.None)
if (effectStyle != Effect.None)
{
int end = verts.size;
pos.x = mEffectDistance.x;pos.y = mEffectDistance.y;
if (effectStyle != Effect.Outline)
ApplyShadow (verts, uvs, cols, offset, end, pos.x, -pos.y);
else {
float arcLength = 1.4142f ;
float dr = 1f;
float r = pos.x;
float radian = arcLength / r ;
float tempR = 0;
while(tempR < r){
int count = (int)Math.Floor(Math.PI * 2 /radian);
float i = 0;
while (i < count) {
float angle = radian * i;
float x = tempR * (float)Math.Cos ((double)angle);
float y = tempR * (float)Math.Sin ((double)angle);
ApplyShadow (verts, uvs, cols, offset, end, x, y);
offset = end;
end = verts.size;
++i;
}
tempR += dr;
}
float r = pos.x;
float radian = arcLength / r ;
float tempR = 0;
while(tempR < r){
int count = (int)Math.Floor(Math.PI * 2 /radian);
float i = 0;
while (i < count) {
float angle = radian * i;
float x = tempR * (float)Math.Cos ((double)angle);
float y = tempR * (float)Math.Sin ((double)angle);
ApplyShadow (verts, uvs, cols, offset, end, x, y);
offset = end;
end = verts.size;
++i;
}
tempR += dr;
}
}
}
}
最后的效果对比如下:
![](http://gameweb-img.qq.com/gad/20161015/phpq6wlPa.1476475065.png)
图一(调整后的效果)
![](http://gameweb-img.qq.com/gad/20161015/php9EuVgE.1476475078.png)
图二(调整前的效果)
圆形拓展网格对比方形扩展网格缺点就是圆形拓展方式获得新网格会比矩形多,具体增加的量与描边偏移量有一定关系,同时目前暂时不支持x和y的不同偏移,只支持x与y的统一偏移量。