javascript
/
tentone.escher.js
зеркало из https://github.com/tentone/escher.js.git


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

    
<section>

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

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

<div class="description">
    Base 2D object class, implements all the object positioning and scalling features.
</div>


<dl class="details">

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

</dl>


    </div>

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

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


<div class="description">
    Flag to indicate if the object is currently being dragged.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    List of children objects attached to the object.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Indicates if its possible to drag the object around.

If true the onPointerDrag callback is used to update the state of the object.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Global transformation matrix multiplied by the parent matrix.

Used to transform the object before projecting into screen coordinates.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Flag to indicate wheter this objet ignores the viewport transformation.
</div>


<dl class="details">

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

</dl>


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


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

Used to convert pointer input points into object coordinates.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Layer of this object, objects are sorted by layer value.

Lower layer value is draw first.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Depth level in the object tree, objects with higher depth are drawn on top.

The layer value is considered first.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Masks being applied to this object.

Multiple masks can be used simultaneously.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Local transformation matrix applied to the object.
</div>


<dl class="details">

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

</dl>


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


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


<dl class="details">

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

</dl>


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


<div class="description">
    Method called when the object its added to a parent.

Receives (parent) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method called when the pointer button is pressed down (single time).

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method called while the pointer button is pressed.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method called when the pointer button is released (single time).

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method called when the pointer enters the object.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method called when the was inside of the object and leaves the object.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method while the pointer is over (inside) of the object.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Method called when the object gets removed from its parent

Receives (parent) as arguments.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Callback method called every time before the object is draw into the canvas.

Can be used to run preparation code, move the object, etc.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Origin of the object used as point of rotation.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Parent object, the object position is affected by its parent position.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Indicates if this object uses pointer events.

Can be set false to skip the pointer interaction events.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Flag indicating if the pointer is inside of the element.

Used to control object event.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Position of the object.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Flag to indicate if the context of canvas should be restored after render.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Rotation of the object relative to its center.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Flag to indicate if the context of canvas should be saved before render.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Scale of the object.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    UUID of the object.
</div>


<dl class="details">

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

</dl>


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


<div class="description">
    Indicates if the object is visible.
</div>


<dl class="details">

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

</dl>


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

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

<div class="description">
    Attach a children to the object.
</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">
            
            </td>

            
            <td class="description last">Object to attach to this object.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


    <h4 class="name" id="draw"><span class="type-signature"></span>draw<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Draw the object into the canvas.

Has to be implemented by underlying classes.
</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">CanvasContext</span>


            </td>

            
            <td class="description last">Canvas 2d drawing context.</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 applied to the canvas.</td>
        </tr>

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

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


            </td>

            
            <td class="description last">DOM canvas element where the content is being drawn.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


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

<div class="description">
    Check if a point is inside of the object.
</div>


<dl class="details">

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

</dl>


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

<div class="description">
    Callback method while the object is being dragged across the screen.

By default is adds the delta value to the object position (making it follow the mouse movement).

Delta is the movement of the pointer already translated into local object coordinates.

Receives (pointer, viewport, delta) as arguments.
</div>


<dl class="details">

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

</dl>


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

<div class="description">
    Remove object from the children list.
</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">
            
            </td>

            
            <td class="description last">Object to be removed.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


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

<div class="description">
    Apply the transform to the rendering context.

It is assumed that the viewport transform is pre-applied to the context.

Can also be used for pre rendering logic.
</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">CanvasContext</span>


            </td>

            
            <td class="description last">Canvas 2d drawing context.</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 applied to the canvas.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


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

<div class="description">
    Traverse the object tree and run a function for all objects.
</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>callback</code></td>
            

            <td class="type">
            
            </td>

            
            <td class="description last">Callback function that receives the object as parameter.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line146">line 146</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">
    Update the transformation matrix of the object.
</div>


<dl class="details">

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

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><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="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</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>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
</footer>

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