制作新手引导高亮区域方法之二：裁剪模式

demo下载：Quick-x-HighlightArea-master.zip

裁剪模式

(1)创建裁剪对象

1 2 3 4 5 6 7 8 9 10

local bgColor = ccc3(255, 0, 0) --非高亮区域颜色 local bgOpacity = 0.6 --非高亮区域透明度   local layerColor = CCLayerColor:create(ccc4(bgColor.r, bgColor.g, bgColor.b, bgOpacity * 255), size.width, size.height)   local clipNode = CCClippingNode:create(); clipNode:setInverted( true )--设定遮罩的模式 true 显示没有被遮起来的纹理   如果是 false 就显示遮罩起来的纹理   clipNode:setAlphaThreshold(0) --设定遮罩图层的透明度取值范围  clipNode:addChild(layerColor) self:addChild(clipNode)

(2)创建用来裁剪的对象

因为这里都是使用同一张贴图，所以使用CCSpriteBatchNode统一创建

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

local batchNode = CCSpriteBatchNode:create( "Images/circle.png" )   local circleSpr = CCSprite:createWithTexture(batchNode:getTexture()) local circleSize = circleSpr:getContentSize()   local widthPara  local heightPara   local rectArray = {                           [1] = CCRect(100, 100, 100, 100),                           [2] = CCRect(200, 100, 100, 150),                           [3] = CCRect(450, 35, 150, 100),                           [4] = CCRect(300, 300, 100, 100),                          }   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）

可以看到，裁剪模式已经出现了锯齿（后面会用另外一种方式解决这个问题）

来源网址：http://www.cnblogs.com/creeper/p/3972561.html