UNPKG

gojs

Version:

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

937 lines 51.6 kB
<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Geometry | GoJS API</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"> <link rel="stylesheet" href="../assets/css/main.css"> </head> <body> <header> <!-- non-fixed navbar --> <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html" target="api">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="tsd-page-header"> <div class="tsd-page-toolbar"> <div class="container-fluid plr15"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base=".."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="../index.html" class="title">GoJS API</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> <span class="tsd-select-label">All</span> <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container-fluid plr15"> <div class="top-copyright"> <!--<b>GoJS</b>&reg; Diagramming Components<br/>version &lt;br/&gt;version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>--> <b>GoJS</b>&reg; Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a> </div> <div> <h1>Class Geometry</h1> </div> </div> </div> </div> </header> <div class="container-fluid container-main plr15"> <div class="row"> <div class="col-8 col-content"> <section class="tsd-panel tsd-hierarchy"> <h3>Hierarchy</h3> <ul class="tsd-hierarchy"> <li> <span class="target">Geometry</span> </li> </ul> </section> <section class="tsd-panel tsd-comment"> <div class="tsd-comment tsd-typography"> <p>The Geometry class is used to define the &quot;shape&quot; of a <a href="Shape.html">Shape</a>. A Geometry can be simple straight lines, rectangles, or ellipses. A Geometry can also be an arbitrarily complex path, consisting of a list of <a href="PathFigure.html">PathFigure</a>s.</p> <p>A Geometry must not be modified once it has been used by a <a href="Shape.html">Shape</a>. However, a Geometry may be shared by multiple Shapes.</p> <p>It is commonplace to create Geometries using geometry path string syntax: <a href="../../intro/geometry.html">Geometry Path Strings</a>. However it is much more efficient to create Geometries programmatically. One way to do that is illustrated by several of the samples that evaluate JavaScript such as:</p> <pre><code class="hljs js"><span class="hljs-keyword">new</span> go.Geometry() .add(<span class="hljs-keyword">new</span> go.PathFigure(p.x, p.y) .add(<span class="hljs-keyword">new</span> go.PathSegment(go.PathSegment.Arc, -sweep/<span class="hljs-number">2</span>, sweep, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, radius+layerThickness, radius+layerThickness)) .add(<span class="hljs-keyword">new</span> go.PathSegment(go.PathSegment.Line, q.x, q.y)) .add(<span class="hljs-keyword">new</span> go.PathSegment(go.PathSegment.Arc, sweep/<span class="hljs-number">2</span>, -sweep, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, radius, radius).close()));</code></pre> <p>See samples that make use of Geometries in the <a href="../../samples/index.html#geometries">samples index</a>.</p> </div> </section> <section class="tsd-panel-group tsd-index-group"> <h2>Index</h2> <section class="tsd-panel tsd-index-panel"> <div class="tsd-index-content"> <section class="tsd-index-section "> <h3>Constructors</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Geometry.html#constructor" class="tsd-kind-icon">constructor</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Properties</h3> <ul class="tsd-index-list"> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Geometry.html#bounds" class="tsd-kind-icon">bounds</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#defaultStretch" class="tsd-kind-icon">default<wbr>Stretch</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#endX" class="tsd-kind-icon">endX</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#endY" class="tsd-kind-icon">endY</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#figures" class="tsd-kind-icon">figures</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#spot1" class="tsd-kind-icon">spot1</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#spot2" class="tsd-kind-icon">spot2</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#startX" class="tsd-kind-icon">startX</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#startY" class="tsd-kind-icon">startY</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Geometry.html#type" class="tsd-kind-icon">type</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Methods</h3> <ul class="tsd-index-list"> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#add" class="tsd-kind-icon">add</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#computeBoundsWithoutOrigin" class="tsd-kind-icon">compute<wbr>Bounds<wbr>Without<wbr>Origin</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#copy" class="tsd-kind-icon">copy</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-fillPath" class="tsd-kind-icon">fill<wbr>Path</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#getAngleAlongPath" class="tsd-kind-icon">get<wbr>Angle<wbr>Along<wbr>Path</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#getFractionForPoint" class="tsd-kind-icon">get<wbr>Fraction<wbr>For<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#getPointAlongPath" class="tsd-kind-icon">get<wbr>Point<wbr>Along<wbr>Path</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#normalize" class="tsd-kind-icon">normalize</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#offset" class="tsd-kind-icon">offset</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-parse" class="tsd-kind-icon">parse</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#rotate" class="tsd-kind-icon">rotate</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Geometry.html#scale" class="tsd-kind-icon">scale</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-stringify" class="tsd-kind-icon">stringify</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Constants</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-Ellipse" class="tsd-kind-icon">Ellipse</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-Line" class="tsd-kind-icon">Line</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-Path" class="tsd-kind-icon">Path</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Geometry.html#static-Rectangle" class="tsd-kind-icon">Rectangle</a></li> </ul> </section> </div> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Constructors</h2> <section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">new <wbr>Geometry<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> type: <span class="tsd-signature-type">EnumValue</span></h5> <div class="tsd-comment tsd-typography"> <p>Construct an empty Geometry. The geometry type must be one of the following values: <a href="Geometry.html#static-Line">Geometry.Line</a>, <a href="Geometry.html#static-Ellipse">Geometry.Ellipse</a>, <a href="Geometry.html#static-Rectangle">Geometry.Rectangle</a>, <a href="Geometry.html#static-Path">Geometry.Path</a>.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> </li> </ul> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Properties</h2> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="bounds" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> bounds <span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This read-only property returns a rectangle that contains all points within the Geometry. The result will always contain the origin (0, 0).</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="defaultStretch" class="tsd-anchor"></a> <h3> default<wbr>Stretch <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the <a href="Shape.html#geometryStretch">Shape.geometryStretch</a> value the <a href="Shape.html">Shape</a> should use by default when the <a href="Shape.html#geometryStretch">Shape.geometryStretch</a> value is <a href="GraphObject.html#static-None">GraphObject.None</a>. The default value is <a href="GraphObject.html#static-Fill">GraphObject.Fill</a>. Some figure generators return a Geometry with this property set to <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>, in order to preserve its aspect ratio when used by a Shape that may have different sizes.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.5</p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="endX" class="tsd-anchor"></a> <h3> endX <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the ending X coordinate of the Geometry if it is of type <a href="Geometry.html#static-Line">Line</a>, <a href="Geometry.html#static-Rectangle">Rectangle</a>, or <a href="Geometry.html#static-Ellipse">Ellipse</a>. The initial value is zero.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="endY" class="tsd-anchor"></a> <h3> endY <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the ending Y coordinate of the Geometry if it is of type <a href="Geometry.html#static-Line">Line</a>, <a href="Geometry.html#static-Rectangle">Rectangle</a>, or <a href="Geometry.html#static-Ellipse">Ellipse</a>. The initial value is zero.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="figures" class="tsd-anchor"></a> <h3> figures <span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><a href="PathFigure.html" class="tsd-signature-type">PathFigure</a><span class="tsd-signature-symbol">&gt;</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the <a href="List.html">List</a> of <a href="PathFigure.html">PathFigure</a>s that describes the content of the path for Geometries of type <a href="Geometry.html#static-Path">Path</a>.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="spot1" class="tsd-anchor"></a> <h3> spot1 <span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the spot an &quot;Auto&quot; <a href="Panel.html">Panel</a> will use for the top-left corner of any panel content when the <a href="Shape.html#spot1">Shape.spot1</a> value is <a href="Spot.html#static-Default">Spot.Default</a>. The default value is <a href="Spot.html#static-TopLeft">Spot.TopLeft</a>, at the top-left point of the bounds of the Shape.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="spot2" class="tsd-anchor"></a> <h3> spot2 <span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the spot an &quot;Auto&quot; <a href="Panel.html">Panel</a> will use for the bottom-right corner of any panel content when the <a href="Shape.html#spot2">Shape.spot2</a> value is <a href="Spot.html#static-Default">Spot.Default</a>. The default value is <a href="Spot.html#static-BottomRight">Spot.BottomRight</a>, at the bottom-right point of the bounds of the Shape.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="startX" class="tsd-anchor"></a> <h3> startX <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the starting X coordinate of the Geometry if it is of type <a href="Geometry.html#static-Line">Line</a>, <a href="Geometry.html#static-Rectangle">Rectangle</a>, or <a href="Geometry.html#static-Ellipse">Ellipse</a>. The initial value is zero.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="startY" class="tsd-anchor"></a> <h3> startY <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the starting Y coordinate of the Geometry if it is of type <a href="Geometry.html#static-Line">Line</a>, <a href="Geometry.html#static-Rectangle">Rectangle</a>, or <a href="Geometry.html#static-Ellipse">Ellipse</a>. The initial value is zero.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="type" class="tsd-anchor"></a> <h3> type <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the type of the Geometry. The default type is <a href="Geometry.html#static-Path">Geometry.Path</a>. Other permissible values are <a href="Geometry.html#static-Line">Geometry.Line</a>, <a href="Geometry.html#static-Ellipse">Geometry.Ellipse</a>, or <a href="Geometry.html#static-Rectangle">Geometry.Rectangle</a>.</p> </div> </li> </ul> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Methods</h2> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="add" class="tsd-anchor"></a> <h3> add </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">add<span class="tsd-signature-symbol">(</span>figure<span class="tsd-signature-symbol">: </span><a href="PathFigure.html" class="tsd-signature-type">PathFigure</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Add a <a href="PathFigure.html">PathFigure</a> to the <a href="Geometry.html#figures">figures</a> list.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.5</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>figure: <a href="PathFigure.html" class="tsd-signature-type">PathFigure</a></h5> <div class="tsd-comment tsd-typography"> <p>a newly allocated unshared PathFigure that will become owned by this Geometry</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> <p>this</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="computeBoundsWithoutOrigin" class="tsd-anchor"></a> <h3> compute<wbr>Bounds<wbr>Without<wbr>Origin </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">compute<wbr>Bounds<wbr>Without<wbr>Origin<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Computes the Geometry&#39;s bounds without adding an origin point, and returns those bounds as a rect. This method does not modify the Geometry or its bounds.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-returns-title">Returns <a href="Rect.html" class="tsd-signature-type">Rect</a></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="copy" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagVirtual">Virtual</span> copy </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">copy<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Create a copy of this Geometry, with the same values and figures.</p> </div> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-fillPath" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> fill<wbr>Path </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">fill<wbr>Path<span class="tsd-signature-symbol">(</span>str<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Given a SVG or GoJS path string, returns a congruent path string with each pathfigure filled. For instance, &quot;M0 0 L22 22 L33 0&quot; would become &quot;F M0 0 L22 22 L33 0&quot;.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>str: <span class="tsd-signature-type">string</span></h5> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="getAngleAlongPath" class="tsd-anchor"></a> <h3> get<wbr>Angle<wbr>Along<wbr>Path </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">get<wbr>Angle<wbr>Along<wbr>Path<span class="tsd-signature-symbol">(</span>fraction<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Returns the slope expressed as an angle at the fractional distance (0-1) along this Geometry&#39;s path, in local coordinates.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>A fractional amount between 0 and 1, inclusive.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="getFractionForPoint" class="tsd-anchor"></a> <h3> get<wbr>Fraction<wbr>For<wbr>Point </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">get<wbr>Fraction<wbr>For<wbr>Point<span class="tsd-signature-symbol">(</span>pt<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Returns the fractional distance (0-1) along this Geometry&#39;s path for a nearby point.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>pt: <a href="Point.html" class="tsd-signature-type">Point</a></h5> <div class="tsd-comment tsd-typography"> <p>A Point, in local coordinates, near this Geometry.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4> <p>A fractional amount between 0 and 1, inclusive.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="getPointAlongPath" class="tsd-anchor"></a> <h3> get<wbr>Point<wbr>Along<wbr>Path </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">get<wbr>Point<wbr>Along<wbr>Path<span class="tsd-signature-symbol">(</span>fraction<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, result<span class="tsd-signature-symbol">?: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Returns the point at the fractional distance (0-1) along this Geometry&#39;s path.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>A fractional amount between 0 and 1, inclusive.</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> result: <a href="Point.html" class="tsd-signature-type">Point</a></h5> <div class="tsd-comment tsd-typography"> <p>an optional Point that is modified and returned; otherwise it allocates and returns a new Point.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Point.html" class="tsd-signature-type">Point</a></h4> <p>the Point, in local coordinates, of the fractional distance along the path.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="normalize" class="tsd-anchor"></a> <h3> normalize </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">normalize<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Normalizes the Geometry points in place by ensuring the top-left bounds of the geometry lines up with (0, 0), returning the <a href="Point.html">Point</a> (x, y) amount it was shifted. After this method is called there will be no negative X or Y value for the Geometry&#39;s bounds, and no empty space at the top-left of the Geometry.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-returns-title">Returns <a href="Point.html" class="tsd-signature-type">Point</a></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="offset" class="tsd-anchor"></a> <h3> offset </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">offset<span class="tsd-signature-symbol">(</span>x<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, y<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Offsets the Geometry in place by a given (x, y) amount</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>x: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The x-axis offset factor.</p> </div> </li> <li> <h5>y: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The y-axis offset factor.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> <p>this</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-parse" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> parse </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">parse<span class="tsd-signature-symbol">(</span>str<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, filled<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Produce a <a href="Geometry.html">Geometry</a> from a string that uses an SVG-like compact path geometry syntax. The syntax accepts all SVG Path Syntax (<a href="https://www.w3.org/TR/SVG/paths.html" target="_blank">SVG Path Syntax (w3.org)</a>), as well as three GoJS-specific tokens. Specifically, the following tokens are allowed:</p> <ul> <li><code>M (x,y)+</code> - Move commands</li> <li><code>L (x,y)+, H (x)+, V (y)+</code> Lines commands, including horizontal and vertical lines</li> <li><code>C (x1 y1 x2 y2 x y)+, S (x2 y2 x y)+</code> Cubic bezier curves</li> <li><code>Q (x1 y1 x y)+, T (x y)+</code> Quadratic bezier curves</li> <li><code>A (rx ry x-axis-rotation large-arc-flag clockwise-flag x y)+</code> Arcs (following SVG arc conventions)</li> <li><code>Z</code> Denotes that the previous subpath is closed</li> </ul> <p>Additionally there are some tokens specific to GoJS:</p> <ul> <li><code>B (startAngle, sweepAngle, centerX, centerY, radius)+</code> Arcs following GoJS canvas arc conventions</li> <li><code>X</code> Used before M-commands to denote separate PathFigures instead of a subpath</li> <li><code>F</code> Denotes whether the current PathFigure is filled (true if F is present)</li> <li><code>U</code> Denotes that the PathFigure is not shadowed</li> </ul> <p>See the <a href="../../intro/geometry.html">Introduction page on Geometry Parsing</a> for more details.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>str: <span class="tsd-signature-type">string</span></h5> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> filled: <span class="tsd-signature-type">boolean</span></h5> <div class="tsd-comment tsd-typography"> <p>whether figures should be filled. If true, all PathFigures in the string will be filled regardless of the presence of an &quot;F&quot; command or not. If false, all PathFigures will determine their own filled state by the presence of an &quot;F&quot; command or not. Default is false.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="rotate" class="tsd-anchor"></a> <h3> rotate </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">rotate<span class="tsd-signature-symbol">(</span>angle<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, x<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, y<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Rotates the Geometry in place by a given angle, with optional x and y values to rotate the geometry about. If no x and y value are given, (0, 0) is used as the rotation point.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>angle: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The angle to rotate by.</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> x: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The optional X point to rotate the geometry about. If no point is given, this value is 0.</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> y: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The optional Y point to rotate the geometry about. If no point is given, this value is 0.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> <p>this</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="scale" class="tsd-anchor"></a> <h3> scale </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">scale<span class="tsd-signature-symbol">(</span>x<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, y<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Scales the Geometry in place by a given (x, y) scale factor.</p> <p>If you want to flip a Geometry horizontally, call <code>geo.scale(-1, 1)</code>. If you want to flip a Geometry vertically, call <code>geo.scale(1, -1)</code>.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>x: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The x-axis scale factor.</p> </div> </li> <li> <h5>y: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>The y-axis scale factor.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h4> <p>this</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-stringify" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> stringify </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">stringify<span class="tsd-signature-symbol">(</span>val<span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This static function can be used to write out a <a href="Geometry.html">Geometry</a> as a string that can be read by <a href="Geometry.html#static-parse">Geometry.parse</a>.</p> <p>The string produced by this method is a superset of the SVG path string rules that contains some additional GoJS-specific tokens. See the <a href="../../intro/pictures.html">Introduction page on Geometry Parsing</a> for more details.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>val: <a href="Geometry.html" class="tsd-signature-type">Geometry</a></h5> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> </li> </ul> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Constants</h2> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Ellipse" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Ellipse <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For drawing an ellipse fitting within a rectangle; a value for <a href="Geometry.html#type">Geometry.type</a>. The ellipse fits within the rectangle that goes from the point (<a href="Geometry.html#startX">startX</a>, <a href="Geometry.html#startY">startY</a>) to the point (<a href="Geometry.html#endX">endX</a>, <a href="Geometry.html#endY">endY</a>).</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Line" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Line <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For drawing a simple straight line; a value for <a href="Geometry.html#type">Geometry.type</a>. The line goes from the point (<a href="Geometry.html#startX">startX</a>, <a href="Geometry.html#startY">startY</a>) to the point (<a href="Geometry.html#endX">endX</a>, <a href="Geometry.html#endY">endY</a>).</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Path" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Path <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For drawing a complex path made of a list of <a href="PathFigure.html">PathFigure</a>s; a value for <a href="Geometry.html#type">Geometry.type</a>.</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Rectangle" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Rectangle <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For drawing a rectangle; a value for <a href="Geometry.html#type">Geometry.type</a>. The rectangle goes from the point (<a href="Geometry.html#startX">startX</a>, <a href="Geometry.html#startY">startY</a>) to the point (<a href="Geometry.html#endX">endX</a>, <a href="Geometry.html#endY">endY</a>).</p> </div> </section> </section> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> </ul> <ul class="current"> <li class="current tsd-kind-class"> <a href="Geometry.html" class="tsd-kind-icon">Geometry</a> <ul> <li class=" tsd-kind-constructor tsd-parent-kind-class"> <a href="Geometry.html#constructor" class="tsd-kind-icon">constructor</a> </li> <li class=" tsd-kind-get-signature tsd-parent-kind-class"> <a href="Geometry.html#bounds" class="tsd-kind-icon">bounds</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#defaultStretch" class="tsd-kind-icon">default<wbr>Stretch</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#endX" class="tsd-kind-icon">endX</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#endY" class="tsd-kind-icon">endY</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#figures" class="tsd-kind-icon">figures</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#spot1" class="tsd-kind-icon">spot1</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#spot2" class="tsd-kind-icon">spot2</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#startX" class="tsd-kind-icon">startX</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#startY" class="tsd-kind-icon">startY</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Geometry.html#type" class="tsd-kind-icon">type</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#add" class="tsd-kind-icon">add</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#computeBoundsWithoutOrigin" class="tsd-kind-icon">compute<wbr>Bounds<wbr>Without<wbr>Origin</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#copy" class="tsd-kind-icon">copy</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Geometry.html#static-fillPath" class="tsd-kind-icon">fill<wbr>Path</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#getAngleAlongPath" class="tsd-kind-icon">get<wbr>Angle<wbr>Along<wbr>Path</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#getFractionForPoint" class="tsd-kind-icon">get<wbr>Fraction<wbr>For<wbr>Point</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#getPointAlongPath" class="tsd-kind-icon">get<wbr>Point<wbr>Along<wbr>Path</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#normalize" class="tsd-kind-icon">normalize</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#offset" class="tsd-kind-icon">offset</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Geometry.html#static-parse" class="tsd-kind-icon">parse</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#rotate" class="tsd-kind-icon">rotate</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Geometry.html#scale" class="tsd-kind-icon">scale</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Geometry.html#static-stringify" class="tsd-kind-icon">stringify</a> </li> <li class=" tsd-kind-c