翻譯|使用教程|編輯:吳園園|2019-11-26 09:38:58.623|閱讀 2019 次
概述:可以靈活地精確控制鏈接連接到節(jié)點(diǎn)的方式和位置。在前面的示例中,鏈接始終在節(jié)點(diǎn)的邊緣結(jié)束。但是,您可以在鏈接終止的節(jié)點(diǎn)上指定Spot。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
GoJS是一款功能強(qiáng)大,快速且輕量級(jí)的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。
GoJS現(xiàn)已更新至最新版本2.1發(fā)布,添加了動(dòng)畫(huà)功能,修復(fù)了一些bug,增強(qiáng)用戶體驗(yàn),趕快下載試試吧~
節(jié)點(diǎn)上的鏈接連接點(diǎn)
可以靈活地精確控制鏈接連接到節(jié)點(diǎn)的方式和位置。在前面的示例中,鏈接始終在節(jié)點(diǎn)的邊緣結(jié)束。但是,您可以在鏈接終止的節(jié)點(diǎn)上指定Spot。
非矩形節(jié)點(diǎn)
當(dāng)節(jié)點(diǎn)不具有矩形形狀時(shí),默認(rèn)情況下,鏈接將在指向節(jié)點(diǎn)中心的線與節(jié)點(diǎn)邊緣相交的地方結(jié)束。
這是一個(gè)演示-拖動(dòng)其中一個(gè)節(jié)點(diǎn),觀察鏈接如何始終連接到最近的交叉點(diǎn)或節(jié)點(diǎn)的中心。該示例在鏈接的兩端都包括箭頭,以明確表明鏈接路由實(shí)際上恰好在節(jié)點(diǎn)的邊緣結(jié)束。
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { width: 90, height: 90,
        selectionAdorned: false },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "FivePointedStar", { fill: "lightgray" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape,   // the "from" end arrowhead
        { fromArrow: "Chevron" }),
      $(go.Shape,   // the "to" end arrowhead
        { toArrow: "StretchedDiamond", fill: "red" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
ToSpot和FromSpot
您可以輕松地要求鏈接在節(jié)點(diǎn)范圍內(nèi)的特定點(diǎn)處結(jié)束,而不是在最近的邊緣相交處結(jié)束。將GraphObject.toSpot設(shè)置為Spot.None以外的Spot值, 以使進(jìn)入節(jié)點(diǎn)的鏈接終止于節(jié)點(diǎn)內(nèi)的該點(diǎn),其方向適合于該點(diǎn)所在的一側(cè)。同樣,將GraphObject.fromSpot設(shè)置為從節(jié)點(diǎn)出來(lái)的鏈接的末端。
以下示例均顯示相同的圖,但使用不同的模板來(lái)演示鏈接如何連接到節(jié)點(diǎn)。他們都調(diào)用此通用函數(shù)來(lái)定義一些節(jié)點(diǎn)和鏈接。
function makeGraph(diagram) {
  var $ = go.GraphObject.make;
 
  diagram.layout =
    $(go.LayeredDigraphLayout,  // this will be discussed in a later section
      { columnSpacing: 5,
        setsPortSpots: false });
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
  ];
  var linkDataArray = [
    { from: "Beta", to: "Alpha" },
    { from: "Gamma", to: "Alpha" },
    { from: "Delta", to: "Alpha" },
    { from: "Alpha", to: "Epsilon" },
    { from: "Alpha", to: "Zeta" },
    { from: "Alpha", to: "Eta" },
    { from: "Alpha", to: "Theta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}讓我們指定進(jìn)入節(jié)點(diǎn)的鏈接在左側(cè)的中間連接,而離開(kāi)節(jié)點(diǎn)的鏈接在右側(cè)的中間連接。這種約定適用于對(duì)它們具有一般方向感的圖,例如下圖從左到右。
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.Right,  // coming out from middle-right
        toSpot: go.Spot.Left },   // going into at middle-left
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);
您還可以指定鏈接不進(jìn)入單個(gè)節(jié)點(diǎn)而是沿一側(cè)展開(kāi)。代替Spot.Right使用Spot.RightSide,并且類似地用于左側(cè)。
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.RightSide,  // coming out from right side
        toSpot: go.Spot.LeftSide },   // going into at left side
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);
當(dāng)然,只有當(dāng)節(jié)點(diǎn)基本上是矩形時(shí),這才看起來(lái)不錯(cuò)。
您可以使用另一種Link.routing:
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.RightSide,  // coming out from right side
        toSpot: go.Spot.LeftSide },   // going into at left side
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal,  // Orthogonal routing
        corner: 10 },                 // with rounded corners
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);
或者,您可以使用另一種Link.curve:
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.RightSide,  // coming out from right side
        toSpot: go.Spot.LeftSide },   // going into at left side
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { curve: go.Link.Bezier },  // Bezier curve
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);
但是您需要謹(jǐn)慎指定圖形的排列方式。
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.TopSide,    // coming out from top side -- BAD!
        toSpot: go.Spot.RightSide },  // going into at right side -- BAD!
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);
 
  diagram.add($(go.Part,  // this is just a comment
                { location: new go.Point(300, 50) },
                $(go.TextBlock, "Bad Spots",
                  { font: "16pt bold", stroke: "red" })
              ));
=====================================================
想要購(gòu)買GoJS正版授權(quán)的朋友可以。
更多精彩內(nèi)容,歡迎關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼

本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: