開放的多點貝賽爾曲線實現

初識貝塞爾曲線

在實現開放的多點貝塞爾曲線之前,我們先了解下貝塞爾曲線的一些基本的知識.后面鏈接解釋的蠻詳細的:
貝塞爾曲線初探

鏈接文章中,我們看以清楚的看出貝塞爾曲線的繪制過程.下面就簡單說下二階的繪制原理.如下圖所示:

P0A/P0P1 = P1B/P1P2 = AP/AB = t ( 0<=t<=1)

隨著t的值從0-1變化P點位置就是我們所要的貝塞爾點集

從上面的過程可以得出一下幾點:

1. 貝塞爾點數量可以用t等分的數量控制
2. 貝塞爾點分布不是均勻的(要做勻速的話,要對生成的點集在做處理,這里我們不考慮)
3. 貝塞爾曲線起始與P0P1相切,結束與P1P2相切(這個就是實現多點貝塞爾的關鍵所在)

多點貝塞爾曲線實現思路

根據上面第3點,只要前一段貝塞爾曲線結束點的切線與下一段貝塞爾曲線起始點的切線重合.這樣兩段貝塞爾曲線就可以平滑連接.

現在的關鍵在于計算貝塞爾曲線控制點的位置,這里我們用的是三階的貝塞爾曲線

三階貝塞爾曲線控制點計算

• 取AB,BC中點E,F:

lua:

local EPos = ccpMidpoint(APos,BPos)
local FPos = ccpMidpoint(BPos,CPos)

• E,F平移到E',F' G與B重合

lua:

-- 平移向量
local GB_Vec = ccpSub(BPos,ccpMidpoint(EPos,FPos))
-- 平移點
local controlP1 = ccpAdd(GB_Vec,EPos)
local controlP2 = ccpAdd(GB_Vec,FPos)

• E',F' 基本可以作為控制點,為了調整曲線效果可以將E',F'往B方向收縮或擴大(以下是向外擴展0.4倍)

lua:

controlP1 = ccpAdd(ccpMult(ccpSub(BPos,controlP1),-0.4),controlP1)
controlP2 = ccpAdd(ccpMult(ccpSub(BPos,controlP2),-0.4),controlP2)

• 繪制三次貝塞爾曲線貝塞爾,controlP = {起始點,控制點1,控制點2,結束點}

lua:

function M:bezier3func(uu, controlP)
    local part1 = ccpMult(controlP[1],uu*uu*uu) 
    local part2 = ccpMult(controlP[2],3*uu*uu*(1-uu))
    local part3 = ccpMult(controlP[3],3*uu*(1-uu)*(1-uu))
    local part4 = ccpMult(controlP[4],(1-uu)*(1-uu)*(1-uu))
    return ccpAdd(ccpAdd(part1,part2),ccpAdd(part3,part4)) 
end 

以上實現思路來源于穿過已知點畫平滑曲線（3次貝塞爾曲線）

代碼實現

lua:

-- 傳入節點node
-- 多點開放貝塞爾曲線
function M:bezierSceneMove(node)
    self:updateFishData(node)
    -- 取中點
    local midPos1 = ccpMidpoint(node.myPos,node.nextPos)
    local midPos2 = ccpMidpoint(node.nextPos,node.endPos)
    -- 平移向量
    local dPos = ccpSub(node.nextPos,ccpMidpoint(midPos1,midPos2))
    -- 中點平移
    local controlP1 = ccpAdd(dPos,midPos1)
    local controlP2 = ccpAdd(dPos,midPos2)
    -- 控制點計算
    controlP1 = ccpAdd(ccpMult(ccpSub(node.nextPos,controlP1),-0.4),controlP1)
    controlP2 = ccpAdd(ccpMult(ccpSub(node.nextPos,controlP2),-0.4),controlP2)
    local totalDis = 0
    local lastP = self:bezier3func(0,{node.myPos,node.lastContrlP,controlP1,node.nextPos})
    for i=0,100 do
        local pos = self:bezier3func(i/100,{node.myPos,node.lastContrlP,controlP1,node.nextPos})
        totalDis = totalDis + ccpDistance(lastP,pos)
        lastP = pos
    end
    local totleTimes = math.floor(totalDis/node.speed*60)
    local tag = totleTimes
    self.moveAction = A.cycle({
        {"delay",1/60},
        {"fn",function( ... )
            local pos = self:bezier3func(tag/totleTimes,{node.myPos,node.lastContrlP,controlP1,node.nextPos})
            local angle = 180-CC_RADIANS_TO_DEGREES(ccpToAngle(ccpSub(pos,node:point())))
            if angle ~= 180 then
                node:rotation(angle)
            end
            node:setPosition(pos)
            tag = tag - 1
            if tag < 0 then
                self:stopAction(self.moveAction)
                node.lastContrlP = controlP2
                self:bezierSceneMove(node)
            end
        end},
    }):at(self)
end
-- 更新下一個點
function M:updateFishData(node)
    if node.myPos == nil then
        node.myPos = node:point()
        node.nextPos = ccp(N.random(40,900),N.random(40,600))
        node.endPos = ccp(N.random(40,900),N.random(40,600))
        node.lastContrlP = ccpAdd(node:point(),ccp(100,0))
        local angle = 180-CC_RADIANS_TO_DEGREES(ccpToAngle(ccpSub(node.nextPos,node:point())))
        node:rotation(angle)

    else
        node.myPos = node.nextPos
        node.nextPos = node.endPos
        node.endPos = ccp(N.random(40,900),N.random(40,600))
        -- 隨機點位過近/折返
        -- while ccpDistance(node.endPos,node.nextPos) < 200 or CC_RADIANS_TO_DEGREES(ccpAngle(ccpSub(node.myPos,node.nextPos),ccpSub(node.endPos,node.nextPos))) < 40 do
        --     node.endPos = ccp(N.random(40,900),N.random(40,600))
        -- end
    end
    node.speed = N.random(140,160)
end
--三次貝塞爾曲線 X
function M:bezier3func(uu, controlP)
    local part1 = ccpMult(controlP[1],uu*uu*uu) 
    local part2 = ccpMult(controlP[2],3*uu*uu*(1-uu))
    local part3 = ccpMult(controlP[3],3*uu*(1-uu)*(1-uu))
    local part4 = ccpMult(controlP[4],(1-uu)*(1-uu)*(1-uu))
    return ccpAdd(ccpAdd(part1,part2),ccpAdd(part3,part4)) 
end

效果截圖