cocos2d-lua：剪裁头像

Preface

清明时节雨纷纷，为因抗击新冠肺炎疫情而牺牲的烈士默哀三分钟！

Description

将矩形头像剪裁为圆形和圆角矩形！

资源：

Implemention

HeadNode.lua

-- 剪裁头像节点
local HeadNode = class("HeadNode", function()
    return cc.Node:create()
end)

-- @params headRes(string) 被剪裁头像资源
-- @params maskRes(string) 剪裁模板资源
function HeadNode:ctor(headRes, maskRes)
    headRes = headRes or "pic/img_head_1.png"
    maskRes = maskRes or "pic/img_head_mask_1.png"

    local spr_mask = cc.Sprite:create(maskRes)  -- 创建剪裁模板
    local maskSize = spr_mask:getContentSize()

    local spr_head = cc.Sprite:create(headRes)  -- 创建被剪裁头像
    local headSize = spr_head:getContentSize()
    local scale = math.max(maskSize.width / headSize.width, maskSize.height / headSize.height)
    spr_head:setScale(scale)  -- 根据剪裁模板尺寸对被剪裁头像进行缩放

    local clippingNode = cc.ClippingNode:create()  --创建剪裁节点
    clippingNode:setAlphaThreshold(0)  -- 设置alpha阈值，只有剪裁模板的alpha像素大于alpha阈值时的内容才会被绘制。 alpha阈值为0~1的浮点数，默认值为1
    clippingNode:setInverted(false)  -- 设置显示剪裁的部分（false），还是显示剪裁之后剩余的部分（true）。默认值为false
    clippingNode:setStencil(spr_mask)  -- 设置剪裁模板
    clippingNode:addChild(spr_head)  -- 将被剪裁头像添加到剪裁节点
    self:addChild(clippingNode)
end

return HeadNode

MainScene.lua

local node_head_1 = node_head:getChildByName("node_head_1")
local HeadNode_1 = require("app/common/HeadNode"):create("pic/img_head_1.png", "pic/img_head_mask_1.png")
HeadNode_1:setPosition(cc.p(0, 0))
node_head_1:addChild(HeadNode_1)

local node_head_2 = node_head:getChildByName("node_head_2")
local HeadNode_2 = require("app/common/HeadNode"):create("pic/img_head_1.png", "pic/img_head_mask_2.png")
HeadNode_2:setPosition(cc.p(0, 0))
node_head_2:addChild(HeadNode_2)

Result

ps：

有锯齿？加个头像框盖住就OK了~