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

資訊專(zhuān)欄INFORMATION COLUMN

GoJS 繪圖 (四) ：構(gòu)建節(jié)點(diǎn)與GraphObjects

jokester / 1119人閱讀

摘要：你可以構(gòu)建一個(gè)節(jié)點(diǎn)或其類(lèi)型的代碼。以下將討論基本類(lèi)型，你可以用它來(lái)建立一個(gè)節(jié)點(diǎn)對(duì)象。這些頁(yè)面通過(guò)明確創(chuàng)建和添加節(jié)點(diǎn)和鏈路建立的示意圖。一個(gè)非常簡(jiǎn)單的節(jié)點(diǎn)由一個(gè)與構(gòu)成。雖然以這種方式構(gòu)建的節(jié)點(diǎn)將工作變得更加復(fù)雜的代碼將變得更加難以閱讀和維護(hù)。

你可以構(gòu)建一個(gè)節(jié)點(diǎn)或其類(lèi)型的JavaScript代碼。
以下將討論基本類(lèi)型，你可以用它來(lái)建立一個(gè)節(jié)點(diǎn)對(duì)象。這些頁(yè)面通過(guò)明確創(chuàng)建和添加節(jié)點(diǎn)和鏈路建立的示意圖。以下頁(yè)面將展示如何使用模型，而不是使用這些代碼來(lái)構(gòu)建圖表。

傳統(tǒng)方式

一個(gè)GraphObject是可以被構(gòu)造和任何其他對(duì)象以相同的方式初始化的JavaScript對(duì)象。一個(gè)節(jié)點(diǎn)是一個(gè)GraphObject包含TextBlocks，shapes，Pictures和Panels。

一個(gè)非常簡(jiǎn)單的節(jié)點(diǎn)由一個(gè)shape與TextBlock構(gòu)成。使用原始方式：

var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "#394";
node.add(shape);
var textBlock = new go.TextBlock();
textBlock.text = "Hello!";
textBlock.margin = 5;
textBlock.editable = true;
node.add(textBlock);
diagram.add(node);

這是一個(gè)可以移動(dòng)的圖表，而不是一個(gè)屏幕顯示圖像，因此您可以單擊該節(jié)點(diǎn)來(lái)選擇它，然后拖動(dòng)。
雖然以這種方式構(gòu)建的節(jié)點(diǎn)將工作變得更加復(fù)雜的代碼將變得更加難以閱讀和維護(hù)。幸運(yùn)的是GoJS有一個(gè)更好的方式GraphObject。
此外，后面的章節(jié)將討論如何節(jié)點(diǎn)和鏈接會(huì)使用自動(dòng)模型，模板創(chuàng)建，且數(shù)據(jù)綁定。直到那個(gè)時(shí)候，這些頁(yè)面將明確創(chuàng)建節(jié)點(diǎn)并將它們添加到圖表。

GraphObject.make

GoJS定義靜態(tài)函數(shù)GraphObject.make，這個(gè)靜態(tài)函數(shù)生成對(duì)象賦予其類(lèi)，并提供初始屬性或其他參數(shù)GraphObject S中的成為面板元素。
GraphObject.make是一個(gè)函數(shù)的第一個(gè)參數(shù)必須是一個(gè)類(lèi)類(lèi)型。通常是
一個(gè)字符串，它設(shè)定了TextBlock.text，Shape.figure，Picture.source或Panel.type
我們可以重寫(xiě)上面的代碼使用go.GraphObject.make產(chǎn)生完全相同的結(jié)果

var G = go.GraphObject.make;
diagram.add(G(
    go.Node,
    go.Panel.Auto,
    G(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#394"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "Hello!",
            margin: 5,
            editable: true
        }
    )
));

這可以通過(guò)使用字符串參數(shù)來(lái)簡(jiǎn)化一下：

diagram.add(G(
    go.Node,
    "Auto",
    G(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#394"
        }
    ),
    G(
        go.TextBlock,
        "Hello!",
        {
            margin: 5,
            editable: true
        }
    )
));

所有使用GraphObject.make初始化仍然是JavaScript代碼，所以我們可以調(diào)用函數(shù)和共享對(duì)象，如樣式：

var style = {
    width: 55,
    height: 30,
    margin: 5,
    fill: "#555"
}
diagram.add(G(
    go.Node,
    "Auto",
    G(
        go.Shape,
        "RoundedRectangle",
        style
    ),
    G(
        go.TextBlock,
        {
            text: "xy1"
        }
    )
));

diagram.add(G(
    go.Node,
    "Auto",
    G(
        go.Shape,
        "Rectangle",
        style
    ),
    G(
        go.TextBlock,
        {
            text: "xy2"
        }
    )
));

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

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

相關(guān)文章

  • GoJS 繪圖 (八) ：模型和模版

    摘要：下面是這樣做的一種方式使用模型和模板事實(shí)上，圖已經(jīng)為節(jié)點(diǎn)和鏈接非常簡(jiǎn)單的默認(rèn)模板。該特定節(jié)點(diǎn)的數(shù)據(jù)已投入對(duì)象的數(shù)組。因此，我們需要替換節(jié)點(diǎn)模版。數(shù)據(jù)綁定數(shù)據(jù)綁定是一種聲明聲明一個(gè)對(duì)象的屬性值應(yīng)該用于設(shè)置另一個(gè)對(duì)象的屬性值。 使用模版構(gòu)視圖 讓我們嘗試建立兩個(gè)節(jié)點(diǎn)，將它們與一個(gè)鏈接連接。下面是這樣做的一種方式： var node1 = g( go.Node, Auto, ...

    Hanks10100 評(píng)論0 收藏0

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

    摘要：非定向鏈接最簡(jiǎn)單的鏈接沒(méi)有箭頭指示方向。該模板只包含一個(gè)形狀為主要元素，因?yàn)檫@是在節(jié)點(diǎn)之間繪制的線(xiàn)條。鏈接的路線(xiàn)被計(jì)算后將得到一個(gè)路徑的點(diǎn)?？梢院苋菀椎亟⒎较?，只需添加一個(gè)形狀并設(shè)置其屬性。目前也就只能先寫(xiě)這么多吧入門(mén)的話(huà)問(wèn)題不大了 非定向鏈接 最簡(jiǎn)單的鏈接沒(méi)有箭頭指示方向。該模板只包含一個(gè)形狀為主要元素，因?yàn)檫@是在節(jié)點(diǎn)之間繪制的線(xiàn)條。鏈接的路線(xiàn)被計(jì)算后將得到一個(gè)路徑的點(diǎn)。 diag...

    Rocko 評(píng)論0 收藏0

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

    摘要：公司項(xiàng)目需要用到繪圖框架，繪圖部分以前是另一位同事負(fù)責(zé)，用的是框架?；谝陨咸峒暗降姆N種原因，上年年末我做起了技術(shù)調(diào)研，希望能找到一個(gè)合適我們項(xiàng)目的繪圖框架。兼容性問(wèn)題項(xiàng)目對(duì)瀏覽器兼容性比較寬松，瀏覽器兼容性問(wèn)題不在考慮范圍之內(nèi)。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

    longmon 評(píng)論0 收藏0

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

    摘要：公司項(xiàng)目需要用到繪圖框架，繪圖部分以前是另一位同事負(fù)責(zé)，用的是框架?；谝陨咸峒暗降姆N種原因，上年年末我做起了技術(shù)調(diào)研，希望能找到一個(gè)合適我們項(xiàng)目的繪圖框架。兼容性問(wèn)題項(xiàng)目對(duì)瀏覽器兼容性比較寬松，瀏覽器兼容性問(wèn)題不在考慮范圍之內(nèi)。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

    channg 評(píng)論0 收藏0

  • GoJS 繪圖 (九) ：數(shù)據(jù)綁定

    摘要：綁定字符串和數(shù)字特性綁定數(shù)據(jù)的屬性。轉(zhuǎn)換功能你可以通過(guò)轉(zhuǎn)換函數(shù)的第三個(gè)參數(shù)綁定構(gòu)造函數(shù)。允許位置字符串的形式來(lái)指定，而不是作為一個(gè)表達(dá)式的點(diǎn)。轉(zhuǎn)換函數(shù)可以是命名或匿名函數(shù)。他們把數(shù)據(jù)屬性值作為參數(shù)，并返回適用于正在設(shè)置該屬性的值。 綁定字符串和數(shù)字特性 綁定GraphObject數(shù)據(jù)的屬性。在這個(gè)例子中，我們不僅綁定TextBlock.text和Shape.fill中的節(jié)點(diǎn)到節(jié)點(diǎn)數(shù)據(jù)的...

    fobnn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jokester

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<