Options
All
  • Public
  • Public/Protected
  • All
Menu

形状类

层次结构

形状是显示几何图形的GraphObjectGeometry 决定了绘制的内容 fillstroke (以及其他 stroke 属性)确定了如何绘制.

通常有两种类型的形状: 通过设置 Shape.geometry 使用自定义 Geometry 的形状以及使用 figure, toArrow, 或者 fromArrow 的值自动生成的形状。 显示设置的Geometry总是取代figure和arrowhead属性

创建一些形状 :

var $ = go.GraphObject.make;  // for conciseness in defining GraphObjects

// A shape with the figure set to RoundedRectangle:
$(go.Shape, { figure: "RoundedRectangle", fill: "lightgreen" })
// Alternatively:
$(go.Shape, "RoundedRectangle", { fill: "lightgreen" })

// A shape with a custom geometry, using geometryString:
$(go.Shape,
    { geometry: go.Geometry.parse("M120 0 L80 80 0 50z") })

// A shape with a custom geometry, using geometryString:
$(go.Shape,
   { geometryString: "F M120 0 L80 80 0 50z",
     fill: "lightgreen" })

// A common link template, using two shapes,
// the first for the link path and the second for the arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    // The first shape in a link is special, its geometry is set by the Link's routing,
    // so it does not need a geometry or figure set manually
    $(go.Shape,
      { strokeWidth: 2, stroke: 'gray' }),
    $(go.Shape,
      { toArrow: "Standard", fill: 'gray', stroke: null })
  );

您可以在 Geometry Strings 简介页面上查看更多自定义几何示例,并阅读有关geometryString的信息。

自动生成形状时Geometry, toArrow 的值优先, 然后是 fromArrow, 然后是 figure.如果 toArrow 或者 fromArrow 的值为"None" 则被忽略, 而 figure 的"None"值与"Rectangle"值相同.

形状示例 中显示了所有预定义的图形。 你可以通过调用静态函数 Shape.defineFigureGenerator 来定义已经命名的图形。 你可以通过调用静态函数 Shape.getFigureGenerators 获取已经命名形状的 Map

所有预定义的箭头都显示在 Arrowheads 示例 中。 你可以通过调用静态函数 Shape.defineArrowheadGeometry 来定义自己命名的箭头 通过调用静态函数 Shape.getArrowheadGeometries 获取命名箭头的 Map

你可以在这个文件中看到所有内置箭头定义的副本: Arrowheads.js.

形状属性 parameter1, 和 parameter2 可以确定一些 figure 几何形状的构造细节. 具体来说他们经常为形状设置 spot1, spot2 当形状是主要对象时,这些点决定了自动面板的"内部区域" 更多有关信息,请参见 Panels 的简介页面自动面板部分.

形状在确定命中测试时使用它们的几何边界,但在参与(面板)布局时使用矩形边界。

Index

Constructors

constructor

  • 新构建的 Shape 有一个默认的 figure 是 "None", 它将构建一个矩形, 并且用黑色画笔填充和描边

    Returns Shape

Properties

figure : string

  • 获取或者设置figure的名称,用于构造一个 Geometry 值必须是字符串,默认值是 "None".

    名称可以是任何值,但设置时始终会被规范化。例如,设置 "roundedrectangle" 将会将figure值设置为 "RoundedRectangle". 所有预定义的图形都展示在 形状示例 中。

    在同一形状上,最多可以同时将以下三个属性中的一个设置为非"None": figure, toArrow, fromArrow.

    你可以通过静态函数 Shape.defineFigureGenerator 来定义自己的已命名图形

fill : BrushLike

  • 获取或者设置 Brush 或者字符串,该画笔或者字符串将描述形状的填充方式

    默认值是 "black", 这将使形状填充成纯黑色. 任何有效的CSS字符串都可以指定纯色, 并且 Brush 类可以用于指定渐变或图案. null表示未绘制任何填充并且形状的填充部分将不可选取. 当希望允许形状可选取而不遮挡其后的任何其他对象时,"transparent"填充非常有用 有关CSS颜色字符串语法的更多信息,请访问: CSS colors (mozilla.org).

    stroke 绘制之前填充形状

fromArrow : string

  • 获取或者设置当此形状是 Link 的元素时该形状应采用的箭头名称。值必须是字符串。 对于双向箭头,箭头名称通常以"Backward..."开头

    默认值是 "None", 这意味着形状不是箭头, 导致它的默认形状是一个大的填充矩形。 如果你希望有一个箭头但是有时不显示箭头,你可以设置或者绑定 GraphObject.visible 属性,或者设置或者绑定 "toArrow" 属性为空字符串。 名称是空字符串的箭头将不会显示任何内容.

    名称可以是任何值,但设置时始终会被规范化。 例如, 设置 "opentriangle"将会将箭头值设置为 "OpenTriangle"。 所有预定义的箭头都展示在 箭头示例 中。

    设置此属性还可以设置 GraphObject.segmentIndex, GraphObject.segmentOrientation, 和 GraphObject.alignmentFocus 属性。 此形状应该是 Link 的元素

    在同一形状上,最多可以同时将以下三个属性中的一个设置为非"None": figure, toArrow, fromArrow.

    你可以通过调用静态函数 Shape.defineArrowheadGeometry 来定义自己命名的箭头

    您可以在这个文件中看到所有内置箭头定义的副本: Arrowheads.js.

geometry : Geometry | null

  • 获取或者设置定义形状的 Geometry。 如果设置了 figure 则无需设置geometry,因为这样会构造一个geometry图形

    设置 geometry 属性将冻结提供的 Geometry.

    设置 geometry 属性总是覆盖任何设置的 figure 。默认值是 null。

    see

    geometryString

geometryStretch : EnumValue

geometryString : string

graduatedEnd : number

  • 获取或设置沿"Graduated" Panel 的主形状上的小数距离,此类刻度应在该距离处结束 默认值是1,任何新值都应在0到1之间。

    since

    1.7

graduatedSkip : function(val: number): boolean | null

  • 获取或设置函数,以确定将跳过"Graduated" Panel中的哪些值。 默认值为null,不跳过任何刻度。

    该函数接收一个数字参数 Panel.graduatedMinPanel.graduatedMax 之间的一个值 这个函数返回一个布尔值, 是否会在参数的值处跳过刻度线。

    since

    2.0

graduatedStart : number

  • 获取或设置沿"Graduated" Panel的主形状上的小数距离,此类刻度应从该距离开始。默认值为0。任何新值都应在0到1之间。

    since

    1.7

interval : number

isGeometryPositioned : boolean

  • 获取或设置此形状的 GraphObject.position 是否以面板坐标表示此形状的左上角或此几何坐标系的原点。 基本上,这确定了 strokeWidth 是否影响渲染的位置。 true值允许多个图形精准地定位在 "Position" 面板中,而与描边宽度无关默认值是 false.

    since

    1.1

Override Read-only naturalBounds : Rect

  • 这是一个只读属性返回这个形状的 naturalBounds 该边界由 geometry 边界确定。 边界总是包含(0,0)点. 如果没有可用的几何图形,它将返回具有 desiredSizeRect ,Ract的宽度和高度可能为NaN

parameter1 : number

  • 获取或者设置一个属性用于 Geometry 参数化构造图形。此属性的含义取决于特定的图形 这个值必须是数字; 默认值是 NaN.

parameter2 : number

  • 获取或者设置一个属性用于 Geometry 参数化构造图形。此属性的含义取决于特定的图形 这个值必须是数字; 默认值是 NaN.

pathPattern : GraphObject | null

  • 获取或者设置一个 GraphObject 该对象沿着该形状的描边路径重复绘制。 可将此属性设置为共享的GraphObject,该GraphObject不属于任何面板。 请注意数据绑定在此类共享GraphObject中不起作用,因为它们不是可视树的一部分。默认值是null,不会重复绘制任何对象。

    通常对象是一个小Shape 或者是 Picture. 对象越大,效果越差, 尤其是在描边具有短片段或者尖锐曲线的情况下,pathPattern 对象不是形状的测量范围的一部分,它只是一个装饰元素。

    描边总是正常绘制的 -- 拥有此属性的值会在描边绘制该值,因此通常将 stroke 设置为"transparent" 并且将 strokeWidth 设置为描边GraphObject的高度。

    关系示例 中可以看到路径模式的示例

    since

    1.6

spot1 : Spot

  • 获取或设置一些 面板 用于确定其他对象在形状中的位置的左上方位置。 这个值通常是 Spot.Default, 但是您可能需要将其设置为覆盖许多 形状 使用的值。

spot2 : Spot

  • 获取或设置一些 面板 用于确定其他对象在形状中的位置的右下方位置。 这个值通常是 Spot.Default, 但是您可能需要将其设置为覆盖许多 形状 使用的值。

stroke : BrushLike

  • 获取或设置 Brush 或字符串,该画笔或字符串描述几何图形如何像笔一样绘制。

    默认值是 "black", 使形状轮廓为黑色. 任何有效的CSS字符串都可以指定轮廓颜色, 而 Brush 类可以用于指定渐变或者图案. stroke值为null表示没有轮廓被绘制 当希望允许形状可选中而不遮挡其后的任何其他对象时,"transparent"轮廓很有用。 有关CSS颜色字符串语法的更多信息,请访问: CSS colors (mozilla.org)

    轮廓是在几何图形被画笔 填充 后绘制。

strokeCap : "butt" | "round" | "square"

  • 获取或者设置线帽的绘制方式,值必须是 "butt", "round", 或者 "square". 默认值是 "butt".

    更多信息, 请参阅 Stroke Line Cap (w3.org).

strokeDashArray : Array<number> | null

  • 获取或者设置一个数组用于创建虚线,值必须是正整数和0的数组,否则为null表示实线 例如, 数组 [5, 10] 将创建5个像素实心点和10个像素的间距. 更多信息, 请参阅 Stroke Line Dash Array (w3.org).

    默认值是 null, 是一条实线,设置数组全是0会设置值为null

    since

    1.1

strokeDashOffset : number

  • 获取或者设置虚线的偏移量, 用于开始绘制带有一定间隔的虚线图案,值必须是非负数的实数. 默认值是0.

    更多信息, 请参阅Stroke Line Dash Offset (w3.org).

    since

    1.1

strokeJoin : "round" | "bevel" | "miter"

  • 获取或设置在几何的两个直线段的相交处笔划绘制的角的类型。值必须是 "miter", "bevel", 或者 "round"其中之一。默认值是 "miter"。

    更多信息, 请参阅 Stroke Line Join (w3.org).

strokeMiterLimit : number

  • 获取或者设置斜接面限制比例的样式。值必须是大于或者等于1的实数,默认值是10.0

    更多信息, 请参阅 Stroke Miter Limit (w3.org).

strokeWidth : number

  • 获取或者设置描边笔的粗细

    值必须是大于或者等于0的实数,默认值是1.0,值为0将导致不绘制边框

    边框宽度将影响此形状的 GraphObject.measuredBoundsGraphObject.actualBounds 。 描边以几何路径为中心绘制。

toArrow : string

  • 获取或设置当此形状是 Link 的元素时该形状应采用的箭头的名称,值必须是字符串.

    默认值是 "None", 这意味着形状不是箭头,导致它默认图形是一个大的填充 矩形. 如果要具有箭头形状但有时不显示箭头,可以设置或者绑定 GraphObject.visible 属性, 或者设置或绑定 "toArrow" 属性为空字符串。 命名为 ""的箭头,一个空字符串将显示为空.

    名称可以是任何情况,但设置时始终会规范化。 例如设置"opentriangle" 箭头的值将被设置成 "OpenTriangle"。 所有预定义的箭头都显示在 箭头示例 示例中。

    设置此属性还可以设置 GraphObject.segmentIndex, GraphObject.segmentOrientation, 和 GraphObject.alignmentFocus 属性. 此形状应该是 Link 的元素

    在同一形状上,最多可以同时将以下三个属性中的一个设置为非"None": figure, toArrow, fromArrow.

    您可以通过调用静态函数 Shape.defineArrowheadGeometry 来定义自己的命名箭头

    你可以在这个文件中看到所有内置箭头定义的副本: Arrowheads.js.

Methods

Static defineArrowheadGeometry

  • defineArrowheadGeometry(name: string, pathstr: Geometry | string): void
  • 此静态函数定义了命名的箭头几何。 一旦调用了它,就可以将名称用作 Shape.toArrow 或者 Shape.fromArrow

    第一个参数是新的箭头名称,并且必须是一个以大写字母开头且不是 "None" 的非空字符串

    如果第二个参数是字符串,则通过调用 go.Geometry.parse(pathstr, false) 将其转换为 Geometry ,如果字符串的语法有问题,则可能会引发错误。

    since

    1.5

    Parameters

    • name: string

      大写的箭头名称("OpenTriangle"); 不得为 "" 或者 "None"

    • pathstr: Geometry | string

      一个 Geometry 或者一个 Geometry 路径字符串, e.g. "m 0,0 l 8,4 -8,4"

    Returns void

Static defineFigureGenerator

  • defineFigureGenerator(name: string, func: string | function(shape: Shape, width: number, height: number): Geometry): void
  • 该静态函数为图形定义了一个命名的几何生成器 一旦调用此函数,就可以使用该名称作为 Shape.figure 的值

    第一个参数是新的图形名称,必须是一个非空字符串,以大写字母开头,不能是 "None".

    如果第二个参数是字符串,则此调用定义现有图形生成器的同义词。不要定义同义词的循环——行为将是未定义的

    如果第二个参数是一个函数, Geometry 生成器函数的第一个参数是函数生成的几何 Shape 。 但是某些情况下 Shape 参数可能为null。第二和第三个参数是所需的宽度和高度,这些都是有限的非负数。 该函数可以查看 Shape.parameter1Shape.parameter2 属性, 可能为 NaN, 以根据给定的预期宽度和高度来决定为图形创建哪种几何形状。

    该函数必须返回一个 Geometry; 你可能需要在其上设置 Geometry.spot1Geometry.spot2 以指示 使用 "Auto" 面板时应将内容放置在图形中的位置,对于某些图形你可能还需要设置 Geometry.defaultStretchGraphObject.Uniform 以将几何图形的横纵比保持在Shape中

    生成的图形必须创建一个不大于提供的高度和宽度的几何,这样做会发出错误信号

    since

    1.5

    Parameters

    • name: string

      大写的图形名称 ("RoundedRectangle"); 不得为"" 或者 "None"

    • func: string | function(shape: Shape, width: number, height: number): Geometry

      该函数接受 (Shape,width,height)并且返回一个 Geometry,或者现有图形生成器名称,新名称将为同义词

    Returns void

Static getArrowheadGeometries

  • 这个静态函数返回已命名箭头形状的只读Map. key是箭头名称, value是 Geometry 对象

    箭头示例 中可以看到预定义的箭头。

    since

    1.5

    Returns Map<string, Geometry>

Static getFigureGenerators

  • getFigureGenerators(): Map<string, string | function(a: Shape, b: number, c: number): Geometry>
  • 这个静态函数返回一个已命名几何生成器的只读Map,key是形状名字,value要么是其他 Shape 名称的同义词字符串,要么是具有形状、宽度和高度并返回 Geometry 的函数。

    形状示例 中可以看到预定义的形状图形

    since

    1.5

    Returns Map<string, string | function(a: Shape, b: number, c: number): Geometry>