javascript
/
tentone.escher.js
-ын хуулбар https://github.com/tentone/escher.js.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: PatternStyle</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: PatternStyle</h1>

    
<section>

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

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

<div class="description">
    Pattern style represents an opaque object describing a pattern, based on an image, a canvas, or a video.

The get method returns a CanvasPattern object https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern created by the context.createPattern() 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>source</code></td>
            

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


            </td>

            
            <td class="description last">Source element of the pattern.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_PatternStyle.js.html">objects/style/PatternStyle.js</a>, <a href="objects_style_PatternStyle.js.html#line14">line 14</a>
    </li></ul></dd>
    

</dl>


    </div>

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

        
    <ul>
        <li><a href="Style.html">Style</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="tag-overrides">Overrides:</dt>
    <dd class="tag-overrides"><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="matrix"><span class="type-signature"></span>matrix<span class="type-signature"> :<a href="Matrix.html">Matrix</a></span></h4>


<div class="description">
    Transformation matrix applied to the pattern.

The transformation allows to move, rotate and scale the pattern freely
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="Matrix.html">Matrix</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_PatternStyle.js.html">objects/style/PatternStyle.js</a>, <a href="objects_style_PatternStyle.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="tag-overrides">Overrides:</dt>
    <dd class="tag-overrides"><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="repetition"><span class="type-signature"></span>repetition<span class="type-signature"> :string</span></h4>


<div class="description">
    Repetition indicates how the pattern image should be repeated.

Possible values are "repeat", "repeat-x", "repeat-y" or "no-repeat".

More information about this attribute here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern.
</div>


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


        </li>
    </ul>


<dl class="details">

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

</dl>


<h4 class="name" id="source"><span class="type-signature"></span>source<span class="type-signature"> :CanvasImageSource</span></h4>


<div class="description">
    Source of the pattern style. Can be a image, video or another canvas element

By default a empty image element is created.
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_PatternStyle.js.html">objects/style/PatternStyle.js</a>, <a href="objects_style_PatternStyle.js.html#line25">line 25</a>
    </li></ul></dd>
    

</dl>


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

        
    <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="Style.html#get">Style#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="Style.html#parse">Style#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="Style.html#serialize">Style#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>

    
    <h4 class="name" id="setTransform"><span class="type-signature"></span>setTransform<span class="signature">(transform)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Applies an 2x3 transformation matrix representing a linear transform to the pattern.
</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>transform</code></td>
            

            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


            </td>

            
            <td class="description last">2x3 Transformation matrix.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="objects_style_PatternStyle.js.html">objects/style/PatternStyle.js</a>, <a href="objects_style_PatternStyle.js.html#line56">line 56</a>
    </li></ul></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>