demo下載：https://github.com/chenquanjun/Quick-x-HighlightArea

2、裁剪模式

(1)創建裁剪對象

    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統一創建

    local batchNode = CCSpriteBatchNode:create("Images/circle.png")local circleSpr = CCSprite:createWithTexture(batchNode:getTexture())local circleSize = circleSpr:getContentSize()local widthPara local heightParalocal 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) dolocal circleSpr = CCSprite:createWithTexture(batchNode:getTexture())if not widthPara thenlocal circleSize = circleSpr:getContentSize()--寬度和高度參數，1.4142為根號2，矩形的外接橢圓的長軸與短軸長度widthPara = 1.4142 / circleSize.widthheightPara = 1.4142 / circleSize.heightendlocal fScaleX = widthPara * rect.size.widthlocal fScaleY = heightPara * rect.size.heightcircleSpr:setScaleX(fScaleX)circleSpr:setScaleY(fScaleY)circleSpr:setPosition(rect:getMidX(), rect:getMidY())batchNode:addChild(circleSpr)endclipNode:setStencil(batchNode) --關鍵代碼

具體效果(裁剪模板模式 StencilMode)

?

教程方法一的使用的混合模式（BlendMode）

?

原始圖片（Origin）

?

可以看到，裁剪模式已經出現了鋸齒（后面會用另外一種方式解決這個問題）

?

demo下載：https://github.com/chenquanjun/Quick-x-HighlightArea

轉載于:https://www.cnblogs.com/creeper/p/3972561.html

總結

以上是生活随笔為你收集整理的[Quick-x]制作新手引导高亮区域方法之二：裁剪模式的全部內容，希望文章能夠幫你解決所遇到的問題。

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