ClippingNode 用于對節點進行裁剪或遮罩，繼承于Node。根據指定的模版(Stencil)裁剪圖片生成不同的形狀，可像普通的節點放到Node,Layer,Scene中。其原理圖如下：

模版(Stencil)：可設定任意形狀

底板： 根據模版形狀裁切底板

Layer: 用于顯示裁切出來的圖片

?

在策略動作游戲中，我們經常會看到人物屬性表，如下效果圖：

為了美觀，我們需要兩張圖資源，一張用于背景，另一張用于裁切。其圖片為正六邊形，如下：

其正六邊形斜線上點的位置計算圖示如下：

其Demo實現代碼如下：

local winSize = cc.Director:getInstance():getWinSize() local ClipTest = class("ClipTest", function()return cc.Layer:create() end)function ClipTest:ctor()self:creatClipWnd() end function ClipTest:creatClipWnd()-- 添加背景local bgSprite = cc.Sprite:create("clip_2.png")bgSprite:setPosition(cc.p(winSize.width/2, winSize.height/2))self:addChild(bgSprite)local bgSize = bgSprite:getContentSize()local bgPosX, bgPosY = bgSprite:getPosition()local center = cc.p(bgPosX,bgPosY) -- 中心點位置local radius = bgSize.height/2 -- 半徑 local angle = math.rad(30) -- 角度-- 測試數據local numList = {70,10,80,90,60,50}local textList = {[1] = {name = "攻擊", pos = cc.p(bgPosX, bgPosY + radius+ 10)},[2] = {name = "防御", pos = cc.p(bgPosX+radius*math.cos(angle)+20, bgPosY+radius/2)},[3] = {name = "生命", pos = cc.p(bgPosX+radius*math.cos(angle)+20, bgPosY-radius/2)},[4] = {name = "暴擊", pos = cc.p(bgPosX,bgPosY - radius - 10)},[5] = {name = "閃避", pos = cc.p(bgPosX-radius*math.cos(angle)-20, bgPosY-radius/2)},[6] = {name = "魅力", pos = cc.p(bgPosX-radius*math.cos(angle)-20, bgPosY+radius/2)},}-- 屬性文本for i = 1, 6 do local label = ccui.Text:create(textList[i].name, "Arial", 18)label:setPosition(textList[i].pos)self:addChild(label)end -- 使用DrawNode繪制六邊形，可參考：https://www.cnblogs.com/SkyflyBird/p/10133960.html-- 每條半徑點上的位置要進行等比換算，公式： X/num = radius/100， 求X-- 攻擊local pos1 = {}pos1.x = center.xpos1.y = center.y + math.floor((numList[1]*radius)/100)-- 防御local pos2 = {}local radius2 = math.floor((numList[2]*radius)/100) pos2.x = center.x + math.cos(angle)*radius2pos2.y = center.y + math.sin(angle)*radius2-- 生命local pos3 = {}local radius3 = math.floor((numList[3]*radius)/100)pos3.x = center.x + math.cos(angle)*radius3pos3.y = center.y - math.sin(angle)*radius3-- 暴擊local pos4 = {}pos4.x = center.xpos4.y = center.y - math.floor((numList[4]*radius)/100)-- 閃避local pos5 = {}local radius5 = math.floor((numList[5]*radius)/100)pos5.x = center.x - math.cos(angle)*radius5pos5.y = center.y - math.sin(angle)*radius5-- 魅力local pos6 = {}local radius6 = math.floor((numList[6]*radius)/100)pos6.x = center.x - math.cos(angle)*radius6pos6.y = center.y + math.sin(angle)*radius6-- local drawnode = cc.DrawNode:create()local vertices = {pos1,pos2,pos3,pos4,pos5,pos6}drawnode:drawSolidPoly(vertices, 6, cc.c4b(0,1,0,1))-- 將繪制的六邊形作為模版，對其clipSprite進行裁切local clipSprite = cc.Sprite:create("clip_1.png")clipSprite:setPosition(cc.p(bgPosX,bgPosY))-- local clipnode = cc.ClippingNode:create()clipnode:setPosition(cc.p(0,0))-- 設置alphaclipnode:setAlphaThreshold(1) -- 添加底板 clipnode:addChild(clipSprite) -- 設置模板 clipnode:setStencil(drawnode) -- true底板可見，false模板可見 clipnode:setInverted(false) self:addChild(clipnode,100) endreturn ClipTest

?

轉載于:https://www.cnblogs.com/SkyflyBird/p/10166374.html

總結

以上是生活随笔為你收集整理的cocos ClippingNode 之绘制六边形战力(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。