GoJS入門筆記(1)

GoJS能幹什麼,廢話很少說,進傳送門看看。 傳送門

第一步:Hello World!

<html>
<head>
    <!-- 引用GoJS  -->
    <script src="go-debug.js"></script>
</head>
<body>
    <!-- 每個圖型都要包含在HTML中有明確大小的<div>裏 -->
    <div id="myDiagramDiv" style="width:800px; height:500px; background-color: #DAE4E4;"></div>
    
    <script>
        // 若是用了jQuery等其餘庫或框架,這裏$會有衝突,在這裏換成 $$/MAKE/GO等
        var $ = go.GraphObject.make;
        
        // JS中經過div的id來製做圖標
        var myDiagram =
            $(go.Diagram, "myDiagramDiv", {
                "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
            });

    </script>
</body>
</html>

第二步:圖像和模型

var $ = go.GraphObject.make;
    var myDiagram =
        $(go.Diagram, "myDiagramDiv", {
            "undoManager.isEnabled": true // CTRL-Z撤銷操做,CTRL-Y恢復操做
        });

    // 新建模型
    var myModel = $(go.Model);
    
    // 在模型數據中,每一個節點由JavaScript對象表示
    myModel.nodeDataArray = [
        { key: "Alpha" },
        { key: "Beta" },
        { key: "Gamma" }
    ];
    myDiagram.model = myModel;

生成三個可拖拽的對象html

生成三個可拖拽的對象

  • 單擊並拖動上圖中的背景以平移視圖
  • 單擊一個節點來選擇它,或者按下並拖動一個節點來移動它
  • 使用CTRL-C和CTRL-V 或 按住CTRL而後控件拖放來複制
  • 用Delete鍵刪除選中控件, 戳我查看更多快捷鍵
  • 若是撤消管理器已啓用,CTRL-Z撤銷操做,CTRL-Y恢復操做

第三步:節點樣式 - nodeTemplate

咱們能夠修改節點的樣式種類:node

  • 形狀: Shape
  • 文本塊: TextBlock
  • 圖片: Picture
  • 容器面板: Panel
// 使用介紹 
// 第一個參數 go.Node,由面板和自己的其餘節點自己的其餘圖形對象組成
// 第二個參數 'Auto', 對應面板的類型,
myDiagram.nodeTemplate =
  $(go.Node, 'Auto',
    // 而後將元素定義在這個面班中:Shap,TextBlock等
    
    $(go.TextBlock,
      // TextBlock的內容和節點數據對象中的key綁定
      new go.Binding("text", "key"))
  );

var model = $(go.Model);

model.nodeDataArray =
[
  { key: "text", source: "cat1.png" }
];
myDiagram.model = model;

代碼示例:框架

var $ = go.GraphObject.make;
    var myDiagram =
        $(go.Diagram, "myDiagramDiv", {
            "undoManager.isEnabled": true 
        });

    myDiagram.nodeTemplate =
        $(go.Node, "Horizontal",
            // 整個控件是藍色背景
            { background: "#44CCFF" },
            
            $(go.Picture,
                // 一般狀況下,圖片須要有明確的寬度。當沒有設置圖片路徑 或者 圖片是透明的時候會顯示紅色背景,
                { margin: 10, width: 50, height: 50, background: "red" },
                new go.Binding("source")),
                
            $(go.TextBlock,
                "Default Text", 
                { margin: 12,  stroke: "white", font: "bold 16px sans-serif" }, // 初始化文本樣式
                
                new go.Binding("text", "name"))   // 綁定數據的key
        );

    var model = $(go.Model);
    model.nodeDataArray = [ 
        {
            name: "Don Meow",
            source: "1.png"
        },
        {
            name: "Copricat",
            source: "2.png"
        },
        {
            name: "Demeter",
            source: "3.png"
        },
        { /* Empty node data */ }
    ];
    myDiagram.model = model;

運行結果:
圖片描述spa

第四步: 其餘種類的模型

若是咱們想要實現圖像模型之間的聯繫,基礎模型是知足不了咱們的需求的,咱們看看其餘的模型吧。
  (GraphLinksModel and TreeModel)

1. GraphLinksModel.net

在GraphLinksModel中,咱們能夠在model.linkDataArray中設置控件與控件之間的關係
var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B" },
  { key: "C" }
];
model.linkDataArray =
[
  { from: "A", to: "B" },
  { from: "B", to: "C" }
];
myDiagram.model = model;

2. TreeModel
TreeModel有點不一樣debug

// 使用方法
var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;
// TreeModel使用
var model = $(go.TreeModel);
model.nodeDataArray =
[ 
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;

圖片描述

第六步:Link 樣式 - linkTemplate

// 經過linkTemplate設置鏈接線的樣式

myDiagram.linkTemplate =
 $(go.Link, 
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // 沒有箭頭
    /*
        $(go.Shape, {strokeWidth:2},
          new go.Binding("stroke", "color")  // 鏈接線樣式
        ),
        $(go.Shape, {toArrow: "Standard", stroke:null},   // 箭頭樣式
          new go.Binding("fill", "color")
        )
    */
  );
var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
運行結果

linkTemplate 運行結果

相關文章
相關標籤/搜索