這裡以quick_cocos2dx_3.3為例說明一下cocos2dx的Label描邊問題以及個人想到的一個不是很完美的解決辦法。

先上一段程式：

    local label = display.newTTFLabel({ text="你好",
    font="arial",--系統自帶的字型庫
    size=120,
    color=cc.c3b(255,0,0), --紅色顏色
    align=cc.TEXT_ALIGNMENT_CENTER, --水平對齊方式
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直對齊方式
    })
    label:setAnchorPoint(cc.p(0,0)) --設定錨點
    label:setPosition(200+2,200+2) --設定擺放位置
    label:addTo(self) --新增到顯示的場景中

執行結果如下圖所示：

好的，接著給這個Label的文字進行描邊。在上面那段程式的基礎上進行修改，程式如下：

 local label = display.newTTFLabel({ text="你好",
    font="arial",--系統自帶的字型庫
    size=120,
    color=cc.c3b(255,0,0), --紅色顏色
    align=cc.TEXT_ALIGNMENT_CENTER, --水平對齊方式
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直對齊方式
    })
    label:setAnchorPoint(cc.p(0,0)) --設定錨點

    label:enableOutline(cc.c4b(255,255,255,255), 2) --描邊顏色為白色，描邊寬度為2pix。
    label:addTo(self) --新增到顯示的場景中

   執行程式效果如下：

看不到描邊效果，並且說只支援IOS或者Android移動端。其實就是系統自帶的字型檔在PC端不支援描邊顯示效果。那好辦啊，就換一個字型檔。網上下一個ttf格式的字型檔就行了。修改程式如下：

 local label = display.newTTFLabel({ text="你好",
    font="arial",--系統自帶的字型庫
    size=120,
    color=cc.c3b(255,0,0), --紅色顏色
    align=cc.TEXT_ALIGNMENT_CENTER, --水平對齊方式
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直對齊方式
    })
    label:setAnchorPoint(cc.p(0,0)) --設定錨點
    label:setPosition(200+2,200+2) --設定擺放位置

    label:enableOutline(cc.c4b(255,255,255,255), 2) --描邊顏色為白色，描邊寬度為2pix。
    label:addTo(self) --新增到顯示的場景中

怎麼感覺沒看到描邊？

其實已經加上了描邊了。我們改變一下思路。設定字型顏色為白色，描邊顏色為紅色，看一下會有什麼效果：

local label = display.newTTFLabel({ text="你好",
    font="arial",--系統自帶的字型庫
    size=120,
    color=cc.c3b(255,255,255), --白色顏色
    align=cc.TEXT_ALIGNMENT_CENTER, --水平對齊方式
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直對齊方式
    })
    label:setAnchorPoint(cc.p(0,0)) --設定錨點
    label:setPosition(200+2,200+2) --設定擺放位置

    label:enableOutline(cc.c4b(255,0,0,255), 2) --描邊顏色為紅色，描邊寬度為2pix。
    label:addTo(self) --新增到顯示的場景中

可以看到在白色字型的周圍能看到紅色的描邊。

其實我們可以把描邊這個過程看成是一個光學的過程。在白色的字周圍加上紅色的描邊可以看成是紅光通過白色的玻璃出射後顯示的紅光。

所以，我們一開始想要在紅色的字周圍加上白色的描邊就看不到，因為紅色的玻璃只能透過紅光，白光經過紅色的玻璃後只剩下紅光，不可能產生白色的描邊。

讀者也可以嘗試著在紅色的字周圍加上綠色或者藍色的描邊，效果就是看不到綠色或者藍色的描邊。

但是在白色的字周圍加上任何顏色的描邊都是可以看到的。基本原理就是上面所說的。

好了，那專案中確實有需要在紅色的字周圍加上白色的描邊怎麼辦呢？這裡介紹一個可能不是很完美的解決辦法。那就是在這個紅字Label的下面放四個白色字型相通尺寸的Label。這四個Label都以紅字Label為中心往四周偏移一點點距離。

程式如下：（Label2，Label3,Label4,Label5以Label1為中心向四周偏移2pix）

    local label2 = display.newTTFLabel({ text="你好",
    font="fonts/hua_kang_yuan.ttf",
    size=120,
    color=cc.c3b(255,255,255),
    align=cc.TEXT_ALIGNMENT_CENTER,
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,
     })
    label2:setAnchorPoint(cc.p(0,0))
    label2:setPosition(200-2,200-2)
    label2:addTo(self)


    local label3 = display.newTTFLabel({ text="你好",
    font="fonts/hua_kang_yuan.ttf",
    size=120,
    color=cc.c3b(255,255,255),
    align=cc.TEXT_ALIGNMENT_CENTER,
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,
    })
    label3:setAnchorPoint(cc.p(0,0))
    label3:setPosition(200+2,200+2)
    label3:addTo(self)


    local label4 = display.newTTFLabel({ text="你好",
    font="fonts/hua_kang_yuan.ttf",
    size=120,
    color=cc.c3b(255,255,255),
    align=cc.TEXT_ALIGNMENT_CENTER,
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,
    })
    label4:setAnchorPoint(cc.p(0,0))
    label4:setPosition(200-2,200+2)
    label4:addTo(self)


    local label5 = display.newTTFLabel({ text="你好",
    font="fonts/hua_kang_yuan.ttf",
    size=120,
    color=cc.c3b(255,255,255),
    align=cc.TEXT_ALIGNMENT_CENTER,
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,
    })
    label5:setAnchorPoint(cc.p(0,0))
    label5:setPosition(200+2,200-2)
    label5:addTo(self)


    local label1 = display.newTTFLabel({ text="你好",
    font="fonts/hua_kang_yuan.ttf",
    size=120,
    color=cc.c3b(255,0,0),
    align=cc.TEXT_ALIGNMENT_CENTER,
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,
    })
    label1:setAnchorPoint(cc.p(0,0))
    label1:setPosition(200,200)
    --label1:enableOutline(cc.c4b(255,0,0,255), 2)
    label1:addTo(self)

效果如圖：

附：local label = display.newTTFLabel({ text="你好",
    font="fonts/hua_kang_yuan.ttf",
    size=120,
   -- color=cc.c3b(255,0,0), --紅色顏色
    align=cc.TEXT_ALIGNMENT_CENTER, --水平對齊方式
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直對齊方式
    })
    label:setTextColor(cc.c4b(255,0,0,255))
    label:setAnchorPoint(cc.p(0,0)) --設定錨點
    label:setPosition(200+2,200+2) --設定擺放位置
    label:enableOutline(cc.c4b(255,255,255,255), 4) --描邊顏色為白色，描邊寬度為2pix。
    label:addTo(self) --新增到顯示的場景中

今天剛發現，原來這麼寫就好了。重要的是設定TextColor，而不是color。