GoJS入門筆記（1）

tylin 發(fā)布于2019-08-23 14:08 / 940人閱讀

摘要：能干什么，廢話不多說，進(jìn)傳送門看看。在中，我們可以在中設(shè)置控件與控件之間的關(guān)系有點不同使用方法使用第六步樣式通過設(shè)置連接線的樣式?jīng)]有箭頭連接線樣式箭頭樣式運行結(jié)果

GoJS能干什么，廢話不多說，進(jìn)傳送門看看。傳送門

第一步：Hello World!

第二步：圖像和模型

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

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

生成三個可拖拽的對象

單擊并拖動上圖中的背景以平移視圖

單擊一個節(jié)點來選擇它，或者按下并拖動一個節(jié)點來移動它

使用CTRL-C和CTRL-V 或按住CTRL然后控件拖放來復(fù)制

用Delete鍵刪除選中控件, 戳我查看更多快捷鍵

如果撤消管理器已啟用，CTRL-Z撤銷操作,CTRL-Y恢復(fù)操作

第三步：節(jié)點樣式 - nodeTemplate

我們可以修改節(jié)點的樣式種類：

形狀: Shape

文本塊: TextBlock

圖片: Picture

容器面板: Panel

// 使用介紹 
// 第一個參數(shù) go.Node，由面板和本身的其他節(jié)點本身的其他圖形對象組成
// 第二個參數(shù) "Auto", 對應(yīng)面板的類型，
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    // 然后將元素定義在這個面班中：Shap,TextBlock等
    
    $(go.TextBlock,
      // TextBlock的內(nèi)容和節(jié)點數(shù)據(jù)對象中的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",
            // 整個控件是藍(lán)色背景
            { background: "#44CCFF" },
            
            $(go.Picture,
                // 通常情況下，圖片需要有明確的寬度。當(dāng)沒有設(shè)置圖片路徑 或者 圖片是透明的時候會顯示紅色背景，
                { 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"))   // 綁定數(shù)據(jù)的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;

運行結(jié)果：

第四步: 其他種類的模型

  如果我們想要實現(xiàn)圖像模型之間的聯(lián)系，基礎(chǔ)模型是滿足不了我們的需求的，我們看看其他的模型吧。
  (GraphLinksModel and TreeModel)

1. GraphLinksModel

在GraphLinksModel中，我們可以在model.linkDataArray中設(shè)置控件與控件之間的關(guān)系

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有點不同

// 使用方法
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設(shè)置連接線的樣式

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;

運行結(jié)果

GPU云服務(wù)器云服務(wù)器 java開發(fā)入門筆記 GoJS 兼容筆記印象筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100144.html

發(fā)表評論

登陸后可評論

0條評論

tylin

男|高級講師

我要關(guān)注我要私信

TA的文章

鴻蒙學(xué)習(xí)筆記之創(chuàng)建項目

閱讀 1710·2021-11-24 09:39
中文NER的那些事兒5. Transformer相對位置編碼&TENER代碼實現(xiàn)

閱讀 2491·2021-11-18 10:07
【MSDN】Windows Server 2022服務(wù)器版20348.169簡體中文、英文版2021

閱讀 3674·2021-08-31 09:40
flex布局遇到white-space:nowrap怎么超出一行顯示省略號

閱讀 3345·2019-08-30 15:44
簡單介紹 CSS Variables

閱讀 2639·2019-08-30 12:50
NPM酷庫：jsdom，純JS實現(xiàn)的DOM

閱讀 3661·2019-08-26 17:04
【前端早讀會】每天記錄前端學(xué)習(xí)的過程

閱讀 1437·2019-08-26 13:49
前端每日實戰(zhàn) 169# 視頻演示如何制作“數(shù)略詞”交互動畫（內(nèi)含2個視頻）

閱讀 1271·2019-08-23 18:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

GoJS入門筆記（1）

相關(guān)文章

GoJS 繪圖 (一) ：入門

GoJS 繪圖 (十) ：鏈接（完結(jié)）

筆記, 若干個流程圖前端類庫

記一次繪圖框架技術(shù)選型: jsPlumb VS mxGraph

記一次繪圖框架技術(shù)選型: jsPlumb VS mxGraph

發(fā)表評論

0條評論

tylin

男|高級講師

TA的文章

鴻蒙學(xué)習(xí)筆記之創(chuàng)建項目

中文NER的那些事兒5. Transformer相對位置編碼&TENER代碼實現(xiàn)

【MSDN】Windows Server 2022服務(wù)器版20348.169簡體中文、英文版2021

flex布局遇到white-space:nowrap怎么超出一行顯示省略號

簡單介紹 CSS Variables

NPM酷庫：jsdom，純JS實現(xiàn)的DOM

【前端早讀會】每天記錄前端學(xué)習(xí)的過程

前端每日實戰(zhàn) 169# 視頻演示如何制作“數(shù)略詞”交互動畫（內(nèi)含2個視頻）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

GoJS入門筆記（1）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！