流程图控件GoJS教程：如何创建几何路径字符串（一）-控件新闻-慧都网

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

翻译|使用教程|编辑：杨鹏连|2020-07-23 11:23:36.183|阅读 323 次

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

相关链接：

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

几何路径字符串

GoJS Geometry类控制一个形状的“形状”，而Shape.fill和Shape.stroke和其它形状属性控制的颜色和形状的外观。对于常见的形状图形，可以通过设置Shape.figure来使用预定义的几何形状。但是，也可以定义自定义几何形状。

可以通过分配和初始化至少一个包含一些PathSegment的PathFigure的Geometry来构造任何Geometry 。但是您可能会发现，使用Geometry的字符串表示形式更容易编写并将其保存在数据库中。使用静态方法Geometry.parse或Shape.geometryString属性将几何路径字符串转换为Geometry对象。

几何路径字符串语法

几何路径字符串的语法是SVG路径字符串语法的扩展。该字符串由许多命令组成，每个命令后跟一个特定于字母的数字参数，每个字母为一个字母。

以下是可能的命令以及它们采用的参数。参数符号(x y)+表示该命令恰好需要两个参数，但是每个命令可以有一组或多组参数。例如，该L (x y)+命令可以写为L 10 10 20 20表示两个直线段。

用大写字母写的命令表示绝对坐标；小写命令指定相对于最后一个命令的坐标。一些命令不关心大小写，因为它们不将坐标用作参数。

M（xy）+

移动命令在PathFigure中开始一个新的子路径。一个对于开始PathFigure必不可少的，因此必须是路径字符串中的第一个段类型，但F可以在它之前的Fill命令（F）除外。

移动命令的其他参数集自动视为行命令，因此M 10 10 20 20与相同M 10 10 L 20 20。

L（xy）+

直线命令将从上一个点到新点的直线段添加。

High（x）+

水平线命令仅指定水平直线的x值。

V（y）+

垂直线命令仅指定垂直直线的ay值。

Q（x1 y1 xy）+

二次贝塞尔曲线。 x1，y1是控制点。有关更多详细信息，请参见SVG Quadratic Bezier命令。

T（xy）+

简捷二次贝塞尔曲线。根据SVG的路径规则计算控制点。

C（x1 y1 x2 y2 xy）+

三次贝塞尔曲线。 x1，y1并且x2，y2在控制点。有关更多详细信息，请参见SVG Cubic Bezier命令。

S（x2 y2 xy）+

简捷三次贝塞尔曲线。根据SVG的路径规则计算两个控制点。

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

椭圆弧。这些遵循SVG弧约定。

ž

Z表示当前段已关闭。它放置在子路径的最后一段之后。没有参数，此命令的大小写无关紧要。

有关SVG路径字符串的详细信息，请参见SVG路径上的W3C页面。

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

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

遵循GoJS canvas弧约定的弧。这些弧从子路径中的最后一个点到由五个参数定义的弧的第一个点之间创建一条新线。与所有其他带有参数的命令不同，B弧不允许使用多个参数集。

在M命令之前使用，以表示单独的PathFigures而不是子路径。没有参数，此命令的大小写无关紧要。当每个图形部件需要不同的填充时，单独的PathFigures很重要。

此命令的存在指定当前PathFigure是否已填充（如果F存在，则为true ）。这被放置在图的开头。当前有一个可选参数被忽略。该命令的大小写无关紧要。

ü

此命令的存在指定当前的PathFigure是否被屏蔽（如果存在，则为falseU。默认的阴影为PathFigure）。仅当包含零件上的Part.isShadowed设置为true时，形状上的阴影（以及PathFigures上的阴影）才存在。这被放置在图的开头。该命令的大小写无关紧要

几何路径字符串示例

这是初始化Shape而不设置Shape.figure时几何路径字符串的简单用法：

diagram.add(
  $(go.Node,
    $(go.Shape,
      { geometryString: "F M120 0 L80 80 0 50z",
        fill: "lightgreen" })));

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

这是使用二次贝塞尔曲线的几何路径字符串：

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教程：如何创建几何路径字符串（一）

此几何使用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教程：如何创建几何路径字符串（一）

以下几何图形使用GoJS弧。由于Shape被拉伸以适合TextBlock，并且Shape.geometryStretch的默认值也导致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 })
  ));

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

在下图中，我们使用包含三个PathFigures的路径字符串。注意将X图形分开的命令和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” }）
  ））;

前两个PathFigures是打开的；第一个和第三个数字已填充。该Z命令仅关闭其结束的PathFigure。

在下图中，我们使用包含四个PathFigures的路径字符串，其中两个具有阴影。请注意，如果包含的Part的Part.isShadowed设置为true ，则默认情况下图形会被阴影覆盖。为了使特定的路径图形没有阴影，我们使用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" })
  ));