流程圖控件GoJS教程：如何創建幾何路徑字符串（二）

---

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

點擊下載GoJS最新版

幾何解析

使用靜態方法Geometry，parse將GoJS語法路徑字符串轉換為Geometry。

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: go.Geometry.parse("M120 0 L80 80 0 50z"), // Geometry is not filled
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

請注意，即使指定了Shape.fill，該形狀也不會顯示為已填充。這是因為未聲明填充幾何圖形的一個PathFigure－沒有F命令。導入已填充的SVG路徑字符串還需要聲明已填充幾何。有幾種方法可以做到這一點：

• 在調用Geometry，parse之前，請 調用Geometry，fillPath將SVG路徑字符串轉換為GoJS語法。對于文字SVG路徑字符串，通常最簡單的做法是為其加上“ F”前綴。
• 調用Geometry，使用第二個參數true 解析。
• 修改幾何返回由幾何，解析，通過設置PathFigure.isFilled所需PathFigures為true。

這是相同的示例，但是使用填充的幾何路徑字符串。

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: go.Geometry.parse("F M120 0 L80 80 0 50z"), // Geometry is filled
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

所有Geometry對象的邊界都包含原點，因此，在x == 0或y == 0處沒有點創建的幾何圖形將在其左側或上方具有額外的空間。注意下面的節點中如何有多余的空間，導致形狀看起來離文本更遠并向下移動：

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: go.Geometry.parse("M120 50 L80 80 50 50z", true), // Geometry is filled
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

通常，在將通過繪圖應用程序創建的SVG形狀導入GoJS時，我們不需要上方或左側的額外空間，因此我們需要對幾何進行規格化。為此，有一個函數Geometry.normalize，該函數就地修改了Geometry的點，并返回一個Point，描述了它們的偏移量。

var geo = go.Geometry.parse("M120 50 L80 80 50 50z", true);
geo.normalize();

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: geo,  // normalized above
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

Shape.geometryString

該Shape.geometryString屬性setter分析給定GoJS路徑字符串作為Geometry，它標準化，設置Shape.geometry這個新的幾何，并抵消了它在正常化轉移量形狀的位置。當形狀在“ 面板，位置”面板內部時，定位很有用。但是，當在其他任何類型的面板中使用該形狀時（因此忽略GraphObject.position），刪除多余的空間仍然有用，以便該形狀與面板中的其他對象很好地匹配。

下面的示例向圖中添加了三個帶有形狀的零件。第一個形狀使用Geometry，parse設置Shape的Geometry，第二個形狀使用Geometry，parse和Geometry.normalize。第三個使用Shape.geometryString。注意第一部分和其他兩個部分之間的大小差異。

var pathstring = "M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100";

// Just parsing the geometry
diagram.add(
  $(go.Part, "Vertical",
    $(go.Shape,
      { geometry: go.Geometry.parse(pathstring),
        strokeWidth: 10, stroke: "lightcoral",
        background: "whitesmoke" }),
    $(go.TextBlock, "parse")
  ));

// Parsing the geometry and normalizing it
var geo = go.Geometry.parse(pathstring);
geo.normalize();
diagram.add(
  $(go.Part, "Vertical",
    $(go.Shape,
      { geometry: geo,
        strokeWidth: 10, stroke: "lightgreen",
        background: "whitesmoke" }),
    $(go.TextBlock, "parse/normalize")
  ));

// Using geometryString to parse and normalize the geometry
diagram.add(
  $(go.Part, "Vertical",
    $(go.Shape,
      { geometryString: pathstring,
        strokeWidth: 10, stroke: "lightblue",
        background: "whitesmoke" }),
    $(go.TextBlock, "geometryString")
  ));

diagram.layout = $(go.GridLayout);

// Select them all to more easily see their sizes
diagram.commandHandler.selectAll();

水平和垂直翻轉幾何

GoJS幾何圖形具有幾種通過轉換矩陣修改幾何圖形點的方法。如果需要，我們可以使用這些方法來翻轉或鏡像幾何。

geometry.scale(-1, 1)將水平翻轉幾何圖形。 geometry.scale(1, -1)將垂直翻轉幾何圖形。

var pathstring = "M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100";
var geo = go.Geometry.parse(pathstring);
geo.normalize();

diagram.add(
$(go.Part, "Vertical",
  $(go.Shape,
    { geometry: geo,
      strokeWidth: 10, stroke: "lightgreen",
      background: "whitesmoke" }),
  $(go.TextBlock, "geometry from string\n(normalized)")
));

var geo2 = geo.copy();
geo2.scale(-1, 1); // flips a geometry horizontally
diagram.add(
$(go.Part, "Vertical",
  $(go.Shape,
    { geometry: geo2,
      strokeWidth: 10, stroke: "lightgreen",
      background: "whitesmoke" }),
  $(go.TextBlock, "flipped horizontally")
));

var geo3 = geo.copy();
geo3.scale(1, -1); // flips a geometry vertically
diagram.add(
$(go.Part, "Vertical",
  $(go.Shape,
    { geometry: geo3,
      strokeWidth: 10, stroke: "lightgreen",
      background: "whitesmoke" }),
  $(go.TextBlock, "flipped vertically")
));

diagram.layout = $(go.GridLayout);

轉換路徑字符串

靜態方法Geometry，stringify可用于將Geometry輸出為字符串。該字符串將具有GoJS路徑字符串語法。您可以使用Geometry.stringify和Geometry.parse數據綁定自定義形狀幾何。

Geometry.parse(Geometry.stringify(myGeometry))將返回等于的幾何myGeometry，盡管如果myMyometry是從字符串創建的，則不能保證字符串本身是相同的。如果只想復制Geometry，則應使用Geometry.copy。

// These path strings represent identical geometries:
var a = "m0 0 t 50 50, q 40 20, 50 10 h 10 v -23 l 45, 5, 65, 100"
var b = "M0 0 Q0 0 50 50 Q90 70 100 60 L110 60 L110 37 L155 42 L220 142"
go.Geometry.stringify(Geometry.parse(a)); // returns the string in b
go.Geometry.stringify(Geometry.parse(b)); // returns the string in b

由于存在其他非SVG命令，因此從Geometry，stringify生成的字符串不一定是有效的SVG路徑。

靜態方法Geometry，fillPath采用任一語法的路徑字符串，并F在每個不包含它們的PathFigure之前添加標記。由于SVG路徑字符串本身不被認為是“填充”的，因此，如果要將SVG路徑形狀轉換為GoJS，則需要在SVG字符串上調用Geometry，fillPath。

go.Geometry.fillPath("M0 0 L20 20 L20 0");
// returns           "F M0 0 L20 20 L20 0"

然后可以將結果傳遞給Geometry，parse或Shape.geometryString。

參數化的幾何

盡管不能根據預期的大小或其他屬性動態地對單個Geometry對象進行參數化，但是Shape類確實通過Shape，defineFigureGenerator支持這種參數化。設置或綁定Shape.figure屬性時，該形狀將調用命名的圖形生成器以生成適合所需寬度和高度以及其他Shape屬性的Geometry。

您可以在擴展文件Figures.js中查看所有預定義圖形的定義 。

---

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