javascript
/
tentone.escher.js
의 미러 https://github.com/tentone/escher.js.git


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

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>Renderer<span class="signature">(canvas, options)</span><span class="type-signature"></span></h2>
        
    
</header>

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

<div class="description">
    The renderer is responsible for drawing the objects structure into the canvas element and manage its rendering state.

Object are updated by the renderer before drawing, the renderer sorts the objects by layer, checks for pointer events and draw the objects into the screen.

Input handling is also performed by the renderer (it is also used for the event handling).
</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>canvas</code></td>
            

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


            </td>

            
            <td class="description last">Canvas to render the content to.</td>
        </tr>

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

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


            </td>

            
            <td class="description last">Renderer canvas options.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


    </div>

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

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


<div class="description">
    Indicates if the canvas should be automatically cleared before new frame is drawn.

If set to false the user should clear the frame before drawing.
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line97">line 97</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"> :Element</span></h4>


<div class="description">
    Canvas DOM element, the user needs to manage the canvas state.

The canvas size (width and height) should always match its actual display size (adjusted for the device pixel ratio).
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line56">line 56</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="container"><span class="type-signature"></span>container<span class="type-signature"> :Element</span></h4>


<div class="description">
    Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element.

If no division is defined the canvas parent element is used by default to place these objects.

The DOM container to be used can be obtained using the getDomContainer() method.
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line67">line 67</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="context"><span class="type-signature"></span>context<span class="type-signature"> :CanvasRenderingContext2D</span></h4>


<div class="description">
    Canvas 2D rendering context used to draw content.

The options passed thought the constructor are applied to the context created.
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line76">line 76</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    Event manager for DOM events created by the renderer.

Created automatically when the renderer is created. Disposed automatically when the renderer is destroyed.
</div>


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


        </li>
    </ul>


<dl class="details">

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

</dl>


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


<div class="description">
    Pointer input handler object, automatically updated by the renderer.

The pointer is attached to the DOM window and to the canvas provided by the user.
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line88">line 88</a>
    </li></ul></dd>
    

</dl>


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

        
    <h4 class="name" id="createRenderLoop"><span class="type-signature"></span>createRenderLoop<span class="signature">(group, viewport, onUpdate)</span><span class="type-signature"> &rarr; {<a href="AnimationTimer.html">AnimationTimer</a>}</span></h4>
    

<div class="description">
    Creates a infinite render loop to render the group into a viewport each frame.

Automatically creates a viewport controls object, used for the user to control the viewport.

The render loop can be accessed trough the animation timer returned. Should be stopped when no longer necessary to prevent memory/code leaks.
</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>group</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Object2D.html">Object2D</a></span>


            </td>

            
            <td class="description last">Object to be rendered, alongside with all its children. Object2D can be used as a container to group objects.</td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><a href="Viewport.html">Viewport</a></span>


            </td>

            
            <td class="description last">Viewport into the scene.</td>
        </tr>

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

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


            </td>

            
            <td class="description last">Function called before rendering the frame, can be used for additional logic code. Object logic should be directly written in the update method of objects.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line124">line 124</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    Animation timer created for this render loop. Should be stopped when no longer necessary.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type"><a href="AnimationTimer.html">AnimationTimer</a></span>


    </dd>
</dl>

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

<div class="description">
    Dispose the renderer object, clears the pointer events attached to the window/canvas.

Should be called if the renderer is no longer in use to prevent code/memory leaks.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line149">line 149</a>
    </li></ul></dd>
    

</dl>


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

<div class="description">
    Get the DOM container to be used to store DOM and SVG objects.

Can be set using the container attribute, by default the canvas parent element is used.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line107">line 107</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    DOM element selected for objects.
</div>


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


    </dd>
</dl>

    
    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(object, viewport)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Renders a object using a user defined viewport into a canvas element.

Before rendering automatically updates the input handlers and calculates the objects/viewport transformation matrices.

The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one.

Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop.
</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>object</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Object2D.html">Object2D</a></span>


            </td>

            
            <td class="description last">Object to be updated and drawn into the canvas, the Object2D should be used as a group to store all the other objects to be updated and drawn.</td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><a href="Viewport.html">Viewport</a></span>


            </td>

            
            <td class="description last">Viewport to be updated (should be the one where the objects will be rendered after).</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line167">line 167</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>