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


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

    
<section>

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

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

<div class="description">
    Viewport defines the user view into the content being rendered, similar to a camera it defines the size of the content, rotation and position of the content.

The viewport can be moved, rotated and scaled to navigate the virtual canvas.
</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 DOM element where the viewport is being rendered.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


    </div>

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

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


<div class="description">
    Canvas DOM element where the viewport is being rendered.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line27">line 27</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    Center point of the viewport. Relative to the size of the canvas.

Rotation and zoom is applied relative to this point.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line43">line 43</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="centerOnPointer"><span class="type-signature"></span>centerOnPointer<span class="type-signature"></span></h4>


<div class="description">
    Flag to indicate if the viewport should move when scaling.

For some application its easier to focus the target if the viewport moves to the pointer location while scaling.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Inverse of the local transformation matrix.

Used to transform points from local to global coordinates.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line73">line 73</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">
    Local transformation matrix applied to the object.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line64">line 64</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    If true the matrix is updated before rendering the object.

Disable this if you want to update the matrix manually.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line82">line 82</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    Position of the viewport.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line34">line 34</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    Rotation of the object relative to its center.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line57">line 57</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="rotationPoint"><span class="type-signature"></span>rotationPoint<span class="type-signature"></span></h4>


<div class="description">
    Value of the initial point of rotation if the viewport is being rotated.

Is set to null when the viewport is not being rotated.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Scale of the object.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line50">line 50</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="uuid"><span class="type-signature"></span>uuid<span class="type-signature"> :string</span></h4>


<div class="description">
    UUID of the object.
</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="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line20">line 20</a>
    </li></ul></dd>
    

</dl>


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

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

<div class="description">
    Center the viewport relative to a object.

The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.

Uses the object's local transformation matrix and the canvas size to calculate the new position of the viewport.
</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 centered on the viewport.</td>
        </tr>

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

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


            </td>

            
            <td class="description last">Canvas element where the image is drawn.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


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

<div class="description">
    Calculate and update the viewport transformation matrix.

Also updates the inverse matrix of the viewport.
</div>


<dl class="details">

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