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

---

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

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

幾何解析

使用靜態(tài)方法Geometry，parse將GoJS語(yǔ)法路徑字符串轉(zhuǎn)換為Geometry。

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: go.Geometry.parse("M120 0 L80 80 0 50z"), // Geometry is not filled
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

請(qǐng)注意，即使指定了Shape.fill，該形狀也不會(huì)顯示為已填充。這是因?yàn)槲绰暶魈畛鋷缀螆D形的一個(gè)PathFigure－沒有F命令。導(dǎo)入已填充的SVG路徑字符串還需要聲明已填充幾何。有幾種方法可以做到這一點(diǎn)：

• 在調(diào)用Geometry，parse之前，請(qǐng) 調(diào)用Geometry，fillPath將SVG路徑字符串轉(zhuǎn)換為GoJS語(yǔ)法。對(duì)于文字SVG路徑字符串，通常最簡(jiǎn)單的做法是為其加上“ F”前綴。
• 調(diào)用Geometry，使用第二個(gè)參數(shù)true 解析。
• 修改幾何返回由幾何，解析，通過(guò)設(shè)置PathFigure.isFilled所需PathFigures為true。

這是相同的示例，但是使用填充的幾何路徑字符串。

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: go.Geometry.parse("F M120 0 L80 80 0 50z"), // Geometry is filled
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

所有Geometry對(duì)象的邊界都包含原點(diǎn)，因此，在x == 0或y == 0處沒有點(diǎn)創(chuàng)建的幾何圖形將在其左側(cè)或上方具有額外的空間。注意下面的節(jié)點(diǎn)中如何有多余的空間，導(dǎo)致形狀看起來(lái)離文本更遠(yuǎn)并向下移動(dòng)：

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: go.Geometry.parse("M120 50 L80 80 50 50z", true), // Geometry is filled
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

通常，在將通過(guò)繪圖應(yīng)用程序創(chuàng)建的SVG形狀導(dǎo)入GoJS時(shí)，我們不需要上方或左側(cè)的額外空間，因此我們需要對(duì)幾何進(jìn)行規(guī)格化。為此，有一個(gè)函數(shù)Geometry.normalize，該函數(shù)就地修改了Geometry的點(diǎn)，并返回一個(gè)Point，描述了它們的偏移量。

var geo = go.Geometry.parse("M120 50 L80 80 50 50z", true);
geo.normalize();

diagram.add(
  $(go.Node, "Horizontal",
    $(go.TextBlock, "Custom Triangle:"),
    $(go.Shape,
      { geometry: geo,  // normalized above
        fill: "green", background: "whitesmoke",
        stroke: "orange", strokeWidth: 2 })
  ));

Shape.geometryString

該Shape.geometryString屬性setter分析給定GoJS路徑字符串作為Geometry，它標(biāo)準(zhǔn)化，設(shè)置Shape.geometry這個(gè)新的幾何，并抵消了它在正常化轉(zhuǎn)移量形狀的位置。當(dāng)形狀在“ 面板，位置”面板內(nèi)部時(shí)，定位很有用。但是，當(dāng)在其他任何類型的面板中使用該形狀時(shí)（因此忽略GraphObject.position），刪除多余的空間仍然有用，以便該形狀與面板中的其他對(duì)象很好地匹配。

下面的示例向圖中添加了三個(gè)帶有形狀的零件。第一個(gè)形狀使用Geometry，parse設(shè)置Shape的Geometry，第二個(gè)形狀使用Geometry，parse和Geometry.normalize。第三個(gè)使用Shape.geometryString。注意第一部分和其他兩個(gè)部分之間的大小差異。

var pathstring = "M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100";

// Just parsing the geometry
diagram.add(
  $(go.Part, "Vertical",
    $(go.Shape,
      { geometry: go.Geometry.parse(pathstring),
        strokeWidth: 10, stroke: "lightcoral",
        background: "whitesmoke" }),
    $(go.TextBlock, "parse")
  ));

// Parsing the geometry and normalizing it
var geo = go.Geometry.parse(pathstring);
geo.normalize();
diagram.add(
  $(go.Part, "Vertical",
    $(go.Shape,
      { geometry: geo,
        strokeWidth: 10, stroke: "lightgreen",
        background: "whitesmoke" }),
    $(go.TextBlock, "parse/normalize")
  ));

// Using geometryString to parse and normalize the geometry
diagram.add(
  $(go.Part, "Vertical",
    $(go.Shape,
      { geometryString: pathstring,
        strokeWidth: 10, stroke: "lightblue",
        background: "whitesmoke" }),
    $(go.TextBlock, "geometryString")
  ));

diagram.layout = $(go.GridLayout);

// Select them all to more easily see their sizes
diagram.commandHandler.selectAll();

水平和垂直翻轉(zhuǎn)幾何

GoJS幾何圖形具有幾種通過(guò)轉(zhuǎn)換矩陣修改幾何圖形點(diǎn)的方法。如果需要，我們可以使用這些方法來(lái)翻轉(zhuǎn)或鏡像幾何。

geometry.scale(-1, 1)將水平翻轉(zhuǎn)幾何圖形。 geometry.scale(1, -1)將垂直翻轉(zhuǎn)幾何圖形。

var pathstring = "M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100";
var geo = go.Geometry.parse(pathstring);
geo.normalize();

diagram.add(
$(go.Part, "Vertical",
  $(go.Shape,
    { geometry: geo,
      strokeWidth: 10, stroke: "lightgreen",
      background: "whitesmoke" }),
  $(go.TextBlock, "geometry from string\n(normalized)")
));

var geo2 = geo.copy();
geo2.scale(-1, 1); // flips a geometry horizontally
diagram.add(
$(go.Part, "Vertical",
  $(go.Shape,
    { geometry: geo2,
      strokeWidth: 10, stroke: "lightgreen",
      background: "whitesmoke" }),
  $(go.TextBlock, "flipped horizontally")
));

var geo3 = geo.copy();
geo3.scale(1, -1); // flips a geometry vertically
diagram.add(
$(go.Part, "Vertical",
  $(go.Shape,
    { geometry: geo3,
      strokeWidth: 10, stroke: "lightgreen",
      background: "whitesmoke" }),
  $(go.TextBlock, "flipped vertically")
));

diagram.layout = $(go.GridLayout);

轉(zhuǎn)換路徑字符串

靜態(tài)方法Geometry，stringify可用于將Geometry輸出為字符串。該字符串將具有GoJS路徑字符串語(yǔ)法。您可以使用Geometry.stringify和Geometry.parse數(shù)據(jù)綁定自定義形狀幾何。

Geometry.parse(Geometry.stringify(myGeometry))將返回等于的幾何myGeometry，盡管如果myMyometry是從字符串創(chuàng)建的，則不能保證字符串本身是相同的。如果只想復(fù)制Geometry，則應(yīng)使用Geometry.copy。

// These path strings represent identical geometries:
var a = "m0 0 t 50 50, q 40 20, 50 10 h 10 v -23 l 45, 5, 65, 100"
var b = "M0 0 Q0 0 50 50 Q90 70 100 60 L110 60 L110 37 L155 42 L220 142"
go.Geometry.stringify(Geometry.parse(a)); // returns the string in b
go.Geometry.stringify(Geometry.parse(b)); // returns the string in b

由于存在其他非SVG命令，因此從Geometry，stringify生成的字符串不一定是有效的SVG路徑。

靜態(tài)方法Geometry，fillPath采用任一語(yǔ)法的路徑字符串，并F在每個(gè)不包含它們的PathFigure之前添加標(biāo)記。由于SVG路徑字符串本身不被認(rèn)為是“填充”的，因此，如果要將SVG路徑形狀轉(zhuǎn)換為GoJS，則需要在SVG字符串上調(diào)用Geometry，fillPath。

go.Geometry.fillPath("M0 0 L20 20 L20 0");
// returns           "F M0 0 L20 20 L20 0"

然后可以將結(jié)果傳遞給Geometry，parse或Shape.geometryString。

參數(shù)化的幾何

盡管不能根據(jù)預(yù)期的大小或其他屬性動(dòng)態(tài)地對(duì)單個(gè)Geometry對(duì)象進(jìn)行參數(shù)化，但是Shape類確實(shí)通過(guò)Shape，defineFigureGenerator支持這種參數(shù)化。設(shè)置或綁定Shape.figure屬性時(shí)，該形狀將調(diào)用命名的圖形生成器以生成適合所需寬度和高度以及其他Shape屬性的Geometry。

您可以在擴(kuò)展文件Figures.js中查看所有預(yù)定義圖形的定義 。

---

想要購(gòu)買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊