pubtool4pixi
Version:
Usefultool for PIXI xes project
1,685 lines (371 loc) • 18.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: HitContainer</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: HitContainer</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>HitContainer<span class="signature">()</span><span class="type-signature"></span></h2>
<div class="class-description">Hit test container</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="HitContainer"><span class="type-signature"></span>new HitContainer<span class="signature">()</span><span class="type-signature"></span></h4>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>sampleCount</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">采样个数，如360代表每隔一度采样一次 - 默认：360</td>
</tr>
<tr>
<td class="name"><code>sampleMinAlpha</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">采样像素点阈值，采样的数据为RGBA中的A 范围在0-255 - 默认：0</td>
</tr>
<tr>
<td class="name"><code>sampleDist</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">采样衰减距离 - 默认：1像素</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line15">line 15</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var local = new HitContainer();
local.sampleCount = 720;
local.sampleMinAlpha = 10;
var localSprite = new PIXI.Sprite(res["image_example1"].texture);
localSprite.anchor.set(0.5);
local.addChild(localSprite);
var target = new HitContainer();
var targetSprite = new PIXI.Sprite(res["image_example2"].texture);
targetSprite.anchor.set(0.5);
target.addChild(targetSprite);
local.initBound();
target.initBound();
local.position.set(10,10);
console.log(local.hitTest(target));</code></pre>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li>PIXI.Container</li>
</ul>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="._addBoundToMatrix"><span class="type-signature">(static) </span>_addBoundToMatrix<span class="signature">()</span><span class="type-signature"> → {Array}</span></h4>
<div class="description">
Add local pixel in to a Matrix.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line266">line 266</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The matrix after add the local pixel.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
<h4 class="name" id="._caculateBound"><span class="type-signature">(static) </span>_caculateBound<span class="signature">(Two-dimensional)</span><span class="type-signature"> → {Array}</span></h4>
<div class="description">
Caculate bound area for this in polor coordinate.
</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>Two-dimensional</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">array contains binnary numbers.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line86">line 86</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
An array contains polor coordinate points.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
<h4 class="name" id="._caculateBoundMatrix"><span class="type-signature">(static) </span>_caculateBoundMatrix<span class="signature">()</span><span class="type-signature"> → {Array}</span></h4>
<div class="description">
Caculate the matrix base on visible pixel in this container.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line64">line 64</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Two-dimensional array contains binnary numbers. 1 means visible and 0 means transparent.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
<h4 class="name" id="._caculateSuerfaceArea"><span class="type-signature">(static) </span>_caculateSuerfaceArea<span class="signature">()</span><span class="type-signature"> → {Number}</span></h4>
<div class="description">
Caculate the area based on pixel.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line230">line 230</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Area.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Number</span>
</dd>
</dl>
<h4 class="name" id="._generateMaxEmptyMatrix"><span class="type-signature">(static) </span>_generateMaxEmptyMatrix<span class="signature">()</span><span class="type-signature"> → {Array}</span></h4>
<div class="description">
Caculate the smallest matrix which can contains both given matrix.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line292">line 292</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
An empty matrix.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
<h4 class="name" id="._getBoundaryGraphics"><span class="type-signature">(static) </span>_getBoundaryGraphics<span class="signature">()</span><span class="type-signature"> → {PIXI.Graphics}</span></h4>
<div class="description">
Draw a polygon based on given points in polor coordinate.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line127">line 127</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Polygon graphic.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">PIXI.Graphics</span>
</dd>
</dl>
<h4 class="name" id="._multiplyMatrix"><span class="type-signature">(static) </span>_multiplyMatrix<span class="signature">()</span><span class="type-signature"> → {Array}</span></h4>
<div class="description">
Matrix 1 and Matrix 2 must have same shape. The method will multiply every item in matrix 1 and 2. This is not Matrix multiplication.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line248">line 248</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A new matrix which have a same shape with given matrix contains resault.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
<h4 class="name" id="._polarToPixel"><span class="type-signature">(static) </span>_polarToPixel<span class="signature">(amplitude, phase)</span><span class="type-signature"> → {Point}</span></h4>
<div class="description">
Caculate the position in Cartesian coordinate with given point in polar coordinate.
</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>amplitude</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">Amplitude of polar coordinate point.</td>
</tr>
<tr>
<td class="name"><code>phase</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">Phase of polar coordinate point.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line50">line 50</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Point in Cartesian coordinate
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Point</span>
</dd>
</dl>
<h4 class="name" id=".hitTest"><span class="type-signature">(static) </span>hitTest<span class="signature">()</span><span class="type-signature"> → {Boolean}</span></h4>
<div class="description">
检测容器是否碰撞了目标区域
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line172">line 172</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Collision with target area or not
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
<h4 class="name" id=".initBound"><span class="type-signature">(static) </span>initBound<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
预处理碰撞检测，这个方法必须在碰撞检测前调用。如果容器的边界发生了变化，需要再次调用
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line149">line 149</a>
</li></ul></dd>
</dl>
<h4 class="name" id=".isInBound"><span class="type-signature">(static) </span>isInBound<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
检测一个全局点是否在边界内
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line162">line 162</a>
</li></ul></dd>
</dl>
<h4 class="name" id=".testHitArea"><span class="type-signature">(static) </span>testHitArea<span class="signature">()</span><span class="type-signature"> → {Number}</span></h4>
<div class="description">
检测碰撞面积比例
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="hitTestContainer.js.html">hitTestContainer.js</a>, <a href="hitTestContainer.js.html#line207">line 207</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The proportion of hit area.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Number</span>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Base.html">Base</a></li><li><a href="BaseContainer.html">BaseContainer</a></li><li><a href="BigMath_AniBtn.html">BigMath_AniBtn</a></li><li><a href="BigMath_GuideHand.html">BigMath_GuideHand</a></li><li><a href="BigMath_StarScoreBoard.html">BigMath_StarScoreBoard</a></li><li><a href="BigMath_Timer.html">BigMath_Timer</a></li><li><a href="HitContainer.html">HitContainer</a></li><li><a href="Preschool_aqiu.html">Preschool_aqiu</a></li><li><a href="Preschool_End.html">Preschool_End</a></li><li><a href="Preschool_HintBtn.html">Preschool_HintBtn</a></li><li><a href="Preschool_Start.html">Preschool_Start</a></li><li><a href="PUB_Mask.html">PUB_Mask</a></li></ul><h3>Events</h3><ul><li><a href="BaseContainer.html#.event:beforeHide">beforeHide</a></li><li><a href="BaseContainer.html#.event:beforeShow">beforeShow</a></li><li><a href="BaseContainer.html#.event:Destroyed">Destroyed</a></li><li><a href="BaseContainer.html#.event:onHide">onHide</a></li><li><a href="BaseContainer.html#.event:onShow">onShow</a></li><li><a href="BaseContainer.html#.event:ParentChange">ParentChange</a></li><li><a href="BigMath_AniBtn.html#.event:onClick">onClick</a></li><li><a href="BigMath_Timer.html#.event:onTimeRun">onTimeRun</a></li><li><a href="BigMath_Timer.html#.event:timeup">timeup</a></li><li><a href="Preschool_End.html#.event:gameOver">gameOver</a></li><li><a href="Preschool_Start.html#.event:startGame">startGame</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Dec 18 2019 14:22:09 GMT+0800 (中国标准时间)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>