学习cocos2dx的人都知道quick cocos2dx。那么今天我们要学习的就是quick cocos2dx描边的创建实现。具体过程看下面。
  1. - @param:node 欲描边的显示对象
  2. -- @param:strokeWidth 描边宽度
  3. -- @param:color 描边颜色
  4. -- @param:opacity 描边透明度
  5. function createStroke(node, strokeWidth, color, opacity)
  6. local w = node:getTexture():getContentSize().width + strokeWidth * 2
  7. local h = node:getTexture():getContentSize().height + strokeWidth * 2
  8. local rt = CCRenderTexture:create(w, h)
  9. -- 记录原始位置
  10. local originX, originY = node:getPosition()
  11. -- 记录原始颜色RGB信息
  12. local originColorR = node:getColor().r
  13. local originColorG = node:getColor().g
  14. local originColorB = node:getColor().b
  15. -- 记录原始透明度信息
  16. local originOpacity = node:getOpacity()
  17. -- 记录原始是否显示
  18. local originVisibility = node:isVisible()
  19. -- 记录原始混合模式
  20. local originBlend = node:getBlendFunc()
  21. -- 设置颜色、透明度、显示
  22. node:setColor(color)
  23. node:setOpacity(opacity)
  24. node:setVisible(true)
  25. -- 设置新的混合模式
  26. local blendFuc = ccBlendFunc:new()
  27. blendFuc.src = GL_SRC_ALPHA
  28. blendFuc.dst = GL_ONE
  29. -- blendFuc.dst = GL_ONE_MINUS_SRC_COLOR
  30. node:setBlendFunc(blendFuc)
  31. -- 这里考虑到锚点的位置，如果锚点刚好在中心处，代码可能会更好理解点
  32. local bottomLeftX = node:getTexture():getContentSize().width * node:getAnchorPoint().x + strokeWidth
  33. local bottomLeftY = node:getTexture():getContentSize().height * node:getAnchorPoint().y + strokeWidth
  34. local positionOffsetX = node:getTexture():getContentSize().width * node:getAnchorPoint().x - node:getTexture():getContentSize().width / 2
  35. local positionOffsetY = node:getTexture():getContentSize().height * node:getAnchorPoint().y - node:getTexture():getContentSize().height / 2
  36. local rtPosition = ccp(originX - positionOffsetX, originY - positionOffsetY)
  37. rt:begin()
  38. -- 步进值这里为10，不同的步进值描边的精细度也不同
  39. for i = 0, 360, 10 do
  40. -- 这里解释了为什么要保存原来的初始信息
  41. node:setPosition(ccp(bottomLeftX + math.sin(degrees2radians(i)) * strokeWidth, bottomLeftY + math.cos(degrees2radians(i)) * strokeWidth))
  42. node:visit()
  43. end
  44. rt:endToLua()
  45. -- 恢复原状
  46. node:setPosition(originX, originY)
  47. node:setColor(ccc3(originColorR, originColorG, originColorB))
  48. node:setBlendFunc(originBlend)
  49. node:setVisible(originVisibility)
  50. node:setOpacity(originOpacity)
  51. rt:setPosition(rtPosition)
  52. return rt
  53. end
补充
  1. 弧度与角度转换函数
  2. function degrees2radians(angle)
  3. return angle * 0.01745329252
  4. end
  5. function radians2degrees(angle)
  6. return angle * 57.29577951
  7. end
举个例子
测试例子
  1. -- 文本、图片一样，这里用文本举个例子
  2. local quickLabel = ui.newTTFLabel({
  3. text = "QuickCocos2dX-createStroke",
  4. color = display.COLOR_RED,
  5. size = 60,
  6. align = ui.TEXT_ALIGN_CENTER,
  7. x = display.cx,
  8. y = display.cy + 150
  9. }):addTo(self, 1)
  10. local  renderTexture = createStroke(quickLabel, 4, ccc3(0xca, 0xa5, 0x5f), 100)
  11. -- 设置反锯齿
  12. renderTexture:getSprite():getTexture():setAntiAliasTexParameters()
  13. self:addChild(renderTexture, quickLabel:getZOrder()-1)