流程图控件GoJS教程：如何创建几何路径字符串（二）

本页介绍如何通过GoJS Geometry类控制一个形状的“形状”，Shape.fill和Shape.stroke和其它形状属性控制颜色和形状的外观。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新版

几何解析

使用静态方法Geometry，parse将GoJS语法路径字符串转换为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 })  ));

• 在调用Geometry，parse之前，请 调用Geometry，fillPath将SVG路径字符串转换为GoJS语法。对于文字SVG路径字符串，通常最简单的做法是为其加上“ F”前缀。
• 调用Geometry，使用第二个参数true 解析。
• 修改几何返回由几何，解析，通过设置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对象的边界都包含原点，因此，在x == 0或y == 0处没有点创建的几何图形将在其左侧或上方具有额外的空间。注意下面的节点中如何有多余的空间，导致形状看起来离文本更远并向下移动：

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

通常，在将通过绘图应用程序创建的SVG形状导入GoJS时，我们不需要上方或左侧的额外空间，因此我们需要对几何进行规格化。为此，有一个函数Geometry.normalize，该函数就地修改了Geometry的点，并返回一个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属性setter分析给定GoJS路径字符串作为Geometry，它标准化，设置Shape.geometry这个新的几何，并抵消了它在正常化转移量形状的位置。当形状在“ 面板，位置”面板内部时，定位很有用。但是，当在其他任何类型的面板中使用该形状时（因此忽略GraphObject.position），删除多余的空间仍然有用，以便该形状与面板中的其他对象很好地匹配。

下面的示例向图中添加了三个带有形状的零件。第一个形状使用Geometry，parse设置Shape的Geometry，第二个形状使用Geometry，parse和Geometry.normalize。第三个使用Shape.geometryString。注意第一部分和其他两个部分之间的大小差异。

var pathstring = "M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100";// Just parsing the geometrydiagram.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 itvar 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 geometrydiagram.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 sizesdiagram.commandHandler.selectAll();

GoJS几何图形具有几种通过转换矩阵修改几何图形点的方法。如果需要，我们可以使用这些方法来翻转或镜像几何。

geometry.scale(-1, 1)将水平翻转几何图形。 geometry.scale(1, -1)将垂直翻转几何图形。

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 stringn(normalized)")));var geo2 = geo.copy();geo2.scale(-1, 1); // flips a geometry horizontallydiagram.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 verticallydiagram.add($(go.Part, "Vertical",  $(go.Shape,    { geometry: geo3,      strokeWidth: 10, stroke: "lightgreen",      background: "whitesmoke" }),  $(go.TextBlock, "flipped vertically")));diagram.layout = $(go.GridLayout);

静态方法Geometry，stringify可用于将Geometry输出为字符串。该字符串将具有GoJS路径字符串语法。您可以使用Geometry.stringify和Geometry.parse数据绑定自定义形状几何。

Geometry.parse(Geometry.stringify(myGeometry))将返回等于的几何myGeometry，尽管如果myMyometry是从字符串创建的，则不能保证字符串本身是相同的。如果只想复制Geometry，则应使用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 bgo.Geometry.stringify(Geometry.parse(b)); // returns the string in b

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

静态方法Geometry，fillPath采用任一语法的路径字符串，并F在每个不包含它们的PathFigure之前添加标记。由于SVG路径字符串本身不被认为是“填充”的，因此，如果要将SVG路径形状转换为GoJS，则需要在SVG字符串上调用Geometry，fillPath。

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

然后可以将结果传递给Geometry，parse或Shape.geometryString。

参数化的几何

尽管不能根据预期的大小或其他属性动态地对单个Geometry对象进行参数化，但是Shape类确实通过Shape，defineFigureGenerator支持这种参数化。设置或绑定Shape.figure属性时，该形状将调用命名的图形生成器以生成适合所需宽度和高度以及其他Shape属性的Geometry。

您可以在扩展文件Figures.js中查看所有预定义图形的定义 。

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：