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

---

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

點擊下載GoJS最新版

幾何路徑字符串

GoJS Geometry類控制一個形狀的“形狀”，而Shape.fill和Shape.stroke和其它形狀屬性控制的顏色和形狀的外觀。對于常見的形狀圖形，可以通過設置Shape.figure來使用預定義的幾何形狀。但是，也可以定義自定義幾何形狀。

可以通過分配和初始化至少一個包含一些PathSegment的PathFigure的Geometry來構造任何Geometry 。但是您可能會發現，使用Geometry的字符串表示形式更容易編寫并將其保存在數據庫中。使用靜態方法Geometry.parse或Shape.geometryString屬性將幾何路徑字符串轉換為Geometry對象。

幾何路徑字符串語法

幾何路徑字符串的語法是SVG路徑字符串語法的擴展。該字符串由許多命令組成，每個命令后跟一個特定于字母的數字參數，每個字母為一個字母。

以下是可能的命令以及它們采用的參數。參數符號(x y)+表示該命令恰好需要兩個參數，但是每個命令可以有一組或多組參數。例如，該L (x y)+命令可以寫為L 10 10 20 20表示兩個直線段。

用大寫字母寫的命令表示絕對坐標；小寫命令指定相對于最后一個命令的坐標。一些命令不關心大小寫，因為它們不將坐標用作參數。

M（xy）+

移動命令在PathFigure中開始一個新的子路徑。一個對于開始PathFigure必不可少的，因此必須是路徑字符串中的第一個段類型，但F可以在它之前的Fill命令（F）除外。

移動命令的其他參數集自動視為行命令，因此M 10 10 20 20與相同M 10 10 L 20 20。

L（xy）+

直線命令將從上一個點到新點的直線段添加。

High（x）+

水平線命令僅指定水平直線的x值。

V（y）+

垂直線命令僅指定垂直直線的ay值。

Q（x1 y1 xy）+

二次貝塞爾曲線。 x1，y1是控制點。有關更多詳細信息，請參見SVG Quadratic Bezier命令。

T（xy）+

簡捷二次貝塞爾曲線。根據SVG的路徑規則計算控制點。

C（x1 y1 x2 y2 xy）+

三次貝塞爾曲線。 x1，y1并且x2，y2在控制點。有關更多詳細信息，請參見SVG Cubic Bezier命令。

S（x2 y2 xy）+

簡捷三次貝塞爾曲線。根據SVG的路徑規則計算兩個控制點。

A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

橢圓弧。這些遵循SVG弧約定。

?

Z表示當前段已關閉。它放置在子路徑的最后一段之后。沒有參數，此命令的大小寫無關緊要。

有關SVG路徑字符串的詳細信息，請參見SVG路徑上的W3C頁面。

此外，還有一些特定于GoJS的令牌：

B（startAngle，sweepAngle，centerX，centerY，radiusX，radiusY） 

遵循GoJS canvas弧約定的弧。這些弧從子路徑中的最后一個點到由五個參數定義的弧的第一個點之間創建一條新線。與所有其他帶有參數的命令不同，B弧不允許使用多個參數集。

X

在M命令之前使用，以表示單獨的PathFigures而不是子路徑。沒有參數，此命令的大小寫無關緊要。當每個圖形部件需要不同的填充時，單獨的PathFigures很重要。

F

此命令的存在指定當前PathFigure是否已填充（如果F存在，則為true ）。這被放置在圖的開頭。當前有一個可選參數被忽略。該命令的大小寫無關緊要。

ü

此命令的存在指定當前的PathFigure是否被屏蔽（如果存在，則為falseU。默認的陰影為PathFigure）。僅當包含零件上的Part.isShadowed設置為true時，形狀上的陰影（以及PathFigures上的陰影）才存在。這被放置在圖的開頭。該命令的大小寫無關緊要

幾何路徑字符串示例

這是初始化Shape而不設置Shape.figure時幾何路徑字符串的簡單用法：

diagram.add(
  $(go.Node,
    $(go.Shape,
      { geometryString: "F M120 0 L80 80 0 50z",
        fill: "lightgreen" })));

這是使用二次貝塞爾曲線的幾何路徑字符串：

diagram.add（
  $ {go.Node，
    $ {go.Shape，
      { geometryString：“ F M0 0 L100 0 Q150 50 100 100 L0 100 Q50 50 0 0z”，
         fill：“ lightgreen” }）））;

此幾何使用GoJS弧：

diagram.add(
  $(go.Node, "Spot",
    $(go.Shape,
      { geometryString: "F M0 0 L80 0 B-90 90 80 20 20 20 L100 100 20 100 B90 90 20 80 20 20z",
        fill: "lightgreen" }),
    $(go.TextBlock, "custom shape")
  ));

以下幾何圖形使用GoJS弧。由于Shape被拉伸以適合TextBlock，并且Shape.geometryStretch的默認值也導致Geometry也被拉伸，因此自定義幾何也被拉伸以適合文本。

diagram.add(
  $(go.Node, "Auto",
    $(go.Shape,
      { geometryString: "F M0 0 L.8 0 B-90 90 .8 .2 .2 .2 L1 1 .2 1 B90 90 .2 .8 .2 .2z",
        fill: "lightgreen" }),
    $(go.TextBlock, "custom shape",
      { margin: 4 })
  ));

在下圖中，我們使用包含三個PathFigures的路徑字符串。注意將X圖形分開的命令和F表示填充的命令。

diagram.add（
  $（go.Part，
    $ {go.Shape，
      { geometryString：
           “ FM 0 0 l 30,30 10,10 35,0 0，-35 xm 50 0 l 0，-50 10,0 35,35 x” +
           “ fm 50 0 l 0，-50 10,0 35,35z”，
         strokeWidth：10，stroke：“ lightblue”，fill：“ gray” }）
  ））;

前兩個PathFigures是打開的；第一個和第三個數字已填充。該Z命令僅關閉其結束的PathFigure。

在下圖中，我們使用包含四個PathFigures的路徑字符串，其中兩個具有陰影。請注意，如果包含的Part的Part.isShadowed設置為true ，則默認情況下圖形會被陰影覆蓋。為了使特定的路徑圖形沒有陰影，我們使用U命令。

diagram.add(
  $(go.Part,
    { isShadowed: true, shadowOffset: new go.Point(10, 10) },
    $(go.Shape,
      { geometryString:
          "F M 0 0 l 30,30 10,10 35,0 0,-35 x u m 50 0 l 0,-50 10,0 35,35 x" +
          "u f m 50 0 l 0,-50 10,0 35,35z x m 70 0 l 0,30 30,0 5,-35z",
        strokeWidth: 8, stroke: "lightblue", fill: "lightcoral" })
  ));

第一個和最后一個PathFigures被陰影化；第二個和第三個沒有陰影。

---

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