[Quick-x]製做新手引導高亮區域方法之二：裁剪模式

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

二、裁剪模式

(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 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）

 

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

 

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