cocos2dx-lua制作游戏五维图

cocos2dx-lua制作游戏五维图

首先对五维图的五个顶点采集，可以使用Mark Man. 然后把五个点转为相对于五维图中心点的坐标。

local pointVec = {    [1] = {width = 0, height = 79},    [2] = {width = 81, height = 19.5},    [3] = {width = 51, height = -74},    [4] = {width = -51, height = -74},    [5] = {width = -81, height = 19.5}}

这五个点的顺序是从最上面按照顺时针排序的，可以根据自己的需求排序。
接下来有两种选择：
- 使用cocos2dx-lua自带的DrawNode来画出五维图，可以自己百度一下怎么做，因为这种方式画出来的线会有锯齿，所以被我放弃了。
- 使用一张渐变的线条图片进行拉伸操作。
接下来我使用第二种方式实现。

function Ref:drawPoly()    local vertices = {}    for i=1,#self.creature.totalAttr do        local percent = self.creature.totalAttr[i] / limit        local x,y = pointVec[i].width * percent, pointVec[i].height * percent        table.insert(vertices, cc.p(x, y))    end    for i=1,#vertices do        local point1 = vertices[i]        local point2 = {}        if i == #vertices then            point2 = vertices[1]        else            point2 = vertices[i+1]        end        local vec = {}        --向量以下为正方向        if point2.y < point1.y then            vec = cc.p(point2.x-point1.x, point2.y-point1.y)        else            vec = cc.p(point1.x-point2.x, point1.y-point2.y)        end        local angle = math.deg(math.acos(vec.x / (math.sqrt(math.pow(vec.x, 2) + math.pow(vec.y, 2)))))        local midPoint = cc.p((point1.x+point2.x)/2, (point1.y+point2.y)/2)        local length = math.sqrt(math.pow((point2.y-point1.y),2)+math.pow((point2.x-point1.x),2))        local line = cc.Sprite:create(linePath):addTo(self.ccbNodeDrawLine):move(midPoint)        line:setRotation(angle)        line:setScaleX(length/line:getContentSize().width)        line:setScaleY(0.6)        cc.Sprite:create(pointPath):addTo(self.ccbNodeDrawLine):move(vertices[i])    endend

效果示意图：

注：代码部分变量在其他地方定义，不影响逻辑，请改为自己定义的变量。