demo下载:https://github.com/chenquanjun/Quick-x-HighlightArea
2、裁剪模式
(1)创建裁剪对象
local bgColor = ccc3(, , ) --非高亮区域颜色
local bgOpacity = 0.6 --非高亮区域透明度 local layerColor = CCLayerColor:create(ccc4(bgColor.r, bgColor.g, bgColor.b, bgOpacity * ), size.width, size.height) local clipNode = CCClippingNode:create();
clipNode:setInverted(true)--设定遮罩的模式true显示没有被遮起来的纹理 如果是false就显示遮罩起来的纹理
clipNode:setAlphaThreshold() --设定遮罩图层的透明度取值范围
clipNode:addChild(layerColor)
self:addChild(clipNode)
(2)创建用来裁剪的对象
因为这里都是使用同一张贴图,所以使用CCSpriteBatchNode统一创建
local batchNode = CCSpriteBatchNode:create("Images/circle.png") local circleSpr = CCSprite:createWithTexture(batchNode:getTexture())
local circleSize = circleSpr:getContentSize() local widthPara
local heightPara local rectArray = {
[] = CCRect(, , , ),
[] = CCRect(, , , ),
[] = CCRect(, , , ),
[] = CCRect(, , , ),
} for i, rect in ipairs(rectArray) do
local circleSpr = CCSprite:createWithTexture(batchNode:getTexture()) if not widthPara then
local circleSize = circleSpr:getContentSize() --宽度和高度参数,1.4142为根号2,矩形的外接椭圆的长轴与短轴长度
widthPara = 1.4142 / circleSize.width
heightPara = 1.4142 / circleSize.height
end local fScaleX = widthPara * rect.size.width
local fScaleY = heightPara * rect.size.height
circleSpr:setScaleX(fScaleX)
circleSpr:setScaleY(fScaleY)
circleSpr:setPosition(rect:getMidX(), rect:getMidY())
batchNode:addChild(circleSpr)
end clipNode:setStencil(batchNode) --关键代码
具体效果(裁剪模板模式 StencilMode)
教程方法一的使用的混合模式(BlendMode)
原始图片(Origin)
可以看到,裁剪模式已经出现了锯齿(后面会用另外一种方式解决这个问题)
demo下载:https://github.com/chenquanjun/Quick-x-HighlightArea