流程圖控件GoJS教程：如何創建網格圖案

---

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

點擊下載GoJS最新版

通常要顯示以規則間隔繪制的線條網格。您可能還需要強制將拖動的零件在網格點上對齊，并將零件的大小調整為網格像元大小的倍數。

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

要在圖的背景中顯示網格圖案，只需使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）;

網格捕捉

如果將DraggingTool.isGridSnapEnabled和/或ResizingTool.isGridSnapEnabled屬性設置為true ，DraggingTool和ResizingTool可以根據背景網格圖案更改其行為。

將DraggingTool.isGridSnapEnabled 設置為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）;

簡單的網格定制

您可以通過設置Panel.gridCellSize來更改網格單元的大小：

  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）;

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

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

  //捕捉到每隔一個點垂直和水平
  //（默認背景網格具有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）;

自定義網格

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

  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屬性也使用由網格面板，以確定線的具體頻繁應當制定。該值應為正整數，指定此特定線的圖形之間有多少個像元。因此，如果您想要每五個單元格深藍色和深綠色線條：

  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);

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

這是預定義的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并顯式設置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屬性來自定義用戶可以將節點拖到何處。在這種情況下，Part.location .y限制為100的倍數，對應于綠色條填充的單元格行。

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

  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設置為true來限制所有節點的拖動。
這是一個使用“網格” 面板作為Node中常規數據綁定元素的示例：

  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" }
  ]);

其他注意事項

background如果需要選擇 網格面板，則它應該為非空。不能設置或綁定網格面板的Panel.itemArray。

形狀上的事件將被忽略。網格面板中的形狀不能縮放或旋轉。

---

想要購買GoJS正版授權，或了解更多產品信息請點擊