在之前的博客中詳細(xì)的講過(guò)圖的相關(guān)內(nèi)容，比如《圖的物理存儲(chǔ)結(jié)構(gòu)與深搜、廣搜》。當(dāng)然之前寫的程序是比較抽象的。上篇博客我們以可視化的方式看了一下各種排序的過(guò)程，今天博客中我們就來(lái)可視化的看一下圖的相關(guān)部分，今天我們要畫的圖是無(wú)向圖，并且每個(gè)點(diǎn)到其他點(diǎn)都有直接的連線。今天我們就基于此圖來(lái)做一些事情。當(dāng)然本篇博客在畫圖時(shí)我們使用的是Bezier曲線來(lái)畫的，因?yàn)橹耙擦倪^(guò)關(guān)于Bezier的相關(guān)東西，所以今天就不對(duì)Bezier做過(guò)多贅述了。

今天的博客我們有易到難大致分為三個(gè)部分。第一部分我們會(huì)畫出相應(yīng)的圖，并該圖是可以對(duì)每個(gè)點(diǎn)進(jìn)行拖動(dòng)的，在拖動(dòng)的過(guò)程中，我們對(duì)其進(jìn)行重繪。第二部分會(huì)取消拖動(dòng)，使用UIView自帶的動(dòng)畫來(lái)讓其自己變換，當(dāng)然本部分你也可以使用Timer或者GCD的TimerSource讓其運(yùn)動(dòng)。第三部分則是第二部分的升級(jí)，再第二部分的基礎(chǔ)上我們稍作改進(jìn)，此部分我們使用的是DispatchSourceTimer來(lái)讓每個(gè)點(diǎn)進(jìn)行運(yùn)動(dòng)的。在第三部分我們讓局部范圍的點(diǎn)進(jìn)行連線，也就是在運(yùn)動(dòng)的過(guò)程中，我們需要找出在當(dāng)前點(diǎn)的規(guī)定范圍內(nèi)有哪些點(diǎn)，然后將這些點(diǎn)進(jìn)行連接。

上述這三部分的內(nèi)容下方會(huì)詳細(xì)的進(jìn)行介紹，并會(huì)附有相應(yīng)的運(yùn)行結(jié)果圖。接下來(lái)就進(jìn)入我們的主題部分。

 

一、圖的繪制