javascript
/
tentone.escher.js
mirror of https://github.com/tentone/escher.js.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: RadialGradientStyle</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: RadialGradientStyle</h1>

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>RadialGradientStyle<span class="signature">()</span><span class="type-signature"></span></h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h4 class="name" id="RadialGradientStyle"><span class="type-signature"></span>new RadialGradientStyle<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    Radial gradient interpolates colors from a point to another point around up to a starting and finishing radius value.

If the start and end point are the same it interpolates around the starting and ending radius forming a circle. Outside of the radius the color is solid.

The get method returns a CanvasGradient https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient when generated.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_RadialGradientStyle.js.html">objects/style/RadialGradientStyle.js</a>, <a href="objects_style_RadialGradientStyle.js.html#line15">line 15</a>
    </li></ul></dd>
    

</dl>


    </div>

    
        <h3 class="subsection-title">Extends</h3>

        
    <ul>
        <li><a href="GradientStyle.html">GradientStyle</a></li>
    </ul>


        <h3 class="subsection-title">Members</h3>

        
<h4 class="name" id="cache"><span class="type-signature"></span>cache<span class="type-signature"> :string|CanvasGradient|CanvasPattern</span></h4>


<div class="description">
    Cached style object pre-generated from previous calls. To avoid regenerating the same style object every cycle.

Inherited classes should write their own get method that returns the style object and stores it in this property.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">string</span>
|

<span class="param-type">CanvasGradient</span>
|

<span class="param-type">CanvasPattern</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="Style.html#cache">Style#cache</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_Style.js.html">objects/style/Style.js</a>, <a href="objects_style_Style.js.html#line17">line 17</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="colors"><span class="type-signature"></span>colors<span class="type-signature"> :Array.&lt;<a href="GradientColorStop.html">GradientColorStop</a>></span></h4>


<div class="description">
    List of colors that compose this gradient ordered.

You need to add at least one color stop to have a visible gradient.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Array.&lt;<a href="GradientColorStop.html">GradientColorStop</a>></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="GradientStyle.html#colors">GradientStyle#colors</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_GradientStyle.js.html">objects/style/GradientStyle.js</a>, <a href="objects_style_GradientStyle.js.html#line23">line 23</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="end"><span class="type-signature"></span>end<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>


<div class="description">
    The coordinates of the ending circle of the gradient.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="Vector2.html">Vector2</a></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_RadialGradientStyle.js.html">objects/style/RadialGradientStyle.js</a>, <a href="objects_style_RadialGradientStyle.js.html#line38">line 38</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="endRadius"><span class="type-signature"></span>endRadius<span class="type-signature"> :number</span></h4>


<div class="description">
    The radius of the ending circle.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_RadialGradientStyle.js.html">objects/style/RadialGradientStyle.js</a>, <a href="objects_style_RadialGradientStyle.js.html#line45">line 45</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="needsUpdate"><span class="type-signature"></span>needsUpdate<span class="type-signature"> :boolean</span></h4>


<div class="description">
    Indicates if the style object needs to be updated, should be used after applying changed to the style in order to generate a new object.

Inherited classes should implement this functionality.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">boolean</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="Style.html#needsUpdate">Style#needsUpdate</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_Style.js.html">objects/style/Style.js</a>, <a href="objects_style_Style.js.html#line26">line 26</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="start"><span class="type-signature"></span>start<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>


<div class="description">
    The coordinates of the starting circle of the gradient.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="Vector2.html">Vector2</a></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_RadialGradientStyle.js.html">objects/style/RadialGradientStyle.js</a>, <a href="objects_style_RadialGradientStyle.js.html#line24">line 24</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="startRadius"><span class="type-signature"></span>startRadius<span class="type-signature"> :number</span></h4>


<div class="description">
    The radius of the starting circle.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_RadialGradientStyle.js.html">objects/style/RadialGradientStyle.js</a>, <a href="objects_style_RadialGradientStyle.js.html#line31">line 31</a>
    </li></ul></dd>
    

</dl>


        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="addColorStop"><span class="type-signature"></span>addColorStop<span class="signature">(offset, color)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Add a new color stop defined by an offset and a color to the gradient.

If the offset is not between 0 and 1 inclusive, or if color can't be parsed as a CSS color, an error is raised.
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">Offset of the color stop between 0 and 1 inclusive.</td>
        </tr>

    
        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last">CSS color value.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="GradientStyle.html#addColorStop">GradientStyle#addColorStop</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_GradientStyle.js.html">objects/style/GradientStyle.js</a>, <a href="objects_style_GradientStyle.js.html#line36">line 36</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="get"><span class="type-signature"></span>get<span class="signature">(context)</span><span class="type-signature"> &rarr; {string|CanvasGradient|CanvasPattern}</span></h4>
    

<div class="description">
    Get generated style object from style data and the drawing context.
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>context</code></td>
            

            <td class="type">
            
                
<span class="param-type">CanvasRenderingContext2D</span>


            </td>

            
            <td class="description last">Context being used to draw the object.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-overrides">Overrides:</dt>
    <dd class="tag-overrides"><ul class="dummy"><li>
        <a href="GradientStyle.html#get">GradientStyle#get</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_Style.js.html">objects/style/Style.js</a>, <a href="objects_style_Style.js.html#line35">line 35</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    Return the canvas style object generated.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">string</span>
|

<span class="param-type">CanvasGradient</span>
|

<span class="param-type">CanvasPattern</span>


    </dd>
</dl>

    
    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Parse the style attributes from JSON object data created with the serialize() method.
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>data</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last">Serialized style data.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-overrides">Overrides:</dt>
    <dd class="tag-overrides"><ul class="dummy"><li>
        <a href="GradientStyle.html#parse">GradientStyle#parse</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_Style.js.html">objects/style/Style.js</a>, <a href="objects_style_Style.js.html#line49">line 49</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
    

<div class="description">
    Serialize the style to JSON object, called by the objects using these styles.
</div>


<dl class="details">

    
    <dt class="tag-overrides">Overrides:</dt>
    <dd class="tag-overrides"><ul class="dummy"><li>
        <a href="GradientStyle.html#serialize">GradientStyle#serialize</a>
    </li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_Style.js.html">objects/style/Style.js</a>, <a href="objects_style_Style.js.html#line42">line 42</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    Serialized style data.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">Object</span>


    </dd>
</dl>

    
</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="AnimationTimer.html">AnimationTimer</a></li><li><a href="BarGraph.html">BarGraph</a></li><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="ColorStyle.html">ColorStyle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Gauge.html">Gauge</a></li><li><a href="GradientColorStop.html">GradientColorStop</a></li><li><a href="GradientStyle.html">GradientStyle</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="LinearGradientStyle.html">LinearGradientStyle</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Path.html">Path</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="PatternStyle.html">PatternStyle</a></li><li><a href="PieChart.html">PieChart</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="RadialGradientStyle.html">RadialGradientStyle</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="ScatterGraph.html">ScatterGraph</a></li><li><a href="Style.html">Style</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 14:24:36 GMT+0100 (Hora de verão da Europa Ocidental)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>