你说的对,我目前看懂了一些,这个描边是使用stroke方式,路径填充方式描边的,都是在windows和android,ios原生平台调用了画布方式设置的,描边宽度和color.r是有关系的。目前觉得在平台android,ios画笔画了字体纹理并且使用了stroke方式制定了宽度描边。 vec4 color = u_textColor * fontAlpha + u_effectColor * (1.0 - fontAlpha); 这个是关键,fontAlpha 应该是获取了真实字体的alpha,但是stroke描边alpha和字体的 sample.r应该是有关系的,用它来判断是不是需要填充颜色而已,fontAlpha 是1的时候没有描边颜色,是0的时候就认为是描边颜色了!不知道为什么要使用 sample.r来判断是不是stroke处理过的!
下面是修改代码对应的效果
1:根据sample.r以及fontalpha 判断填充区域,并且进行了描边颜色和字体颜色的区分
void main()
{
vec4 sample = texture2D(CC_Texture0, v_texCoord);
float fontAlpha = sample.a;
float outlineAlpha = sample.r;
if ((fontAlpha + outlineAlpha) > 0.0){
vec4 color = u_textColor * fontAlpha + u_effectColor * (1.0 - fontAlpha);
gl_FragColor = color;//v_fragmentColor * vec4( color.rgb,max(fontAlpha,outlineAlpha)*color.a);
}
else {
discard;
}
}
);
:2:根据alpha判断填充区域,直接获取采样颜色结果, 不知道为什么e字母会有黑点,这个时候没看到stoke痕迹,这个时候原生获取的bitmap纹理是白色的,但是stroke透明度为什么和sample.r有关系???---------------
void main()
{
vec4 sample = texture2D(CC_Texture0, v_texCoord);
float fontAlpha = sample.a;
float outlineAlpha = sample.r;
if ((fontAlpha + outlineAlpha) > 0.0){
vec4 color = u_textColor * fontAlpha + u_effectColor * (1.0 - fontAlpha);
gl_FragColor = sample;//v_fragmentColor * vec4( color.rgb,max(fontAlpha,outlineAlpha)*color.a);
}
else {
discard;
}
}
);
:3:原本的效果----------------------------------------------------------
void main()
{
vec4 sample = texture2D(CC_Texture0, v_texCoord);
float fontAlpha = sample.a;
float outlineAlpha = sample.r;
if ((fontAlpha + outlineAlpha) > 0.0){
vec4 color = u_textColor * fontAlpha + u_effectColor * (1.0 - fontAlpha);
gl_FragColor = v_fragmentColor * vec4( color.rgb,max(fontAlpha,outlineAlpha)*color.a);
}
else {
discard;
}
}
);
从效果上看 max(fontAlpha,outlineAlpha) 这个计算的作用是锯齿消失了,对比1效果就知道了