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)命令的其他參數(shù)集自動(dòng)視為行命令，因此M 10 10 20 20與相同M 10 10 L 20 20。

L（xy）+

High（x）+

V（y）+

Q（x1 y1 xy）+

T（xy）+

C（x1 y1 x2 y2 xy）+

S（x2 y2 xy）+

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

?

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

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

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

X

F

ü

此命令的存在指定當(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” }）））;

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

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

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。

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