jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Docs updated

Browse source
This commit is contained in:
Mat Groves 2013-11-02 11:37:42 +00:00
parent a46b74f8ca
commit 6c762fb396
119 changed files with 38715 additions and 9039 deletions
Download patch file Download diff file Expand all files Collapse all files

573
docs/files/src_pixi_InteractionManager.js.html
View file

@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;pixi&#x2F;InteractionManager.js - Pixi.JS</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
<script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
<title>src/pixi/InteractionManager.js - Pixi.JS</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
@ -15,7 +15,7 @@
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
@ -41,71 +41,95 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="..&#x2F;classes/Circle.html">Circle</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="..&#x2F;classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</a></li>
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
<li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
<li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Text.html">Text</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
@ -142,80 +166,103 @@
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1 class="file-heading">File: src&#x2F;pixi&#x2F;InteractionManager.js</h1>
<h1 class="file-heading">File: src/pixi/InteractionManager.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
&#x2F;**
The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
This manager also supports multitouch.
@class InteractionManager
@constructor
@param stage {Stage}
@type Stage
*&#x2F;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
* This manager also supports multitouch.
*
* @class InteractionManager
* @constructor
* @param stage {Stage} The stage to handle interactions
*/
PIXI.InteractionManager = function(stage)
{
&#x2F;**
/**
* a refference to the stage
*
* @property stage
* @type Stage
*&#x2F;
*/
this.stage = stage;
&#x2F;&#x2F; helpers
this.tempPoint = new PIXI.Point();
&#x2F;&#x2F;this.tempMatrix = mat3.create();
this.mouseoverEnabled = true;
&#x2F;**
* the mouse data
/**
* the mouse data
*
* @property mouse
* @type InteractionData
*&#x2F;
*/
this.mouse = new PIXI.InteractionData();
&#x2F;**
* an object that stores current touches (InteractionData) by id reference
/**
* an object that stores current touches (InteractionData) by id reference
*
* @property touchs
* @type Object
*&#x2F;
*/
this.touchs = {};
&#x2F;&#x2F;tiny little interactiveData pool!
this.pool = [];
this.interactiveItems = [];
// helpers
this.tempPoint = new PIXI.Point();
//this.tempMatrix = mat3.create();
this.mouseoverEnabled = true;
//tiny little interactiveData pool!
this.pool = [];
this.interactiveItems = [];
this.interactionDOMElement = null;
//this will make it so that you dont have to call bind all the time
this.onMouseMove = this.onMouseMove.bind( this );
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.last = 0;
}
&#x2F;&#x2F; constructor
PIXI.InteractionManager.constructor = PIXI.InteractionManager;
// constructor
PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager;
/**
* Collects an interactive sprite recursively to have their interactions managed
*
* @method collectInteractiveSprite
* @param displayObject {DisplayObject} the displayObject to collect
* @param iParent {DisplayObject}
* @private
*/
PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent)
{
var children = displayObject.children;
var length = children.length;
&#x2F;&#x2F;&#x2F; make an interaction tree... {item.__interactiveParent}
/// make an interaction tree... {item.__interactiveParent}
for (var i = length-1; i &gt;= 0; i--)
{
var child = children[i];
if(child.visible) {
&#x2F;&#x2F; push all interactive bits
// if(child.visible) {
// push all interactive bits
if(child.interactive)
{
iParent.interactiveChildren = true;
&#x2F;&#x2F;child.__iParent = iParent;
//child.__iParent = iParent;
this.interactiveItems.push(child);
if(child.children.length &gt; 0)
@ -232,48 +279,102 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
this.collectInteractiveSprite(child, iParent);
}
}
}
// }
}
}
/**
* Sets the target for event delegation
*
* @method setTarget
* @param target {WebGLRenderer|CanvasRenderer} the renderer to bind events to
* @private
*/
PIXI.InteractionManager.prototype.setTarget = function(target)
{
if (window.navigator.msPointerEnabled)
{
&#x2F;&#x2F; time to remove some of that zoom in ja..
target.view.style[&quot;-ms-content-zooming&quot;] = &quot;none&quot;;
target.view.style[&quot;-ms-touch-action&quot;] = &quot;none&quot;
&#x2F;&#x2F; DO some window specific touch!
}
this.target = target;
target.view.addEventListener(&#x27;mousemove&#x27;, this.onMouseMove.bind(this), true);
target.view.addEventListener(&#x27;mousedown&#x27;, this.onMouseDown.bind(this), true);
document.body.addEventListener(&#x27;mouseup&#x27;, this.onMouseUp.bind(this), true);
target.view.addEventListener(&#x27;mouseout&#x27;, this.onMouseUp.bind(this), true);
&#x2F;&#x2F; aint no multi touch just yet!
target.view.addEventListener(&quot;touchstart&quot;, this.onTouchStart.bind(this), true);
target.view.addEventListener(&quot;touchend&quot;, this.onTouchEnd.bind(this), true);
target.view.addEventListener(&quot;touchmove&quot;, this.onTouchMove.bind(this), true);
//check if the dom element has been set. If it has don&#x27;t do anything
if( this.interactionDOMElement === null ) {
this.setTargetDomElement( target.view );
}
document.body.addEventListener(&#x27;mouseup&#x27;, this.onMouseUp, true);
}
/**
* Sets the dom element which will receive mouse/touch events. This is useful for when you have other DOM
* elements ontop of the renderers Canvas element. With this you&#x27;ll be able to delegate another dom element
* to receive those events
*
* @method setTargetDomElement
* @param domElement {DOMElement} the dom element which will receive mouse and touch events
* @private
*/
PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
{
//remove previouse listeners
if( this.interactionDOMElement !== null )
{
this.interactionDOMElement.style[&#x27;-ms-content-zooming&#x27;] = &#x27;&#x27;;
this.interactionDOMElement.style[&#x27;-ms-touch-action&#x27;] = &#x27;&#x27;;
this.interactionDOMElement.removeEventListener(&#x27;mousemove&#x27;, this.onMouseMove, true);
this.interactionDOMElement.removeEventListener(&#x27;mousedown&#x27;, this.onMouseDown, true);
this.interactionDOMElement.removeEventListener(&#x27;mouseout&#x27;, this.onMouseOut, true);
// aint no multi touch just yet!
this.interactionDOMElement.removeEventListener(&#x27;touchstart&#x27;, this.onTouchStart, true);
this.interactionDOMElement.removeEventListener(&#x27;touchend&#x27;, this.onTouchEnd, true);
this.interactionDOMElement.removeEventListener(&#x27;touchmove&#x27;, this.onTouchMove, true);
}
if (window.navigator.msPointerEnabled)
{
// time to remove some of that zoom in ja..
domElement.style[&#x27;-ms-content-zooming&#x27;] = &#x27;none&#x27;;
domElement.style[&#x27;-ms-touch-action&#x27;] = &#x27;none&#x27;;
// DO some window specific touch!
}
this.interactionDOMElement = domElement;
domElement.addEventListener(&#x27;mousemove&#x27;, this.onMouseMove, true);
domElement.addEventListener(&#x27;mousedown&#x27;, this.onMouseDown, true);
domElement.addEventListener(&#x27;mouseout&#x27;, this.onMouseOut, true);
// aint no multi touch just yet!
domElement.addEventListener(&#x27;touchstart&#x27;, this.onTouchStart, true);
domElement.addEventListener(&#x27;touchend&#x27;, this.onTouchEnd, true);
domElement.addEventListener(&#x27;touchmove&#x27;, this.onTouchMove, true);
}
/**
* updates the state of interactive objects
*
* @method update
* @private
*/
PIXI.InteractionManager.prototype.update = function()
{
if(!this.target)return;
&#x2F;&#x2F; frequency of 30fps??
// frequency of 30fps??
var now = Date.now();
var diff = now - this.last;
diff = (diff * 30) &#x2F; 1000;
diff = (diff * 30) / 1000;
if(diff &lt; 1)return;
this.last = now;
&#x2F;&#x2F;
//
&#x2F;&#x2F; ok.. so mouse events??
&#x2F;&#x2F; yes for now :)
&#x2F;&#x2F; OPTIMSE - how often to check??
// ok.. so mouse events??
// yes for now :)
// OPTIMSE - how often to check??
if(this.dirty)
{
this.dirty = false;
@ -287,34 +388,37 @@ PIXI.InteractionManager.prototype.update = function()
this.interactiveItems = [];
if(this.stage.interactive)this.interactiveItems.push(this.stage);
&#x2F;&#x2F; go through and collect all the objects that are interactive..
// go through and collect all the objects that are interactive..
this.collectInteractiveSprite(this.stage, this.stage);
}
&#x2F;&#x2F; loop through interactive objects!
// loop through interactive objects!
var length = this.interactiveItems.length;
this.target.view.style.cursor = &quot;default&quot;;
this.interactionDOMElement.style.cursor = &quot;default&quot;;
for (var i = 0; i &lt; length; i++)
{
var item = this.interactiveItems[i];
if(!item.visible)continue;
&#x2F;&#x2F; OPTIMISATION - only calculate every time if the mousemove function exists..
&#x2F;&#x2F; OK so.. does the object have any other interactive functions?
&#x2F;&#x2F; hit-test the clip!
//if(!item.visible)continue;
// OPTIMISATION - only calculate every time if the mousemove function exists..
// OK so.. does the object have any other interactive functions?
// hit-test the clip!
if(item.mouseover || item.mouseout || item.buttonMode)
{
&#x2F;&#x2F; ok so there are some functions so lets hit test it..
// ok so there are some functions so lets hit test it..
item.__hit = this.hitTest(item, this.mouse);
&#x2F;&#x2F; ok so deal with interactions..
&#x2F;&#x2F; loks like there was a hit!
this.mouse.target = item;
// ok so deal with interactions..
// loks like there was a hit!
if(item.__hit)
{
if(item.buttonMode)this.target.view.style.cursor = &quot;pointer&quot;;
if(item.buttonMode) this.interactionDOMElement.style.cursor = &quot;pointer&quot;;
if(!item.__isOver)
{
@ -327,25 +431,32 @@ PIXI.InteractionManager.prototype.update = function()
{
if(item.__isOver)
{
&#x2F;&#x2F; roll out!
// roll out!
if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false;
}
}
}
&#x2F;&#x2F; ---&gt;
// ---&gt;
}
}
/**
* Is called when the mouse moves accross the renderer element
*
* @method onMouseMove
* @param event {Event} The DOM event of the mouse moving
* @private
*/
PIXI.InteractionManager.prototype.onMouseMove = function(event)
{
this.mouse.originalEvent = event || window.event; &#x2F;&#x2F;IE uses window.event
&#x2F;&#x2F; TODO optimize by not check EVERY TIME! maybe half as often? &#x2F;&#x2F;
var rect = this.target.view.getBoundingClientRect();
this.mouse.originalEvent = event || window.event; //IE uses window.event
// TODO optimize by not check EVERY TIME! maybe half as often? //
var rect = this.interactionDOMElement.getBoundingClientRect();
this.mouse.global.x = (event.clientX - rect.left) * (this.target.width &#x2F; rect.width);
this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height &#x2F; rect.height);
this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width);
this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height);
var length = this.interactiveItems.length;
var global = this.mouse.global;
@ -357,29 +468,35 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
if(item.mousemove)
{
&#x2F;&#x2F;call the function!
//call the function!
item.mousemove(this.mouse);
}
}
}
/**
* Is called when the mouse button is pressed down on the renderer element
*
* @method onMouseDown
* @param event {Event} The DOM event of a mouse button being pressed down
* @private
*/
PIXI.InteractionManager.prototype.onMouseDown = function(event)
{
event.preventDefault();
this.mouse.originalEvent = event || window.event; &#x2F;&#x2F;IE uses window.event
this.mouse.originalEvent = event || window.event; //IE uses window.event
&#x2F;&#x2F; loop through inteaction tree...
&#x2F;&#x2F; hit test each item! -&gt;
&#x2F;&#x2F; get interactive items under point??
&#x2F;&#x2F;stage.__i
// loop through inteaction tree...
// hit test each item! -&gt;
// get interactive items under point??
//stage.__i
var length = this.interactiveItems.length;
var global = this.mouse.global;
var index = 0;
var parent = this.stage;
&#x2F;&#x2F; while
&#x2F;&#x2F; hit test
// while
// hit test
for (var i = 0; i &lt; length; i++)
{
var item = this.interactiveItems[i];
@ -391,20 +508,47 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
if(item.__hit)
{
&#x2F;&#x2F;call the function!
//call the function!
if(item.mousedown)item.mousedown(this.mouse);
item.__isDown = true;
&#x2F;&#x2F; just the one!
// just the one!
if(!item.interactiveChildren)break;
}
}
}
}
PIXI.InteractionManager.prototype.onMouseOut = function(event)
{
var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = &quot;default&quot;;
for (var i = 0; i &lt; length; i++)
{
var item = this.interactiveItems[i];
if(item.__isOver)
{
this.mouse.target = item;
if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false;
}
}
}
/**
* Is called when the mouse button is released on the renderer element
*
* @method onMouseUp
* @param event {Event} The DOM event of a mouse button being released
* @private
*/
PIXI.InteractionManager.prototype.onMouseUp = function(event)
{
this.mouse.originalEvent = event || window.event; &#x2F;&#x2F;IE uses window.event
this.mouse.originalEvent = event || window.event; //IE uses window.event
var global = this.mouse.global;
@ -422,7 +566,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
if(item.__hit &amp;&amp; !up)
{
&#x2F;&#x2F;call the function!
//call the function!
if(item.mouseup)
{
item.mouseup(this.mouse);
@ -447,30 +591,42 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
}
}
/**
* Tests if the current mouse coords hit a sprite
*
* @method hitTest
* @param item {DisplayObject} The displayObject to test for a hit
* @param interactionData {InteractionData} The interactiondata object to update in the case of a hit
* @private
*/
PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{
var global = interactionData.global;
if(!item.visible)return false;
if(item.vcount !== PIXI.visibleCount)return false;
var isSprite = (item instanceof PIXI.Sprite),
worldTransform = item.worldTransform,
a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
id = 1 &#x2F; (a00 * a11 + a01 * -a10),
id = 1 / (a00 * a11 + a01 * -a10),
x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
&#x2F;&#x2F;a sprite or display object with a hit area defined
interactionData.target = item;
//a sprite or display object with a hit area defined
if(item.hitArea &amp;&amp; item.hitArea.contains) {
if(item.hitArea.contains(x, y)) {
if(isSprite)
interactionData.target = item;
//if(isSprite)
interactionData.target = item;
return true;
}
return false;
}
&#x2F;&#x2F; a sprite with no hitarea defined
// a sprite with no hitarea defined
else if(isSprite)
{
var width = item.texture.frame.width,
@ -484,7 +640,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
if(y &gt; y1 &amp;&amp; y &lt; y1 + height)
{
&#x2F;&#x2F; set the target property if a hit is true!
// set the target property if a hit is true!
interactionData.target = item
return true;
}
@ -497,28 +653,38 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
if(hit)
{
// hmm.. TODO SET CORRECT TARGET?
interactionData.target = item
return true;
}
}
return false;
}
/**
* Is called when a touch is moved accross the renderer element
*
* @method onTouchMove
* @param event {Event} The DOM event of a touch moving accross the renderer view
* @private
*/
PIXI.InteractionManager.prototype.onTouchMove = function(event)
{
this.mouse.originalEvent = event || window.event; &#x2F;&#x2F;IE uses window.event
var rect = this.target.view.getBoundingClientRect();
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i &lt; changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
touchData.originalEvent = event || window.event;
&#x2F;&#x2F; update the touch position
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width &#x2F; rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height &#x2F; rect.height);
// update the touch position
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
}
var length = this.interactiveItems.length;
@ -529,12 +695,16 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
}
}
/**
* Is called when a touch is started on the renderer element
*
* @method onTouchStart
* @param event {Event} The DOM event of a touch starting on the renderer view
* @private
*/
PIXI.InteractionManager.prototype.onTouchStart = function(event)
{
event.preventDefault();
this.mouse.originalEvent = event || window.event; &#x2F;&#x2F;IE uses window.event
var rect = this.target.view.getBoundingClientRect();
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i &lt; changedTouches.length; i++)
@ -544,9 +714,11 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
var touchData = this.pool.pop();
if(!touchData)touchData = new PIXI.InteractionData();
touchData.originalEvent = event || window.event;
this.touchs[touchEvent.identifier] = touchData;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width &#x2F; rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height &#x2F; rect.height);
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length;
@ -560,7 +732,7 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
if(item.__hit)
{
&#x2F;&#x2F;call the function!
//call the function!
if(item.touchstart)item.touchstart(touchData);
item.__isDown = true;
item.__touchData = touchData;
@ -570,36 +742,41 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
}
}
}
}
/**
* Is called when a touch is ended on the renderer element
*
* @method onTouchEnd
* @param event {Event} The DOM event of a touch ending on the renderer view
* @private
*/
PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{
this.mouse.originalEvent = event || window.event; &#x2F;&#x2F;IE uses window.event
var rect = this.target.view.getBoundingClientRect();
//this.mouse.originalEvent = event || window.event; //IE uses window.event
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i &lt; changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
var up = false;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width &#x2F; rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height &#x2F; rect.height);
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length;
for (var j = 0; j &lt; length; j++)
{
var item = this.interactiveItems[j];
var itemTouchData = item.__touchData; &#x2F;&#x2F; &lt;-- Here!
var itemTouchData = item.__touchData; // &lt;-- Here!
item.__hit = this.hitTest(item, touchData);
if(itemTouchData == touchData)
{
&#x2F;&#x2F; so this one WAS down...
&#x2F;&#x2F; hitTest??
// so this one WAS down...
touchData.originalEvent = event || window.event;
// hitTest??
if(item.touchend || item.tap)
{
@ -632,67 +809,71 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
}
}
&#x2F;&#x2F; remove the touch..
// remove the touch..
this.pool.push(touchData);
this.touchs[touchEvent.identifier] = null;
}
}
&#x2F;**
@class InteractionData
@constructor
*&#x2F;
/**
* Holds all information related to an Interaction event
*
* @class InteractionData
* @constructor
*/
PIXI.InteractionData = function()
{
&#x2F;**
* This point stores the global coords of where the touch&#x2F;mouse event happened
/**
* This point stores the global coords of where the touch/mouse event happened
*
* @property global
* @type Point
*&#x2F;
*/
this.global = new PIXI.Point();
&#x2F;&#x2F; this is here for legacy... but will remove
// this is here for legacy... but will remove
this.local = new PIXI.Point();
&#x2F;**
/**
* The target Sprite that was interacted with
*
* @property target
* @type Sprite
*&#x2F;
*/
this.target;
&#x2F;**
/**
* When passed to an event handler, this will be the original DOM Event that was captured
*
* @property originalEvent
* @type Event
*&#x2F;
*/
this.originalEvent;
}
&#x2F;**
/**
* This will return the local coords of the specified displayObject for this InteractionData
*
* @method getLocalPosition
* @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
* @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject
*&#x2F;
*/
PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{
var worldTransform = displayObject.worldTransform;
var global = this.global;
&#x2F;&#x2F; do a cheeky transform to get the mouse coords;
// do a cheeky transform to get the mouse coords;
var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
id = 1 &#x2F; (a00 * a11 + a01 * -a10);
&#x2F;&#x2F; set the mouse coords...
id = 1 / (a00 * a11 + a01 * -a10);
// set the mouse coords...
return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id)
}
&#x2F;&#x2F; constructor
PIXI.InteractionData.constructor = PIXI.InteractionData;
// constructor
PIXI.InteractionData.prototype.constructor = PIXI.InteractionData;
</pre>
</div>
@ -703,13 +884,13 @@ PIXI.InteractionData.constructor = PIXI.InteractionData;
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>