sgojs

<!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="Documentation for GoJS API"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/main.css"> <script async src="../assets/js/search.js" id="search-script"></script> </head> <body> <header> <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"> <h1 class="mb-0 p-1">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path> <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="tsd tsd-page-header"> <div class="tsd-page-toolbar"> <div class="w-full max-w-screen-xl mx-auto px-2"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" 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 tsd-page-title"> <div class="w-full max-w-screen-xl mx-auto px-2"> <div class="top-copyright"> <b>GoJS</b>® Diagramming Components<br/>version 2.1.47<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class Brush</h1> </div> </div> </div> </div> </header> <div class="tsd w-full max-w-screen-xl mx-auto pb-4"> <div class="row px-2 w-full"> <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">string</span><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" data-tsd-kind="Class">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">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EnumValue</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 'black'.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">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 'black'. 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" data-tsd-kind="Class">Map</a><span class="tsd-signature-symbol"><</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">></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" data-tsd-kind="Class">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'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> </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" data-tsd-kind="Class">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'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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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 "dark."</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" data-tsd-kind="Type alias">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 "dark." Does not account for transparency.</p> <p>Example usage:</p> <pre><code class="language-js"><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">nodeTemplate</span><span style="color: #D4D4D4"> =</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Node</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"Auto"</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"RoundedRectangle"</span><span style="color: #D4D4D4">, { </span><span style="color: #9CDCFE">strokeWidth:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> },</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Binding</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"fill"</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"color"</span><span style="color: #D4D4D4">)),</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">TextBlock</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> { </span><span style="color: #9CDCFE">margin:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">8</span><span style="color: #D4D4D4"> },</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Binding</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"stroke"</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"color"</span><span style="color: #D4D4D4">, </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4"> (</span><span style="color: #9CDCFE">c</span><span style="color: #D4D4D4">) {</span> <span style="color: #D4D4D4"> </span><span style="color: #6A9955">// Dark nodes use white text, light nodes use black text</span> <span style="color: #D4D4D4"> </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Brush</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">isDark</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">c</span><span style="color: #D4D4D4">) ? </span><span style="color: #CE9178">"white"</span><span style="color: #D4D4D4"> : </span><span style="color: #CE9178">"black"</span><span style="color: #D4D4D4">;</span> <span style="color: #D4D4D4"> }),</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Binding</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"text"</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"key"</span><span style="color: #D4D4D4">)</span> <span style="color: #D4D4D4"> )</span> <span style="color: #D4D4D4"> );</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" data-tsd-kind="Type alias">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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>