《Cocos2d-x-3.2 Lua-tests》文件詳解 之 基本繪圖DrawPrimitives

繪圖API由相應的編程語言提供，cocos2d封裝了自己的繪圖方法，形成獨有的特性。

--[[
    cocos2d-x基本圖形的繪制
--]]

local function drawPrimitivesMainLayer()
    local kItemTagBasic = 1000
    local testCount = 2
    local maxCases = testCount
    local curCase  = 0
    local size = cc.Director:getInstance():getWinSize()
    local curLayer = nil

    local  function orderCallbackMenu()
        local function backCallback()
            curCase = curCase - 1
            if curCase < 0 then
                curCase = curCase + maxCases
            end
            showCurrentTest()
        end
    
        local function restartCallback()
            showCurrentTest()
        end
    
        local function nextCallback()
            curCase = curCase + 1
            curCase = curCase % maxCases
            showCurrentTest()
        end

        local ordercallbackmenu = cc.Menu:create()
        local size = cc.Director:getInstance():getWinSize()
        local item1 = cc.MenuItemImage:create(s_pPathB1, s_pPathB2)
        item1:registerScriptTapHandler(backCallback)
        ordercallbackmenu:addChild(item1,kItemTagBasic)
        local item2 = cc.MenuItemImage:create(s_pPathR1, s_pPathR2)
        item2:registerScriptTapHandler(restartCallback)
        ordercallbackmenu:addChild(item2,kItemTagBasic)
        local item3 = cc.MenuItemImage:create(s_pPathF1, s_pPathF2)
        ordercallbackmenu:addChild(item3,kItemTagBasic) 
        item3:registerScriptTapHandler(nextCallback)
                
        item1:setPosition(cc.p(size.width / 2 - item2:getContentSize().width * 2, item2:getContentSize().height / 2))
        item2:setPosition(cc.p(size.width / 2, item2:getContentSize().height / 2))
        item3:setPosition(cc.p(size.width / 2 + item2:getContentSize().width * 2, item2:getContentSize().height / 2))
        
        ordercallbackmenu:setPosition(cc.p(0, 0))

        return ordercallbackmenu
    end

    local function GetTitle()
        if 0 == curCase then
            return "Draw primitives"
        elseif 1 == curCase then
            return "Test DrawNode"
        end
    end
    
    local function GetSubTitle()
        if 0 == curCase then
            return "Drawing Primitives by call gl funtions"
        elseif 1 == curCase then
            return "Testing DrawNode - batched draws. Concave polygons are BROKEN"
        end
    end

    local function InitTitle(layer)
        --Title
        local lableTitle = cc.Label:createWithTTF(GetTitle(), s_arialPath, 40)
        layer:addChild(lableTitle, 15)
        lableTitle:setAnchorPoint(cc.p(0.5, 0.5))
        lableTitle:setPosition(cc.p(size.width / 2, size.height - 32))
        lableTitle:setColor(cc.c3b(255, 255, 40))
        --SubTitle
        local subLabelTitle = cc.Label:createWithTTF(GetSubTitle(), s_thonburiPath, 16)
        layer:addChild(subLabelTitle, 15)
        subLabelTitle:setAnchorPoint(cc.p(0.5, 0.5))
        subLabelTitle:setPosition(cc.p(size.width / 2, size.height - 80)) 
    end
    --[[
        兩種大的方法：
        1、OpenGL圖形庫繪圖
        2、繪圖節點繪圖
    --]]
    
    --基本繪圖API展示
    local function createDrawPrimitivesEffect()
        local layer = cc.Layer:create()

        InitTitle(layer)
        
        --創建圖形庫節點，並設置尺寸和錨點
        local glNode  = gl.glNodeCreate()
        glNode:setContentSize(cc.size(size.width, size.height))
        glNode:setAnchorPoint(cc.p(0.5, 0.5))

        --自定義回調方法
        local function primitivesDraw(transform, transformUpdated)
            --不懂OpenGL的，就只能先記住  了
            kmGLPushMatrix()
            kmGLLoadMatrix(transform)
            --指定兩個點，畫線
            cc.DrawPrimitives.drawLine(VisibleRect:leftBottom(), VisibleRect:rightTop() )
            
            --指定兩個點，畫線。還可以設置顏色、透明度和線寬
            gl.lineWidth( 5.0 )--線寬
            cc.DrawPrimitives.drawColor4B(255,0,0,255)--顏色
            cc.DrawPrimitives.drawLine( VisibleRect:leftTop(), VisibleRect:rightBottom() )
            
            --在某一個坐標上畫點
            cc.DrawPrimitives.setPointSize(64)
            cc.DrawPrimitives.drawColor4B(0, 0, 255, 128)
            cc.DrawPrimitives.drawPoint(VisibleRect:center())

            --畫多個點
            local points = {cc.p(60,60), cc.p(70,70), cc.p(60,70), cc.p(70,60) }
            cc.DrawPrimitives.setPointSize(4)
            cc.DrawPrimitives.drawColor4B(0,255,255,255)
            --drawPoints()第二個參數表示從table中依次取多少個
            cc.DrawPrimitives.drawPoints(points,4)

            gl.lineWidth(5)
            cc.DrawPrimitives.drawColor4B(0, 255, 0, 255)
            --5個參數：圓心，半徑，逆時針旋轉的角度(弧度制)，正幾邊形，是否顯示半徑
            --也許你覺得旋轉的角度沒有意義，但當你明白這里的Circle是由正多邊形模擬的，就懂了
           -- cc.DrawPrimitives.drawCircle( VisibleRect:center(), 110, math.pi, 100, true)
           -- cc.DrawPrimitives.drawCircle( VisibleRect:center(), 150, 90, 100, true)
           -- cc.DrawPrimitives.drawCircle( VisibleRect:center(), 135, 45, 100, true)
            cc.DrawPrimitives.drawCircle( VisibleRect:center(), 120, 0, 100, false)
            
            --畫圓，同上
            gl.lineWidth(2)
            cc.DrawPrimitives.drawColor4B(0, 255, 255, 255)
            cc.DrawPrimitives.drawCircle( VisibleRect:center(), 50, math.pi / 2, 50, true)

            --畫實圓，參數：圓心，半徑，旋轉角度（弧度，邊數，x軸縮放，y軸縮放
            gl.lineWidth(2)
            cc.DrawPrimitives.drawColor4B(255, 0, 255, 255)
            cc.DrawPrimitives.drawSolidCircle( cc.p(VisibleRect:center().x + 140 ,VisibleRect:center().y), 40, math.rad(90), 10, 1.0, 1.0)
            
            --任意空多邊形
            gl.lineWidth(10)
            cc.DrawPrimitives.drawColor4B(255, 255, 0, 255)
            local yellowPoints = { cc.p(0,0), cc.p(50,50), cc.p(100,50), cc.p(100,100), cc.p(50,100)}
            --3參數：頂點列表，點數，是否封閉（首尾相連）
            cc.DrawPrimitives.drawPoly( yellowPoints, 5, true)
            
            --任意實多邊形，
            gl.lineWidth(1)
            local filledVertices = { cc.p(0,120), cc.p(50,120), cc.p(50,170), cc.p(25,200), cc.p(0,170) }
            --3參數：頂點列表，頂點數，顏色
           cc.DrawPrimitives.drawSolidPoly(filledVertices, 5, cc.c4f(0.5, 0.5, 1, 1))

            --任意空多邊形，同上
            gl.lineWidth(2)
            cc.DrawPrimitives.drawColor4B(255, 255, 255, 255)
            local closePoints= { cc.p(30,130), cc.p(30,230), cc.p(50,200) }
            cc.DrawPrimitives.drawPoly( closePoints, 3, true)
            
            --基本貝賽爾曲線，4參數：起點，控制點，終點，邊數。
            --普及一下：計算機是用首尾連接的線段模擬曲線和圓，分段越多，就越圓滑，越象曲線。
            cc.DrawPrimitives.drawQuadBezier(VisibleRect:leftTop(), VisibleRect:center(), VisibleRect:rightTop(), 50)
            
            --多段貝賽爾曲線：起點，控制點...控制點，終點，邊數
            cc.DrawPrimitives.drawCubicBezier(VisibleRect:center(), cc.p(VisibleRect:center().x + 30, VisibleRect:center().y + 50), cc.p(VisibleRect:center().x + 60,VisibleRect:center().y - 50), VisibleRect:right(), 100)

            --實任意多邊形：頂點列表，邊數，顏色
            local solidvertices = {cc.p(60,160), cc.p(70,190), cc.p(100,190), cc.p(90,160)}
            cc.DrawPrimitives.drawSolidPoly( solidvertices, 4, cc.c4f(1, 1, 0, 1) )

            local array = {
                cc.p(0, 0),
                cc.p(size.width / 2 - 30, 0),
                cc.p(size.width / 2 - 30, size.height - 80),
                cc.p(0, size.height - 80),
                cc.p(0, 0),
            }
            cc.DrawPrimitives.drawColor4B(255,0,0,255)
           cc.DrawPrimitives.drawCatmullRom( array, 20)
            --基樣線條：參照點列表，精度，邊數
           cc.DrawPrimitives.drawCardinalSpline( array, 0,100)

            gl.lineWidth(1)
            cc.DrawPrimitives.drawColor4B(255,255,255,255)
            cc.DrawPrimitives.setPointSize(1)

            kmGLPopMatrix()
        end
        --給圖形庫節點注冊繪圖回調
        glNode:registerScriptDrawHandler(primitivesDraw)
        --將圖形庫節點(glNode)添加到Layer，並設置位置
        layer:addChild(glNode,-10)
        glNode:setPosition( size.width / 2, size.height / 2)

        return layer
    end
    
    --
    local function createDrawNodeTest()
        local layer = cc.Layer:create()

        InitTitle(layer)
        
        --cocos2d-x繪圖節點
        --下面的繪圖，直接調用DrawNode節點的相關方法：drawDot
        local draw = cc.DrawNode:create()
        layer:addChild(draw, 10)

        --Draw 10 circles
        --畫十個同心圓點
        for i=1, 10 do
            --參數：位置，半徑，顏色和透明度 -
            draw:drawDot(cc.p(size.width/2, size.height/2 + i*10), 10*(10-i), cc.c4f(math.random(0,1), math.random(0,1), math.random(0,1), 1))
        end

        --Draw polygons多邊形：頂點列表，頂點數，填充顏色，邊的顏色
        points = { cc.p(size.height/4, 0), cc.p(size.width, size.height / 5), cc.p(size.width / 3 * 2, size.height) }
       -- draw:drawPolygon(points, table.getn(points), cc.c4f(1,0,0,0.5), 4, cc.c4f(0,0,1,1))

        local o = 80
        local w = 20
        local h = 50
        local star1 = { cc.p( o + w, o - h), cc.p(o + w * 2, o), cc.p(o + w * 2 + h, o + w), cc.p(o + w * 2, o + w * 2) }
        
        --draw:drawPolygon(star1, table.getn(star1), cc.c4f(0,1,0,0.5), 1, cc.c4f(0,0,1,1))

        o = 180
        w = 20
        h = 50
        local star2 = {
            cc.p(o, o), cc.p(o + w, o - h), cc.p(o + w * 2, o),        --lower spike
            cc.p(o + w * 2 + h, o + w ), cc.p(o + w * 2, o + w * 2),      --right spike
            cc.p(o + w, o + w * 2 + h), cc.p(o, o + w * 2),               --top spike
            cc.p(o - h, o + w),                                              --left spike
        };
        
        --draw:drawPolygon(star2, table.getn(star2), cc.c4f(1,0,0,0.5), 1, cc.c4f(0,0,1,1))

        --畫線段：起點，終點，線寬，顏色
        draw:drawSegment(cc.p(20,size.height), cc.p(20,size.height/2), 10, cc.c4f(0, 1, 1, 0.5))

        draw:drawSegment(cc.p(10,size.height/2), cc.p(size.width, size.height/2), 40, cc.c4f(1, 0, 0, 0.5))

        return layer
    end
    
    --[[
        總結：
        繪圖兩種方法及各自的步驟：
        方法一：
        1、創建圖形庫節點：local glNode  = gl.glNodeCreate()
        2、給該節點注冊封裝了繪圖方法的回調 glNode:registerScriptDrawHandler(primitivesDraw)，然后你就可以在primitiesDraw()中自由發揮了
           直接調用cc.DrawPrimitives.下的一系列方法。其中設置線寬的方法為：gl.lineWidth(int)，顏色：cc.DrawPrimitives.drawColor4B(255,0,0,255)
        3、將圖形庫節點添加到層中顯示
        
     方法二：
        1、創建cocos2d-x繪圖節點，local drawNode = cc.DrawNode:create()
        2、添加到層，layer:addChild(drawNode)
        3、直接調用繪圖節點下的方法繪圖，如：drawNode:drawSegment(cc.p()...cc.p(),int,cc.c4f())
        
        至於說這兩種方法的區別，等我有空慢慢研究吧。
    --]]


    --下面的是通用界面布局，不解釋
    local function createLayerByCurCase(curCase)
        if 0 == curCase then
            return createDrawPrimitivesEffect()
        elseif 1 == curCase then
            return createDrawNodeTest()
        end
    end

    function showCurrentTest()    
        local curScene = cc.Scene:create()
        if nil ~= curScene then
            curLayer = createLayerByCurCase(curCase)
            if nil ~= curLayer then
                curScene:addChild(curLayer)
                curLayer:addChild(orderCallbackMenu(),15)
                curScene:addChild(CreateBackMenuItem())
                cc.Director:getInstance():replaceScene(curScene)
            end            
        end 
    end

    curLayer = createLayerByCurCase(curCase)
    curLayer:addChild(orderCallbackMenu(),15)
    return curLayer
end

function DrawPrimitivesTest()
    local scene = cc.Scene:create()
    scene:addChild(drawPrimitivesMainLayer())
    scene:addChild(CreateBackMenuItem())
    return scene
end