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

---

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

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

幾何路徑字符串

GoJS Geometry類控制一個(gè)形狀的“形狀”，而Shape.fill和Shape.stroke和其它形狀屬性控制的顏色和形狀的外觀。對(duì)于常見(jiàn)的形狀圖形，可以通過(guò)設(shè)置Shape.figure來(lái)使用預(yù)定義的幾何形狀。但是，也可以定義自定義幾何形狀。

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

幾何路徑字符串語(yǔ)法

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

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

用大寫(xiě)字母寫(xiě)的命令表示絕對(duì)坐標(biāo)；小寫(xiě)命令指定相對(duì)于最后一個(gè)命令的坐標(biāo)。一些命令不關(guān)心大小寫(xiě)，因?yàn)樗鼈儾粚⒆鴺?biāo)用作參數(shù)。

M（xy）+

移動(dòng)命令在PathFigure中開(kāi)始一個(gè)新的子路徑。一個(gè)對(duì)于開(kāi)始PathFigure必不可少的，因此必須是路徑字符串中的第一個(gè)段類型，但F可以在它之前的Fill命令（F）除外。

移動(dòng)命令的其他參數(shù)集自動(dòng)視為行命令，因此M 10 10 20 20與相同M 10 10 L 20 20。

L（xy）+

直線命令將從上一個(gè)點(diǎn)到新點(diǎn)的直線段添加。

High（x）+

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

V（y）+

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

Q（x1 y1 xy）+

二次貝塞爾曲線。 x1，y1是控制點(diǎn)。有關(guān)更多詳細(xì)信息，請(qǐng)參見(jiàn)SVG Quadratic Bezier命令。

T（xy）+

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

C（x1 y1 x2 y2 xy）+

三次貝塞爾曲線。 x1，y1并且x2，y2在控制點(diǎn)。有關(guān)更多詳細(xì)信息，請(qǐng)參見(jiàn)SVG Cubic Bezier命令。

S（x2 y2 xy）+

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

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

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

?

Z表示當(dāng)前段已關(guān)閉。它放置在子路徑的最后一段之后。沒(méi)有參數(shù)，此命令的大小寫(xiě)無(wú)關(guān)緊要。

有關(guān)SVG路徑字符串的詳細(xì)信息，請(qǐng)參見(jiàn)SVG路徑上的W3C頁(yè)面。

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

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

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

X

在M命令之前使用，以表示單獨(dú)的PathFigures而不是子路徑。沒(méi)有參數(shù)，此命令的大小寫(xiě)無(wú)關(guān)緊要。當(dāng)每個(gè)圖形部件需要不同的填充時(shí)，單獨(dú)的PathFigures很重要。

F

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

ü

此命令的存在指定當(dāng)前的PathFigure是否被屏蔽（如果存在，則為falseU。默認(rèn)的陰影為PathFigure）。僅當(dāng)包含零件上的Part.isShadowed設(shè)置為true時(shí)，形狀上的陰影（以及PathFigures上的陰影）才存在。這被放置在圖的開(kāi)頭。該命令的大小寫(xiě)無(wú)關(guān)緊要

幾何路徑字符串示例

這是初始化Shape而不設(shè)置Shape.figure時(shí)幾何路徑字符串的簡(jiǎn)單用法：

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的默認(rèn)值也導(dǎo)致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 })
  ));

在下圖中，我們使用包含三個(gè)PathFigures的路徑字符串。注意將X圖形分開(kāi)的命令和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” }）
  ））;

前兩個(gè)PathFigures是打開(kāi)的；第一個(gè)和第三個(gè)數(shù)字已填充。該Z命令僅關(guān)閉其結(jié)束的PathFigure。

在下圖中，我們使用包含四個(gè)PathFigures的路徑字符串，其中兩個(gè)具有陰影。請(qǐng)注意，如果包含的Part的Part.isShadowed設(shè)置為true ，則默認(rèn)情況下圖形會(huì)被陰影覆蓋。為了使特定的路徑圖形沒(méi)有陰影，我們使用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" })
  ));

第一個(gè)和最后一個(gè)PathFigures被陰影化；第二個(gè)和第三個(gè)沒(méi)有陰影。

---

想要購(gòu)買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢?cè)诰€客服】