quick cocos2dx描边

对于学习 Cocos2d-x 的开发者而言，Quick Cocos2d-x 想必并不陌生。本文将详细介绍 Quick Cocos2d-x 中描边效果的创建与实现过程。

实现描边的函数

函数参数说明

以下是创建描边效果的函数 createStroke，其参数含义如下：

• node：欲描边的显示对象。
• strokeWidth：描边宽度。
• color：描边颜色。
• opacity：描边透明度。

函数代码实现

function createStroke(node, strokeWidth, color, opacity)
-- 获取节点纹理的尺寸，并计算包含描边后的尺寸
local w = node:getTexture():getContentSize().width + strokeWidth * 2
local h = node:getTexture():getContentSize().height + strokeWidth * 2
-- 创建一个渲染纹理对象
local rt = CCRenderTexture:create(w, h)

-- 记录节点的原始信息
-- 记录原始位置
local originX, originY = node:getPosition()
-- 记录原始颜色 RGB 信息
local originColorR = node:getColor().r
local originColorG = node:getColor().g
local originColorB = node:getColor().b
-- 记录原始透明度信息
local originOpacity = node:getOpacity()
-- 记录原始是否显示
local originVisibility = node:isVisible()
-- 记录原始混合模式
local originBlend = node:getBlendFunc()

-- 设置节点的颜色、透明度和可见性
node:setColor(color)
node:setOpacity(opacity)
node:setVisible(true)

-- 设置新的混合模式
local blendFuc = ccBlendFunc:new()
blendFuc.src = GL_SRC_ALPHA
blendFuc.dst = GL_ONE
-- blendFuc.dst = GL_ONE_MINUS_SRC_COLOR
node:setBlendFunc(blendFuc)

-- 考虑锚点的位置，计算相关偏移量
local bottomLeftX = node:getTexture():getContentSize().width * node:getAnchorPoint().x + strokeWidth
local bottomLeftY = node:getTexture():getContentSize().height * node:getAnchorPoint().y + strokeWidth
local positionOffsetX = node:getTexture():getContentSize().width * node:getAnchorPoint().x - node:getTexture():getContentSize().width / 2
local positionOffsetY = node:getTexture():getContentSize().height * node:getAnchorPoint().y - node:getTexture():getContentSize().height / 2
local rtPosition = ccp(originX - positionOffsetX, originY - positionOffsetY)

-- 开始渲染纹理
rt:begin()
-- 步进值为 10，不同的步进值会影响描边的精细度
for i = 0, 360, 10 do
-- 根据角度和描边宽度计算节点的位置
node:setPosition(ccp(bottomLeftX + math.sin(degrees2radians(i)) * strokeWidth, bottomLeftY + math.cos(degrees2radians(i)) * strokeWidth))
node:visit()
end
-- 结束渲染纹理
rt:endToLua()

-- 恢复节点的原始信息
node:setPosition(originX, originY)
node:setColor(ccc3(originColorR, originColorG, originColorB))
node:setBlendFunc(originBlend)
node:setVisible(originVisibility)
node:setOpacity(originOpacity)

-- 设置渲染纹理的位置
rt:setPosition(rtPosition)

return rt
end

弧度与角度转换函数

在上述 createStroke 函数中，使用了角度转弧度的函数 degrees2radians，同时也提供了弧度转角度的函数 radians2degrees，代码如下：

function degrees2radians(angle)
return angle * 0.01745329252
end

function radians2degrees(angle)
return angle * 57.29577951
end

测试示例

下面通过一个具体的例子来演示如何使用 createStroke 函数为文本添加描边效果。文本和图片的处理方式类似，这里以文本为例：

local quickLabel = ui.newTTFLabel({
text = "QuickCocos2dX-createStroke",
color = display.COLOR_RED,
size = 60,
align = ui.TEXT_ALIGN_CENTER,
x = display.cx,
y = display.cy + 150
}):addTo(self, 1)

local renderTexture = createStroke(quickLabel, 4, ccc3(0xca, 0xa5, 0x5f), 100)
-- 设置反锯齿
renderTexture:getSprite():getTexture():setAntiAliasTexParameters()
self:addChild(renderTexture, quickLabel:getZOrder()-1)

通过以上步骤，你就可以在 Quick Cocos2d-x 中为显示对象添加描边效果了。在实际应用中，可以根据需要调整描边的宽度、颜色、透明度和步进值等参数，以达到不同的视觉效果。