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

---

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

點擊下載GoJS最新版

幾何路徑字符串

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

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

幾何路徑字符串語法

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

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

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

M（xy）+

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

移動命令的其他參數(shù)集自動視為行命令，因此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）+

簡捷二次貝塞爾曲線。根據(jù)SVG的路徑規(guī)則計算控制點。

C（x1 y1 x2 y2 xy）+

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

S（x2 y2 xy）+

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

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

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

?

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

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

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

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

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

X

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

F

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

ü

此命令的存在指定當前的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是打開的；第一個和第三個數(shù)字已填充。該Z命令僅關閉其結(jié)束的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正版授權(quán)，或了解更多產(chǎn)品信息請點擊