1. 程式人生 > >Jtopo入門篇_畫點畫線初探

Jtopo入門篇_畫點畫線初探

    JTopo是一款強大的拓撲圖形化介面開發工具,優點很多,缺點也有,最重要的這是國產(加亮,加粗,加閃光)外掛,對愛國青年來說這是國家的驕傲,標誌著我國打破了美帝列強的技術封鎖,研發出了屬於自己的拓撲外掛(淚奔ing)。對於廣大學渣程式猿來說則意味更容易的理解API(這當然不是重點=。=)。

      我們都知道,在介面上無論是新增元素還是乾點別的不可描述的事情都需要"容器",Jtop的容器便是<canvas>標籤,如下圖

      

           介紹完容器,現在來畫點,雖然畫點的程式碼只有一行,但是需要一點前戲,首先需要獲取canvas物件,和生成stage物件(一個抽象的舞臺物件,對應一個Canvas和多個場景物件Scene)

var canvas = 
              document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
接著再獲取Scene場景物件,這個場景在概念上等同很多圖形系統中的Layer。
var scene = new JTopo.Scene(stage);
然後新增node 
var node = new JTopo.Node("Hello");                            
            node.setLocation(409, 269);
            scene.add(node);
         到現在為止,畫點的程式碼就已經完成,接下來畫條線。畫線的原理其實很簡單,只要傳入兩個畫點的node物件和線的名稱即可。和由於篇幅問題(其實就是懶),就直接晒程式碼了。
var link = new JTopo.Link(nodeA, nodeZ, text)
scene.add(link)
         沒錯,就是這麼簡單,但是在真實場景中這些程式碼根本就沒有辦法應付企業級應用,在很多時候我們看到能用jtopo畫出相當炫酷的場景,展現了非常複雜的業務。這個就在後面的章節進行總結。