cocos DrawNode绘制随机线段

最新推荐文章于 2023-08-31 09:30:03 发布

转载最新推荐文章于 2023-08-31 09:30:03 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/SkyflyBird/p/10171850.html

文章标签：

#xcode #lua

本文介绍如何使用CocosLua和DrawNode在cocos2d-x中绘制动态折线图，包括设置坐标轴、生成随机点并用线段连接，实现数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境： cocos Lua 3.15 Xcode

DrawNode相关，参考：https://www.cnblogs.com/SkyflyBird/p/10133960.html

示意图：

示例代码：(由于其Y轴坐标使用的是随机坐标，因此其运行代码，会导致每次效果不一)

-- 绘制折线图
local winSize = cc.Director:getInstance():getWinSize()
local DrawLineTest = class("DrawLineTest", function()
    return cc.Layer:create()
end)

function DrawLineTest:ctor()
    self:drawLineWnd()
end 

function DrawLineTest:drawLineWnd()
    math.randomseed(os.time())
    local drawNode = cc.DrawNode:create()
    self:addChild(drawNode,100)

    -- x,y轴阶段
    local startposX, startPosY = 200, 100           -- 原点坐标
    local xLen, yLen = 540, 300                     -- x,y轴长度
    local SPACEX, SPACEY = 60, 30                   -- x,y轴每段间隔
    local randlinepos = {}                          -- 随机点坐标
    for i = 1, 10 do 
        -- x轴坐标相关
        local labelX = ccui.Text:create(tostring((i-1)*100), "Arial", 18)
        labelX:setPosition(cc.p(startposX + (i - 1) * SPACEX, startPosY - 20))
        self:addChild(labelX)

        -- y轴坐标相关
        local labelY = ccui.Text:create(tostring((i-1)*100), "Arial", 18)
        labelY:setPosition(cc.p(startposX - 20, startPosY + (i -1) * SPACEY))
        self:addChild(labelY)

        -- y轴平行线相关
        local origin = cc.p(startposX, startPosY + (i - 1)* SPACEY)
        local destination = cc.p(startposX + xLen, startPosY + (i - 1)* SPACEY)
        local color = cc.c4f(0, 0, 1, 0.8)
        drawNode:drawLine(origin, destination,color)

        -- 绘制Y轴随机点，计算公式： x/len = 随机值／总数值
        local randPosY = math.floor(math.random(0,900) * yLen/900) + startPosY
        local pointSize = 5
        local color = cc.c4f(1,0,0,1)
        local newPos = cc.p(startposX + (i - 1) * SPACEX, randPosY)
        drawNode:drawPoint(newPos,pointSize, color)
        table.insert(randlinepos, newPos)
    end 

    -- 根据随机点连接线段
    local num = #randlinepos
    for i = 1, num do 
        if i >= 2 then 
            local origin = randlinepos[i-1]
            local destination = randlinepos[i]
            drawNode:drawLine(origin, destination, cc.c4f(1,1,0,1))
        end 
    end 
end

return DrawLineTest