jtopo

主要API

1. 舞臺(Stage)：

屬性：

• frames 播放的幀數，默認24，0爲不自動繪製需調用paint()方法觸發，小於0表示鍵盤鼠標有動作纔會重繪
• canvas canvas對象的屬性列表
• width 舞臺寬度
• height 舞臺高度
• mode 舞臺模式，默認爲normal，【normal：可以點擊選中單個節點（按住Ctrl可以選中多個），點中空白處可以拖拽整個畫面；drag: 該模式下不可以選擇節點，只能拖拽整個畫面；select: 可以框選多個節點、可以點擊單個節點；edit: 在默認基礎上增加了：選中節點時可以通過6個控制點來調整節點的寬、高】
• childs 場景對象列表
• eagleEye 縮略圖，eagleEye.vasible是否打開縮略圖，默認爲false
• wheelZoom 鼠標滾輪縮放操作比例，當爲null時不進行縮放，當爲負值時在縮放同時會進行位置的變換並旋轉180度，數值大於1和小於1時縮放方向相反

方法：

• add(Scene) 將場景添加進舞臺
• remove(Scene) 將場景從舞臺移除
• clear() 將所有的場景從舞臺移除
• paint() 執行舞臺的重繪
• zoom(scale) 縮放
• zoomOut(scale) 放大
• zoomIn(scale) 縮小
• centerAndZoom(scale) 縮放並居中顯示所有元素
• toJson() 把當前對象的屬性序列化成json數據

事件：

• addEventListener(eventName, eventHandler) 監聽事件，evevtName取值有:click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag
• removeEventListener(eventName) 移除監聽事件，eventName取值同上
• removeAllEventListener 移除所有監聽事件
• click(eventHandler) 監聽鼠標單擊事件
• dbclick(eventHandler) 監聽鼠標雙擊事件
• mousedown(eventHandler) 監聽鼠標按下事件
• mouseup(eventHandler) 監聽鼠標鬆開事件
• mouseover(eventHandler) 監聽鼠標進入事件
• mouseout(eventHandler) 監聽鼠標離開事件
• mousemove(eventHandler) 監聽鼠標移動事件
• mousedrag(eventHandler) 監聽鼠標拖拽事件

2. 場景(Scene)：

屬性：

• alpha 場景透明度，0-1，默認爲0完全透明
• backgroundColor 背景顏色
• background 背景圖片，設置後覆蓋背景顏色設置
• visible 場景是否可見，默認爲true
• mode默認爲normal，【normal：可以點擊選中單個節點（按住Ctrl可以選中多個），點中空白處可以拖拽整個畫面；drag: 該模式下不可以選擇節點，只能拖拽整個畫面；select: 可以框選多個節點、可以點擊單個節點；edit: 在默認基礎上增加了：選中節點時可以通過6個控制點來調整節點的寬、高】
• scaleX x軸方向縮放比例，默認爲1
• scaleY y軸方向縮放比例，默認爲1
• selectedElements 當前場景中被選中的元素對象
• translateX 水平場景偏移量
• translateY 垂直場景偏移量

方法：

• show() 顯示
• hide() 隱藏
• add(element) 把element對象添加到場景
• remove(element) 移除場景中的element對象
• clear() 移除場景中的所有元素
• getDisplayedElement() 獲取場景中可見元素
• getDisplayedNodes() 獲取場景中可見的節點對象
• findElements(cond) 查找場景中的對象

事件：

• addEventListener(eventName, eventHandler) 監聽事件，evevtName取值有:click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag
• removeEventListener(eventName) 移除監聽事件，eventName取值同上
• removeAllEventListener 移除所有監聽事件
• click(eventHandler) 監聽鼠標單擊事件
• dbclick(eventHandler) 監聽鼠標雙擊事件
• mousedown(eventHandler) 監聽鼠標按下事件
• mouseup(eventHandler) 監聽鼠標鬆開事件
• mouseover(eventHandler) 監聽鼠標進入事件
• mouseout(eventHandler) 監聽鼠標離開事件
• mousemove(eventHandler) 監聽鼠標移動事件
• mousedrag(eventHandler) 監聽鼠標拖拽事件

3. 容器(Container)：

屬性：

• alpha 節點透明度，取值0-1
• borderColor 節點邊框顏色，rgb
• borderRadius 節點邊框圓角，任意數值，當不大於0時無圓角，當超過某一值時會導致節點變形
• borderWidth 節點邊框寬度，任意數值，默認爲0，當值爲負時邊框會進入到節點內
• childDragable 子對象可拖動，默認爲true
• dragable 可拖動，默認爲true
• elementType 元素類型，場景爲scene，容器爲container，節點爲node，連線爲link
• fillColor 節點顏色，默認爲22,124,255，當設置節點圖片後失效
• font 節點文本大小及字體，默認爲12px Consolas
• fontColor 節點文本顏色，rgb，默認爲255,255,255
• height 節點高度，默認爲32
• rotate 旋轉角度（順時針），值爲弧度
• scaleX x軸方向縮放比例，默認爲1
• scaleY y軸方向縮放比例，默認爲1
• selected 選中，默認爲false
• serializedProperties 屬性數組，可通過push方法添加自定義的屬性
• shadow 是否顯示陰影，默認爲false
• shadowBlur 模糊度，默認5
• shadowColor 陰影顏色，rgba，默認爲rgba(0,0,0,0.5)
• shadowOffsetX 陰影x軸偏移量，默認爲3
• shadowOffsetY 陰影y軸偏移量，默認爲6
• showSelected 顯示選中後的描邊，默認爲true
• strokeColor 描邊顏色，rgb，默認爲22,124,255
• text 節點文本
• textOffsetX 節點文本在x軸方向的偏移量
• textOffsetY 節點文本在y軸方向的偏移量
• textPosition 節點文本位置，默認爲Bottom_Center，取值爲Top,Middle,Bottom與Left,Right,Center的組合
• transformAble 是否可變行
• visible 是否可見，默認爲true
• width 節點寬度，默認爲32
• x 節點位置的x座標，以畫布左上角爲原點
• y 節點位置的y座標，以畫布左上角爲原點
• zIndex 圖層位置，值越大位置越靠上，默認容器Container爲1，連線Link爲2，節點Node爲3，範圍[10-999]

方法：

• add(element) 把element對象添加到容器
• remove(element) 移除場景中的element對象
• removeAll() 移除場景中的所有元素
• setLocation(x,y) 設置容器的座標

事件：

• addEventListener(eventName, eventHandler) 監聽事件，evevtName取值有:click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag
• removeEventListener(eventName) 移除監聽事件，eventName取值同上
• removeAllEventListener 移除所有監聽事件
• click(eventHandler) 監聽鼠標單擊事件
• dbclick(eventHandler) 監聽鼠標雙擊事件
• mousedown(eventHandler) 監聽鼠標按下事件
• mouseup(eventHandler) 監聽鼠標鬆開事件
• mouseover(eventHandler) 監聽鼠標進入事件
• mouseout(eventHandler) 監聽鼠標離開事件
• mousemove(eventHandler) 監聽鼠標移動事件
• mousedrag(eventHandler) 監聽鼠標拖拽事件

4. 節點(node):

分類：

• Node()默認節點，當不設置setImage時，默認顯示爲矩形
• TextNode()文字節點
• LinkNode()超鏈接節點
• CircleNode()圓形節點

屬性：

• _id 節點id，默認爲當前時間的時間戳
• alarm 警告文本
• alarmAlpha 警告文本的背景透明度，取值0-1
• alarmColor 警告文本的背景顏色，rgb，默認爲紅色
• alpha 節點透明度，取值0-1
• borderColor 節點邊框顏色，rgb
• borderRadius 節點邊框圓角，任意數值，當不大於0時無圓角，當超過某一值時會導致節點變形
• borderWidth 節點邊框寬度，任意數值，默認爲0，當值爲負時邊框會進入到節點內
• dragable 可拖動，默認爲true
• editable 可編輯，默認爲false，當爲true時可通過拖動改變大小，當點擊可編輯節點後點擊節點外時節點會變爲不可編輯
• elementType 元素類型，場景爲scene，容器爲container，節點爲node，連線爲link
• fillColor 節點顏色，默認爲22,124,255，當設置節點圖片後失效
• font 節點文本大小及字體，默認爲12px Consolas
• fontColor 節點文本顏色，rgb，默認爲255,255,255
• height 節點高度，默認爲32
• inLinks 進入此節點的連線數組
• isMouserOver鼠標是否進入，默認爲false
• messageBus 信息總線
• outLinks 從此節點發出的連線數組
• rotate 旋轉角度（順時針），值爲弧度
• scaleX x軸方向縮放比例，默認爲1
• scaleY y軸方向縮放比例，默認爲1
• selected 選中，默認爲false
• serializedProperties 屬性數組，可通過push方法添加自定義的屬性
• shadow 是否顯示陰影，默認爲false
• shadowBlur 模糊度，默認5
• shadowColor 陰影顏色，rgba，默認爲rgba(0,0,0,0.5)
• shadowOffsetX 陰影x軸偏移量，默認爲3
• shadowOffsetY 陰影y軸偏移量，默認爲6
• showSelected 顯示選中後的描邊，默認爲true
• strokeColor 描邊顏色，rgb，默認爲22,124,255
• text 節點文本
• textOffsetX 節點文本在x軸方向的偏移量
• textOffsetY 節點文本在y軸方向的偏移量
• textPosition 節點文本位置，默認爲Bottom_Center，取值爲Top,Middle,Bottom與Left,Right,Center的組合
• transformAble 是否可變行
• visible 是否可見，默認爲true
• width 節點寬度，默認爲32
• x 節點位置的x座標，以畫布左上角爲原點
• y 節點位置的y座標，以畫布左上角爲原點
• zIndex 圖層位置，值越大位置越靠上，默認容器Container爲1，連線Link爲2，節點Node爲3，範圍[10-999]

方法：

• setImage(url) 設置節點圖片
• setSize(width,height) 設置節點的寬、高
• getSize() 獲取節點的寬、高
• setBound(x,y,width,height) 設置節點的座標、寬、高
• getBound() 獲取節點的上下左右四邊的位置及寬、高
• setLocation(x,y) 設置節點在場景中的位置的座標（左上角）
• setCenterLocation(x,y) 設置節點在場景中的位置座標（中心）

事件：

• addEventListener(eventName, eventHandler) 監聽事件，evevtName取值有:click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag
• removeEventListener(eventName) 移除監聽事件，eventName取值同上
• removeAllEventListener 移除所有監聽事件
• click(eventHandler) 監聽鼠標單擊事件
• dbclick(eventHandler) 監聽鼠標雙擊事件
• mousedown(eventHandler) 監聽鼠標按下事件
• mouseup(eventHandler) 監聽鼠標鬆開事件
• mouseover(eventHandler) 監聽鼠標進入事件
• mouseout(eventHandler) 監聽鼠標離開事件
• mousemove(eventHandler) 監聽鼠標移動事件
• mousedrag(eventHandler) 監聽鼠標拖拽事件

5. 連線(Link):

分類：

• Link()默認連線，默認爲直線
• FoldLink() 折線
• FlexionalLink() 二次折線
• CurveLink() 曲線

屬性：

• _id 節點id，當不對其賦值時會自動賦值
• alpha 連線透明度，取值0-1
• arrowsOffset 箭頭偏移量，離開連線的距離，默認爲0
• arrowsRadius 箭頭大小，默認爲null
• borderColor 連線顏色，rgb，默認爲22,124,255
• bundleGap 線條之間的間隔，默認12
• bundleOffset 折線拐角處的長度，默認20
• dashedPattern 虛線中每段的長度，默認爲null
• dragable 可拖動，默認爲false
• elementType 元素類型，場景爲scene，容器爲container，連線爲node，連線爲link
• fillColor 連線顏色，默認爲22,124,255
• font 連線文本大小及字體，默認爲12px Consolas
• fontColor 連線文本顏色，rgb，默認爲255,255,255
• isMouserOver 鼠標是否進入，默認爲false
• lineJoin ，默認miter
• lineWidth 連線寬度，默認2
• nodeA 起始節點
• nodeIndex 默認爲0，改變後會影響連線之間的間距及形狀
• nodeZ 終止節點
• path 連線路徑數組
• rotate 旋轉角度（順時針），值爲弧度
• scaleX x軸方向縮放比例，默認爲1
• scaleY y軸方向縮放比例，默認爲1
• selected 選中，默認爲false
• serializedProperties 屬性數組，可通過push方法添加自定義的屬性
• shadow 是否顯示陰影，默認爲false
• shadowBlur 模糊度，默認5
• shadowColor 陰影顏色，rgba，默認爲rgba(0,0,0,0.5)
• shadowOffsetX 陰影x軸偏移量，默認爲3
• shadowOffsetY 陰影y軸偏移量，默認爲6
• showSelected 顯示選中後的描邊，默認爲true
• strokeColor 描邊顏色，rgb，默認爲22,124,255
• text 連線文本
• textOffsetX 連線文本在x軸方向的偏移量
• textOffsetY 連線文本在y軸方向的偏移量
• transformAble 是否可變行
• visible 是否可見，默認爲true
• zIndex 圖層位置，值越大位置越靠上，默認容器Container爲1，連線Link爲2，節點Node爲3，範圍[10-999]

方法：

• getEndPosition() 得到終點位置
• getStartPosition() 得到起點位置
• getPath() 得到path數組

事件：

• addEventListener(eventName, eventHandler) 監聽事件，evevtName取值有:click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag
• removeEventListener(eventName) 移除監聽事件，eventName取值同上
• removeAllEventListener 移除所有監聽事件
• click(eventHandler) 監聽鼠標單擊事件
• dbclick(eventHandler) 監聽鼠標雙擊事件
• mousedown(eventHandler) 監聽鼠標按下事件
• mouseup(eventHandler) 監聽鼠標鬆開事件
• mouseover(eventHandler) 監聽鼠標進入事件
• mouseout(eventHandler) 監聽鼠標離開事件
• mousemove(eventHandler) 監聽鼠標移動事件
• mousedrag(eventHandler) 監聽鼠標拖拽事件

主要參數及方法

• zIndex_Container: 1//默認容器圖層
• zIndex_Link: 2//默認連線圖層
• zIndex_Node: 3//默認節點圖層

對象

• Stage
  • 用法:new JTopo.Stage(a)創建舞臺
  • 參數:canvasDOM對象
  • 結果:Stage舞臺對象
• Scene
  • 用法:new JTopo.Scene(a)創建場景
  • 參數:Stage舞臺對象
  • 結果:Scene場景對象
• Container
  • 用法:new JTopo.Container(a)創建容器
  • 參數:[節點文本]
  • 結果:Container容器對象

節點

• AnimateNode//動畫節點
  • 用法:new JTopo.AnimateNode()
  • 參數:無
  • 結果:
• CircleNode//圓形節點
  • 用法:new JTopo.CircleNode(a)
  • 參數:[節點文本]
  • 結果:
• LinkNode//超鏈接節點
  • 用法:new JTopo.LinkNode(a,b,c)
  • 參數:節點文本，URL，[頁面打開位置]
  • 結果:
• Node//普通節點
  • 用法:new JTopo.Node(a)
  • 參數:[節點文本]
  • 結果:
• TextNode//文本節點
  • 用法:new JTopo.TextNode(a)
  • 參數:節點文本
  • 結果:
• BarChartNode//柱狀圖
  • 用法:new JTopo.BarChartNode()
  • 參數:無
  • 結果:
• PieChartNode//餅圖
  • 用法:new JTopo.PieChartNode()
  • 參數:無
  • 結果:

連線

• CurveLink//曲線
  • 用法:new JTopo.CurveLink(a,b,c)
  • 參數:起始節點，終止節點，[連線文本]
  • 結果:
• FlexionalLink//二次折線
  • 用法:new JTopo.FlexionalLink(a,b,c)
  • 參數:起始節點，終止節點，[連線文本]
  • 結果:
• FoldLink//折線
  • 用法:new JTopo.FoldLink(a,b,c)
  • 參數:起始節點，終止節點，[連線文本]
  • 結果:
• Link//直線
  • 用法:new JTopo.Link(a,b,c)
  • 參數:起始節點，終止節點，[連線文本]
  • 結果:

從JSON中創建整個拓撲

• createStageFromJson
  • 用法:JTopo.createStageFromJson(jsonStr, canvas)
  • 參數:JSON字符串，canvasDOM對象
  • 結果:

旋轉動畫

• rotate//自旋
  • 用法:JTopo.Animate.rotate(a,b).run()
  • 參數:需要自旋的節點，canvasDOM對象/Stage舞臺對象/Scene場景對+ 象/Container容器對象
    結果:
• stepByStep
  • 用法:JTopo.Animate.rotate(a,b,c,d,e).start()
  • 參數:節點，動作方式，動作間隔，是否循環，[是否往復(默認false)]
  • 結果:

佈局方式

• AutoBoundLayout

  • 用法:
  • 參數:
  • 結果:佈局方式

• CircleLayout

  • 用法:
  • 參數:
  • 結果:佈局方式

• FlowLayout

  • 用法:
  • 參數:
  • 結果:佈局方式

• GridLayout

  • 用法:
  • 參數:
  • 結果:佈局方式

• TreeLayout

  • 用法:JTopo.layout.TreeLayout(a,b,c)
  • 參數:佈局方向(down,up,right,left)，葉子節點間距，父子節點間距
  • 結果:佈局方式

• springLayout

  • 用法:
  • 參數:
  • 結果:佈局方式

• layoutNode

  • 用法:JTopo.layout.layoutNode(scene, rootNode, true)
  • 參數:場景，根節點，是否多層
  • 結果:

• adjustPosition

  • 用法:
  • 參數:
  • 結果:

• circleLayoutNodes

  • 用法:
  • 參數:
  • 結果:

• getNodeChilds

  • 用法:
  • 參數:
  • 結果:

• getNodesCenter

  • 用法:
  • 參數:
  • 結果:

• getRootNodes

  • 用法:
  • 參數:
  • 結果:

• getTreeDeep

  • 用法:
  • 參數:
  • 結果:

從JSON中創建舞臺

• loadStageFromJson
  • 用法:JTopo.util.loadStageFromJson(jsonStr,canvas)
  • 參數:JSON字符串，canvasDOM對象
  • 結果:

其他方法

• randomColor//獲得隨機顏色
  • 用法:JTopo.util.randomColor()
  • 參數:
  • 結果:
• removeFromArray//從數組a中移除b
  • 用法:JTopo.util.removeFromArray(a,b)
  • 參數:數組a，元素b
  • 結果:
• toJson//把舞臺中所有對象輸出爲字符串
  • 用法:JTopo.util.toJson(stage)
  • 參數:Stage舞臺對象
  • 結果:
• isChrome//判斷瀏覽器類型
  • 用法:JTopo.util.isChrome
  • 結果:true/false
• isF+ irefox//判斷瀏覽器類型
  • 用法:JTopo.util.isFirefox
  • 結果:true/false
• isI+ E//判斷瀏覽器類型
  • 用法:JTopo.util.isIE
  • 結果:true/false
• isP+ ointInLine//鼠標是否指向連線
  • 用法:JTopo.util.isPointInLine
  • 參數:a, b, c
  • 結果:
• isPointInRect//鼠標是否指向矩形（？？節點）
  • 用法:JTopo.util.isPointInRect
  • 參數:a, b
  • 結果: