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的字符串表示形式更容易編寫并將其保存在數(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)+命令可以寫為L(zhǎng) 10 10 20 20表示兩個(gè)直線段。

用大寫字母寫的命令表示絕對(duì)坐標(biāo)；小寫命令指定相對(duì)于最后一個(gè)命令的坐標(biāo)。一些命令不關(guān)心大小寫，因?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)頭。該命令的大小寫無(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?。?/span>

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)擊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：使用Dynamic Web TWAIN從網(wǎng)絡(luò)攝像頭捕獲圖像的綜合指南 下一篇：PDF處理控件Aspose.PDF功能演示：使用C#編程創(chuàng)建3D PDF轉(zhuǎn)換器