UNPKG

gojs

Version:

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

939 lines 51.9 kB
<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Brush | 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 Brush</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">Brush</span> </li> </ul> </section> <section class="tsd-panel tsd-comment"> <div class="tsd-comment tsd-typography"> <p>A Brush holds color information and describes how to draw the inside of a <a href="Shape.html">Shape</a> or the stroke of a shape or a <a href="TextBlock.html">TextBlock</a> or the background of any <a href="GraphObject.html">GraphObject</a>.</p> <p>A Brush must not be modified once it has been assigned to a <a href="GraphObject.html">GraphObject</a>, such as the <a href="Shape.html#fill">Shape.fill</a> or <a href="TextBlock.html#stroke">TextBlock.stroke</a> or <a href="GraphObject.html#background">GraphObject.background</a>. However, a Brush may be shared by multiple GraphObjects.</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="Brush.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-accessor tsd-parent-kind-class"><a href="Brush.html#color" class="tsd-kind-icon">color</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#colorStops" class="tsd-kind-icon">color<wbr>Stops</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#end" class="tsd-kind-icon">end</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#endRadius" class="tsd-kind-icon">end<wbr>Radius</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#pattern" class="tsd-kind-icon">pattern</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#start" class="tsd-kind-icon">start</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#startRadius" class="tsd-kind-icon">start<wbr>Radius</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.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="Brush.html#addColorStop" class="tsd-kind-icon">add<wbr>Color<wbr>Stop</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#copy" class="tsd-kind-icon">copy</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-darken" class="tsd-kind-icon">darken</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#darkenBy" class="tsd-kind-icon">darken<wbr>By</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-darkenBy" class="tsd-kind-icon">darken<wbr>By</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#isDark" class="tsd-kind-icon">is<wbr>Dark</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-isDark" class="tsd-kind-icon">is<wbr>Dark</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-isValidColor" class="tsd-kind-icon">is<wbr>Valid<wbr>Color</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-lighten" class="tsd-kind-icon">lighten</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#lightenBy" class="tsd-kind-icon">lighten<wbr>By</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-lightenBy" class="tsd-kind-icon">lighten<wbr>By</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-mix" class="tsd-kind-icon">mix</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-randomColor" class="tsd-kind-icon">random<wbr>Color</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="Brush.html#static-HSL" class="tsd-kind-icon">HSL</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Lab" class="tsd-kind-icon">Lab</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Linear" class="tsd-kind-icon">Linear</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Pattern" class="tsd-kind-icon">Pattern</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Radial" class="tsd-kind-icon">Radial</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Solid" class="tsd-kind-icon">Solid</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>Brush<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-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Brush.html" class="tsd-signature-type">Brush</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Construct a Brush class that holds the given color information.</p> </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><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>Optional, one of the values <a href="Brush.html#static-Solid">Brush.Solid</a>, <a href="Brush.html#static-Linear">Brush.Linear</a>, <a href="Brush.html#static-Radial">Brush.Radial</a>, <a href="Brush.html#static-Pattern">Brush.Pattern</a>, or a well-formed CSS string describing a solid color brush. No parameter defaults to a <a href="Brush.html#static-Solid">Brush.Solid</a> with a color description of &#39;black&#39;.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type">Brush</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-accessor tsd-parent-kind-class"> <a name="color" class="tsd-anchor"></a> <h3> color <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the color of a solid Brush. The default value is &#39;black&#39;. The value must be a valid CSS color string.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="colorStops" class="tsd-anchor"></a> <h3> color<wbr>Stops <span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets a Map holding all of the color stops used in this gradient, where the key is a number, the fractional distance between 0 and 1 (inclusive), and where the corresponding value is a color string.</p> <p>Call <a href="Brush.html#addColorStop">addColorStop</a> in order to add color stops to this brush. This property value may be null if no gradient stops have been defined.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="end" class="tsd-anchor"></a> <h3> end <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 ending location for a linear or radial gradient. A <a href="Spot.html">Spot</a> value specifies a relative point in the object&#39;s <a href="GraphObject.html#naturalBounds">GraphObject.naturalBounds</a>. The default value is <a href="Spot.html#static-BottomCenter">Spot.BottomCenter</a> for linear gradients and <a href="Spot.html#static-Center">Spot.Center</a> for radial gradients.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="endRadius" class="tsd-anchor"></a> <h3> end<wbr>Radius <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 radius of a radial brush at the end location. The default value is NaN.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="pattern" class="tsd-anchor"></a> <h3> pattern <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLImageElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the pattern of a brush of type <a href="Brush.html#static-Pattern">Brush.Pattern</a>.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="start" class="tsd-anchor"></a> <h3> start <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 starting location for a linear or radial gradient. A <a href="Spot.html">Spot</a> value specifies a relative point in the object&#39;s <a href="GraphObject.html#naturalBounds">GraphObject.naturalBounds</a>. The default value is <a href="Spot.html#static-TopCenter">Spot.TopCenter</a> for linear gradients and <a href="Spot.html#static-Center">Spot.Center</a> for radial gradients.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="startRadius" class="tsd-anchor"></a> <h3> start<wbr>Radius <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 radius of a radial brush at the start location. The default value is 0.</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 brush. The default value is <a href="Brush.html#static-Solid">Brush.Solid</a>. The value must be one of: <a href="Brush.html#static-Solid">Brush.Solid</a>, <a href="Brush.html#static-Linear">Brush.Linear</a>, <a href="Brush.html#static-Radial">Brush.Radial</a>, <a href="Brush.html#static-Pattern">Brush.Pattern</a>. If the new value is a linear or radial brush type, and if the <a href="Brush.html#start">start</a> or <a href="Brush.html#end">end</a> spots are not specific spots, they are changed to be specific spots, depending on the type of brush.</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="addColorStop" class="tsd-anchor"></a> <h3> add<wbr>Color<wbr>Stop </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">add<wbr>Color<wbr>Stop<span class="tsd-signature-symbol">(</span>loc<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, color<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><a href="Brush.html" class="tsd-signature-type">Brush</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Specify a particular color at a particular fraction of the distance. If the <a href="Brush.html#type">type</a> is <a href="Brush.html#static-Solid">Brush.Solid</a>, change the type to <a href="Brush.html#static-Linear">Brush.Linear</a>. You should have a color stop at 0 and a color stop at 1. You should not have duplicate color stop values at the same fractional distance.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>loc: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>A number between 0 and 1 (inclusive).</p> </div> </li> <li> <h5>color: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type">Brush</a></h4> <p>this Brush</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="copy" class="tsd-anchor"></a> <h3> 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="Brush.html" class="tsd-signature-type">Brush</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Create a copy of this Brush with the same values.</p> </div> <h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type">Brush</a></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-darken" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> darken </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">darken<span class="tsd-signature-symbol">(</span>color<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>This static function takes a color and darkens it by 20% in the Lab color space. This is a convenience function which calls <a href="Brush.html#static-darkenBy">Brush.darkenBy</a>.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> <p>A CSS string for the darkened color in RGBA.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="darkenBy" class="tsd-anchor"></a> <h3> darken<wbr>By </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">darken<wbr>By<span class="tsd-signature-symbol">(</span>fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<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="Brush.html" class="tsd-signature-type">Brush</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Modifies all colors within this Brush, darkening them by some fraction.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>Fraction to darken the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5> <div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type">Brush</a></h4> <p>This Brush with modified color values.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-darkenBy" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> darken<wbr>By </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">darken<wbr>By<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<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><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 takes a color and darkens it.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>Fraction to darken the color by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5> <div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> <p>A CSS string for the darkened color in RGBA or HSLA.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="isDark" class="tsd-anchor"></a> <h3> is<wbr>Dark </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">is<wbr>Dark<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This function determines whether this Brush is &quot;dark.&quot;</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>2.0</p> </dd> </dl> </div> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-isDark" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> is<wbr>Dark </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">is<wbr>Dark<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type">BrushLike</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This static function takes a color and determines whether it is &quot;dark.&quot; Does not account for transparency.</p> <p>Example usage:</p> <pre><code class="hljs js">myDiagram.nodeTemplate = $(go.Node, <span class="hljs-string">"Auto"</span>, $(go.Shape, <span class="hljs-string">"RoundedRectangle"</span>, { <span class="hljs-attr">strokeWidth</span>: <span class="hljs-number">0</span> }, <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"fill"</span>, <span class="hljs-string">"color"</span>)), $(go.TextBlock, { <span class="hljs-attr">margin</span>: <span class="hljs-number">8</span> }, <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"stroke"</span>, <span class="hljs-string">"color"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">c</span>) </span>{ <span class="hljs-comment">// Dark nodes use white text, light nodes use black text</span> <span class="hljs-keyword">return</span> go.Brush.isDark(c) ? <span class="hljs-string">"white"</span> : <span class="hljs-string">"black"</span>; }), <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>, <span class="hljs-string">"key"</span>) ) );</code></pre> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>2.0</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color: <a href="../index.html#BrushLike" class="tsd-signature-type">BrushLike</a></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string or a Brush.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-isValidColor" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> is<wbr>Valid<wbr>Color </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">is<wbr>Valid<wbr>Color<span class="tsd-signature-symbol">(</span>color<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">boolean</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This static function returns true if a given color string is well-formed for drawing.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A color string to validate.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-lighten" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> lighten </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">lighten<span class="tsd-signature-symbol">(</span>color<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>This static function takes a color and lightens it by 20% in the Lab color space. This is a convenience function which calls <a href="Brush.html#static-lightenBy">Brush.lightenBy</a>.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> <p>A CSS string for the lightened color in RGBA.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="lightenBy" class="tsd-anchor"></a> <h3> lighten<wbr>By </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">lighten<wbr>By<span class="tsd-signature-symbol">(</span>fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<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="Brush.html" class="tsd-signature-type">Brush</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Modifies all colors within this Brush, lightening them by some fraction.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>Fraction to lighten the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5> <div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type">Brush</a></h4> <p>This Brush with modified color values.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-lightenBy" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> lighten<wbr>By </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">lighten<wbr>By<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<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><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 takes a color and lightens it.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.7</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>Fraction to lighten the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5> <div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> <p>A CSS string for the lightened color in RGBA or HSLA.</p> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a name="static-mix" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> mix </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">mix<span class="tsd-signature-symbol">(</span>color1<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, color2<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</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">string</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This static function takes two colors and mixes them together, using the (optionally) specified amount of the second color.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>2.0</p> </dd> </dl> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>color1: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div> </li> <li> <h5>color2: <span class="tsd-signature-type">string</span></h5> <div class="tsd-comment tsd-typography"> <p>Another valid CSS color string to mix.</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>Fraction specifying how much color2 to mix into color1. Defaults to .5, must be between 0 and 1 (inclusive).</p> </div> </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 tsd-is-static"> <a name="static-randomColor" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> random<wbr>Color </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"> <li class="tsd-signature tsd-kind-icon">random<wbr>Color<span class="tsd-signature-symbol">(</span>min<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, max<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">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 generate a random color.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> min: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>A number between 0 and 255, defaults to 128.</p> </div> </li> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> max: <span class="tsd-signature-type">number</span></h5> <div class="tsd-comment tsd-typography"> <p>A number between 0 and 255, defaults to 255.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4> <p>A color value in # hexadecimal format.</p> </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-HSL" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> HSL <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For lightening and darkening, used as a color-space value.</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Lab" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Lab <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For lightening and darkening, used as a color-space value.</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Linear" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Linear <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For linear gradient brushes, used as the value for <a href="Brush.html#type">Brush.type</a>.</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Pattern" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Pattern <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For pattern brushes, used as the value for <a href="Brush.html#type">Brush.type</a>.</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Radial" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Radial <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For radial gradient brushes, used as the value for <a href="Brush.html#type">Brush.type</a>.</p> </div> </section> <section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"> <a name="static-Solid" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> Solid <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3> <div class="tsd-comment tsd-typography"> <p>For simple, solid color brushes, used as the value for <a href="Brush.html#type">Brush.type</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="Brush.html" class="tsd-kind-icon">Brush</a> <ul> <li class=" tsd-kind-constructor tsd-parent-kind-class"> <a href="Brush.html#constructor" class="tsd-kind-icon">constructor</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#color" class="tsd-kind-icon">color</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#colorStops" class="tsd-kind-icon">color<wbr>Stops</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#end" class="tsd-kind-icon">end</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#endRadius" class="tsd-kind-icon">end<wbr>Radius</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#pattern" class="tsd-kind-icon">pattern</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#start" class="tsd-kind-icon">start</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#startRadius" class="tsd-kind-icon">start<wbr>Radius</a> </li> <li class=" tsd-kind-accessor tsd-parent-kind-class"> <a href="Brush.html#type" class="tsd-kind-icon">type</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Brush.html#addColorStop" class="tsd-kind-icon">add<wbr>Color<wbr>Stop</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Brush.html#copy" class="tsd-kind-icon">copy</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-darken" class="tsd-kind-icon">darken</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Brush.html#darkenBy" class="tsd-kind-icon">darken<wbr>By</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-darkenBy" class="tsd-kind-icon">darken<wbr>By</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Brush.html#isDark" class="tsd-kind-icon">is<wbr>Dark</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-isDark" class="tsd-kind-icon">is<wbr>Dark</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-isValidColor" class="tsd-kind-icon">is<wbr>Valid<wbr>Color</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-lighten" class="tsd-kind-icon">lighten</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="Brush.html#lightenBy" class="tsd-kind-icon">lighten<wbr>By</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-lightenBy" class="tsd-kind-icon">lighten<wbr>By</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-mix" class="tsd-kind-icon">mix</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static"> <a href="Brush.html#static-randomColor" class="tsd-kind-icon">random<wbr>Color</a> </li> <li class=" tsd-kind-constant tsd-parent-kind-class t