流程圖控件GoJS教程：如何創(chuàng)建網(wǎng)格圖案

---

GoJS是一款功能強(qiáng)大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

通常要顯示以規(guī)則間隔繪制的線條網(wǎng)格。您可能還需要強(qiáng)制將拖動的零件在網(wǎng)格點(diǎn)上對齊，并將零件的大小調(diào)整為網(wǎng)格像元大小的倍數(shù)。

網(wǎng)格是使用Panel，Panel，Grid的類型實(shí)現(xiàn)的。與大多數(shù)其他類型的面板一樣，網(wǎng)格面板可以在Node或任何其他類型的Part中使用。但是，當(dāng)將它們用作Diagram.grid時，它們的范圍實(shí)際上是無限的。
與其他面板不同，網(wǎng)格面板元素必須是Shape，僅用于控制繪制網(wǎng)格線或網(wǎng)格條的方式。
默認(rèn)網(wǎng)格

要在圖的背景中顯示網(wǎng)格圖案，只需使Diagram.grid可見即可：

  diagram.grid.visible = true ;

  diagram.nodeTemplate =
    $（go.Node，“ Auto”，
      $（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
      $（go.TextBlock，{ margin：5 }，
         new go.Binding（“ text”，“ key”））
    ）;
  var nodeDataArray = [
    { key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
  ];diagram.model 
  = new go.GraphLinksModel（nodeDataArray）;

網(wǎng)格捕捉

如果將DraggingTool.isGridSnapEnabled和/或ResizingTool.isGridSnapEnabled屬性設(shè)置為true ，DraggingTool和ResizingTool可以根據(jù)背景網(wǎng)格圖案更改其行為。

將DraggingTool.isGridSnapEnabled 設(shè)置為true不會影響斷開的鏈接，但是如果您在鏈接模板上定義了自定義的Part.dragComputation可以將其斷開。

  diagram.grid.visible = true ;
  diagram.toolManager.draggingTool.isGridSnapEnabled = true ;
  diagram.toolManager.resizingTool.isGridSnapEnabled = true ;


  diagram.nodeTemplate =
    $（go.Node，“ Auto”，
      { resizable：true }，
      $（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
      $（go.TextBlock，{ margin：5 }，
         new go.Binding（“ text”，“ key”））
    ）;
  var nodeDataArray = [
    { key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
  ];diagram.model 
  = new go.GraphLinksModel（nodeDataArray）;

簡單的網(wǎng)格定制

您可以通過設(shè)置Panel.gridCellSize來更改網(wǎng)格單元的大小：

  diagram.grid.visible = true ;
  diagram.grid.gridCellSize = 新 go.Size（30，20）;
  diagram.toolManager.draggingTool.isGridSnapEnabled = true ;
  diagram.toolManager.resizingTool.isGridSnapEnabled = true ;


  diagram.nodeTemplate =
    $（go.Node，“ Auto”，
      { resizable：true }，
      $（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
      $（go.TextBlock，{ margin：5 }，
         new go.Binding（“ text”，“ key”））
    ）;
  var nodeDataArray = [
    { key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
  ];diagram.model 
  = new go.GraphLinksModel（nodeDataArray）;

在拖動過程中捕捉零件位置時使用的像元大小不必與背景網(wǎng)格的像元大小完全相同。值DraggingTool.gridSnapCellSize優(yōu)先于Panel.gridCellSize。請注意，如果DraggingTool.gridSnapCellSize設(shè)置，但ResizingTool.cellSize不是，零部件將調(diào)整時所使用的DraggingTool.gridSnapCellSize值。

  diagram.grid.visible = true ;
  diagram.toolManager.draggingTool.isGridSnapEnabled = true ;
  diagram.toolManager.resizingTool.isGridSnapEnabled = true ;

  //捕捉到每隔一個點(diǎn)垂直和水平
  //（默認(rèn)背景網(wǎng)格具有10×10的單元尺寸） 
  diagram.toolManager.draggingTool.gridSnapCellSize = 新 go.Size（20，20）;


  diagram.nodeTemplate =
    $（go.Node，“ Auto”，
      { resizable：true }，
      $（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
      $（go.TextBlock，{ margin：5 }，
         new go.Binding（“ text”，“ key”））
    ）;
  var nodeDataArray = [
    { key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
  ];diagram.model 
  = new go.GraphLinksModel（nodeDataArray）;

自定義網(wǎng)格

當(dāng)Panel類的Panel.type為時， 網(wǎng)格模式由Panel類實(shí)現(xiàn)面板網(wǎng)格。網(wǎng)格面板的元素必須是Shape，其Shape.figure是一小套已知種類的圖形之一。它只能接受的數(shù)字是：“ LineH”，“ LineV”，“ BarH”和“ BarV”。這兩個“線”圖形導(dǎo)致將網(wǎng)格單元分開的描邊線。這兩個“條形圖”圖形在網(wǎng)格單元中產(chǎn)生填充的矩形。
這是由藍(lán)色水平線和綠色垂直線組成的簡單網(wǎng)格：

  diagram.grid =
    $(go.Panel, go.Panel.Grid,  // or "Grid"
      { gridCellSize: new go.Size(25, 25) },
      $(go.Shape, "LineH", { stroke: "blue" }),
      $(go.Shape, "LineV", { stroke: "green" })
    );

該Shape.interval屬性也使用由網(wǎng)格面板，以確定線的具體頻繁應(yīng)當(dāng)制定。該值應(yīng)為正整數(shù)，指定此特定線的圖形之間有多少個像元。因此，如果您想要每五個單元格深藍(lán)色和深綠色線條：

  diagram.grid =
    $(go.Panel, "Grid",
      { gridCellSize: new go.Size(10, 10) },
      $(go.Shape, "LineH", { stroke: "lightblue" }),
      $(go.Shape, "LineV", { stroke: "lightgreen" }),
      $(go.Shape, "LineH", { stroke: "blue", interval: 5 }),
      $(go.Shape, "LineV", { stroke: "green", interval: 5 })
      );


  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { resizable: true },
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock, { margin: 5},
        new go.Binding("text", "key"))
    );
  var nodeDataArray = [
    { key: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray);

請注意，這些形狀是按照它們在面板中出現(xiàn)的順序繪制的，因此您可以看到，深藍(lán)色水平線繪制在淺綠色垂直線的前面，深綠色垂直線交叉在圖形的前面。深藍(lán)色的水平線。

這是預(yù)定義的Diagram.grid的定義：

  diagram.grid =
    $(go.Panel, "Grid",
      {
        name: "GRID",
        visible: false,
        gridCellSize: new go.Size(10, 10),
        gridOrigin: new go.Point(0, 0)
      },
      $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5, interval: 1 }),
      $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 5 }),
      $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 1.0, interval: 10 }),
      $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5, interval: 1 }),
      $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 5 }),
      $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 1.0, interval: 10 })
    );

  diagram.grid.visible = true;  // so that this example shows the standard grid
  diagram.div.style.background = "white";

您可以使用“ BarH”圖獲得綠條圖案。注意使用Shape.fill 而不是Shape.stroke并顯式設(shè)置GraphObject.height：

  diagram.grid =
    $(go.Panel, "Grid",
      { gridCellSize: new go.Size(50, 50) },
      $(go.Shape, "BarH", { fill: "lightgreen", interval: 2, height: 50 })
      );


  diagram.nodeTemplate =
    $(go.Node, "Auto",
      {
        dragComputation: function(node, pt, gridpt) {
          pt.y = Math.round(pt.y/100)*100;
          return pt;
        }
      },
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock, { margin: 5},
        new go.Binding("text", "key"))
    );
  var nodeDataArray = [
    { key: "Alpha" }

此示例還演示了如何使用Part.dragComputation屬性來自定義用戶可以將節(jié)點(diǎn)拖到何處。在這種情況下，Part.location .y限制為100的倍數(shù)，對應(yīng)于綠色條填充的單元格行。

要獲得桌布效果，可以同時使用具有半透明顏色的垂直條和水平條：

  diagram.grid =
    $(go.Panel, "Grid",
      { gridCellSize: new go.Size(100, 100) },
      $(go.Shape, "BarV", { fill: "rgba(255,0,0,0.1)", width: 50 }),
      $(go.Shape, "BarH", { fill: "rgba(255,0,0,0.1)", height: 50 })
      );

  diagram.toolManager.draggingTool.isGridSnapEnabled = true;

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { width: 50, height: 50 },
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock, { margin: 5},
        new go.Binding("text", "key"))
    );
  var nodeDataArray = [
    { key: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray);

本示例通過將DraggingTool.isGridSnapEnabled設(shè)置為true來限制所有節(jié)點(diǎn)的拖動。
這是一個使用“網(wǎng)格” 面板作為Node中常規(guī)數(shù)據(jù)綁定元素的示例：

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { resizable: true, resizeObjectName: "GRID" },
      $(go.Shape, "Rectangle", { fill: "transparent" }),
      $(go.Panel, "Grid",
        { name: "GRID", desiredSize: new go.Size(100, 100), gridCellSize: new go.Size(20, 20) },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        new go.Binding("gridCellSize", "cell", go.Size.parse).makeTwoWay(go.Size.stringify),
        $(go.Shape, "LineV",
          new go.Binding("stroke")),
        $(go.Shape, "LineH",
          new go.Binding("stroke"))
      ));

  diagram.model = new go.GraphLinksModel([
    { key: "Alpha", cell: "25 25", stroke: "lightgreen" },
    { key: "Beta", size: "150 75", cell: "15 30" }
  ]);

其他注意事項(xiàng)

background如果需要選擇 網(wǎng)格面板，則它應(yīng)該為非空。不能設(shè)置或綁定網(wǎng)格面板的Panel.itemArray。

形狀上的事件將被忽略。網(wǎng)格面板中的形狀不能縮放或旋轉(zhuǎn)。

---

想要購買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊