《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