cocos ClippingNode相关_app

概述ClippingNode 用于对节点进行裁剪或遮罩，继承于Node。根据指定的模版(Stencil)裁剪图片生成不同的形状，可像普通的节点放到Node,Layer,Scene中。其原理图如下：模版(Stencil)：可设定任意形状底板：根据模版形状裁切底板 Layer: 用于显示裁切出来的图片在策略动作游戏中，我们经常会看到人物属性表，如下效果图：为了美观，我们需要两张图资源，一张用

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 = "生命",bgPosY-radius/2)},[4] = {name = "暴击",bgPosY - radius - 10)},[5] = {name = "闪避",pos = cc.p(bgPosX-radius*math.cos(angle)-20,[6] = {name = "魅力",}    -- 属性文本    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.x    pos1.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)*radius2    pos2.y = center.y + math.sin(angle)*radius2    -- 生命    local pos3 = {}    local radius3 = math.floor((numList[3]*radius)/100)    pos3.x = center.x + math.cos(angle)*radius3    pos3.y = center.y - math.sin(angle)*radius3    -- 暴击    local pos4 = {}    pos4.x = center.x    pos4.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)*radius5    pos5.y = center.y - math.sin(angle)*radius5    -- 魅力    local pos6 = {}    local radius6 = math.floor((numList[6]*radius)/100)    pos6.x = center.x - math.cos(angle)*radius6    pos6.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))    -- 设置Alpha    clipnode:setAlphaThreshold(1)     -- 添加底板           clipnode:addChild(clipSprite)     -- 设置模板             clipnode:setStencil(drawnode)     -- true底板可见，false模板可见        clipnode:setInverted(false)                self:addChild(clipnode,100)endreturn ClipTest