轉載： http://blog.csdn.net/u011281572/article/details/44999609

圖片描邊需求如下：

1. 可指定描邊寬度2. 可指定描邊顏色3. 可用於字型

圖片描邊我所知道的方式有以下幾種：

1. Cocos2d-x 3.x中，字型用FreeType庫，字型描邊可以用FreeType自帶的描邊功能，實際效果沒測過，但只能用於字型。

2. 用RenderTexture，方法大概是把原圖做一圈的偏移，渲染到同一張紋理上，他們相隔中心點的距離都是r，最後再把自己渲染到中間，核心程式碼大概這樣：

1. rt->begin();  
2. for(int i = 0; i < 360; i += 15)  
3. {  
4.    float rad = CC_DEGREES_TO_RADIANS(i);  
5.    m_label->setPosition(ccp(  
6.    textureSize.width * 0.5f + sin(rad) * r,  
7.    textureSize.height * 0.5f + cos(rad) * r));  
8.    m_label->visit();  
9. }  
10. m_label->setColor(col);  
11. m_label->setBlendFunc(originalBlend);  
12. m_label->setPosition(ccp(textureSize.width * 0.5f, textureSize.height * 0.5f));  
13. m_label->visit();  
14. rt->end();  

這種方法可以作為一個比較好的解決方案，但是我認為這種方式在生成描邊圖片時，需要繪製多個圖片，效率不是很好。

以下我分享一種我認為比較好的描邊演算法：

在片段著色器裡面，對於每個畫素：1. 如果它是不透明的畫素，則不管，維持原本顏色；2. 如果透明，是360度判斷它四周有沒有不透明的畫素，如果有，則把它設成描邊顏色，否則保持透明。

我為程式碼加了比較詳細的註釋，希望大家能理解

stroke.fsh：描邊片段著色器

1. varying vec4 v_fragmentColor; // vertex shader傳入，setColor設定的顏色
2. varying vec2 v_texCoord; // 紋理座標
3. uniform float outlineSize; // 描邊寬度，以畫素為單位
4. uniform vec3 outlineColor; // 描邊顏色
5. uniform vec2 textureSize; // 紋理大小（寬和高），為了計算周圍各點的紋理座標，必須傳入它，因為紋理座標範圍是0~1
6. uniform vec3 foregroundColor; // 主要用於字型，可傳可不傳，不傳預設為白色
7. // 判斷在這個角度上距離為outlineSize那一點是不是透明
8. int getIsStrokeWithAngel(float angel)  
9. {  
10.     int stroke = 0;  
11.     float rad = angel * 0.01745329252; // 這個浮點數是 pi / 180，角度轉弧度
12.     float a = texture2D(CC_Texture0, vec2(v_texCoord.x + outlineSize * cos(rad) / textureSize.x, v_texCoord.y + outlineSize * sin(rad) / textureSize.y)).a; // 這句比較難懂，outlineSize * cos(rad)可以理解為在x軸上投影，除以textureSize.x是因為texture2D接收的是一個0~1的紋理座標，而不是畫素座標
13.     if (a >= 0.5)// 我把alpha值大於0.5都視為不透明，小於0.5都視為透明
14.     {  
15.         stroke = 1;  
16.     }  
17.     return stroke;  
18. }  
19. void main()  
20. {  
21.     vec4 myC = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y)); // 正在處理的這個畫素點的顏色
22.     myC.rgb *= foregroundColor;  
23.     if (myC.a >= 0.5) // 不透明，不管，直接返回
24.     {  
25.         gl_FragColor = v_fragmentColor * myC;  
26.         return;  
27.     }  
28.     // 這裡肯定有朋友會問，一個for迴圈就搞定啦，怎麼這麼麻煩！其實我一開始也是用for的，但後來在安卓某些機型（如小米4）會直接崩潰，查詢資料發現OpenGL es並不是很支援迴圈，while和for都不要用
29.     int strokeCount = 0;  
30.     strokeCount += getIsStrokeWithAngel(0.0);  
31.     strokeCount += getIsStrokeWithAngel(30.0);  
32.     strokeCount += getIsStrokeWithAngel(60.0);  
33.     strokeCount += getIsStrokeWithAngel(90.0);  
34.     strokeCount += getIsStrokeWithAngel(120.0);  
35.     strokeCount += getIsStrokeWithAngel(150.0);  
36.     strokeCount += getIsStrokeWithAngel(180.0);  
37.     strokeCount += getIsStrokeWithAngel(210.0);  
38.     strokeCount += getIsStrokeWithAngel(240.0);  
39.     strokeCount += getIsStrokeWithAngel(270.0);  
40.     strokeCount += getIsStrokeWithAngel(300.0);  
41.     strokeCount += getIsStrokeWithAngel(330.0);  
42.     if (strokeCount > 0) // 四周圍至少有一個點是不透明的，這個點要設成描邊顏色
43.     {  
44.         myC.rgb = outlineColor;  
45.         myC.a = 1.0;  
46.     }  
47.     gl_FragColor = v_fragmentColor * myC;  
48. }  

我的utilShader.cpp：

1. constchar* shaderNameStroke = "ShjyShader_Stroke";  
2. namespace utilShader  
3. {  
4. // 傳入描邊寬度（畫素為單位），描邊顏色，圖片大小，獲得GLProgramState
5.     cocos2d::GLProgramState* getStrokeProgramState( float outlineSize, cocos2d::Color3B outlineColor, cocos2d::Size textureSize, cocos2d::Color3B foregroundColor/* = cocos2d::Color3B::WHITE*/ )  
6.     {  
7.         auto glprogram = GLProgramCache::getInstance()->getGLProgram(shaderNameStroke);  
8.         if (!glprogram)  
9.         {  
10.             std::string fragmentSource = FileUtils::getInstance()->getStringFromFile(FileUtils::getInstance()->fullPathForFilename("shaders/stroke.fsh"));  
11.             glprogram = GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, fragmentSource.c_str());  
12.             GLProgramCache::getInstance()->addGLProgram(glprogram, shaderNameStroke);  
13.         }  
14.         auto glprogramState = GLProgramState::create(glprogram);  
15.         glprogramState->setUniformFloat("outlineSize", outlineSize);  
16.         glprogramState->setUniformVec3("outlineColor", Vec3(outlineColor.r / 255.0f, outlineColor.g / 255.0f, outlineColor.b / 255.0f));  
17.         glprogramState->setUniformVec2("textureSize", Vec2(textureSize.width, textureSize.height));  
18.         glprogramState->setUniformVec3("foregroundColor", Vec3(foregroundColor.r / 255.0f, foregroundColor.g / 255.0f, foregroundColor.b / 255.0f));  
19.         return glprogramState;  
20.     }  
21. }  

1. Sprite* spr = Sprite::create("elephant1_Diffuse.png");  
2. spr->setPosition(200, 200);  
3. spr->setGLProgramState(utilShader::getStrokeProgramState(5, Color3B::GREEN, spr->getContentSize()));  
4. this->addChild(spr, 1);  

效果：

效果還算是比較好的，經測試，此演算法在安卓多個機型上也表現良好。

這樣一套完整的描邊演算法就完成了，如果描述有不當之處，或有更優方法，歡迎吐槽。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

謝謝complex_ok的吐槽，應該預先計算好sin和cos值，無需每次計算。優化後的 stroke.fsh 如下：

1. varying vec4 v_fragmentColor;  
2. varying vec2 v_texCoord;  
3. uniform float outlineSize;  
4. uniform vec3 outlineColor;  
5. uniform vec2 textureSize;  
6. uniform vec3 foregroundColor;  
7. constfloat cosArray[12] = {1, 0.866, 0.5, 0, -0.5, -0.866, -0.1, -0.866, -0.5, 0, 0.5, 0.866};  
8. constfloat sinArray[12] = {0, 0.5, 0.866, 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5};  
9. int getIsStrokeWithAngelIndex(int index)  
10. {  
11.     int stroke = 0;  
12.     float a = texture2D(CC_Texture0, vec2(v_texCoord.x + outlineSize * cosArray[index] / textureSize.x, v_texCoord.y + outlineSize * sinArray[index] / textureSize.y)).a;  
13.     if (a >= 0.5)  
14.     {  
15.         stroke = 1;  
16.     }  
17.     return stroke;  
18. }  
19. void main()  
20. {  
21.     vec4 myC = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));  
22.     myC.rgb *= foregroundColor;  
23.     if (myC.a >= 0.5)  
24.     {  
25.         gl_FragColor = v_fragmentColor * myC;  
26.         return;  
27.     }  
28.     int strokeCount = 0;  
29.     strokeCount += getIsStrokeWithAngelIndex(0);  
30.     strokeCount += getIsStrokeWithAngelIndex(1);  
31.     strokeCount += getIsStrokeWithAngelIndex(2);  
32.     strokeCount += getIsStrokeWithAngelIndex(3);  
33.     strokeCount += getIsStrokeWithAngelIndex(4);  
34.     strokeCount += getIsStrokeWithAngelIndex(5);  
35.     strokeCount += getIsStrokeWithAngelIndex(6);  
36.     strokeCount += getIsStrokeWithAngelIndex(7);  
37.     strokeCount += getIsStrokeWithAngelIndex(8);  
38.     strokeCount += getIsStrokeWithAngelIndex(9);  
39.     strokeCount += getIsStrokeWithAngelIndex(10);  
40.     strokeCount += getIsStrokeWithAngelIndex(11);  
41.     bool stroke = false;  
42.     if (strokeCount > 0)  
43.     {  
44.         stroke = true;  
45.     }  
46.     if (stroke)  
47.     {  
48.         myC.rgb = outlineColor;  
49.         myC.a = 1.0;  
50.     }  
51.     gl_FragColor = v_fragmentColor * myC;  
52. }