
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
761 lines
23 KiB
HTML
761 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/primitives/Graphics.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">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: 1.4.3</em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
|
|
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
|
|
|
|
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
|
|
|
|
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
|
|
|
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
|
|
|
|
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
|
|
|
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
|
|
|
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
|
|
|
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
|
|
|
|
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/Circle.html">Circle</a></li>
|
|
|
|
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
|
|
|
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
|
|
|
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
|
|
|
|
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
|
|
|
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
|
|
|
|
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
|
|
|
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
|
|
|
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiFastShader.html">PIXI.PixiFastShader</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
|
|
|
|
<li><a href="../classes/Point.html">Point</a></li>
|
|
|
|
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
|
|
|
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
|
|
|
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
|
|
|
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</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/TwistFilter.html">TwistFilter</a></li>
|
|
|
|
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1 class="file-heading">File: src/pixi/primitives/Graphics.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/**
|
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
*/
|
|
|
|
|
|
/**
|
|
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
|
|
* It is important to know that with the webGL renderer only simple polys can be filled at this stage
|
|
* Complex polys will not be filled. Heres an example of a complex poly: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png
|
|
*
|
|
* @class Graphics
|
|
* @extends DisplayObjectContainer
|
|
* @constructor
|
|
*/
|
|
PIXI.Graphics = function()
|
|
{
|
|
PIXI.DisplayObjectContainer.call( this );
|
|
|
|
this.renderable = true;
|
|
|
|
/**
|
|
* The alpha of the fill of this graphics object
|
|
*
|
|
* @property fillAlpha
|
|
* @type Number
|
|
*/
|
|
this.fillAlpha = 1;
|
|
|
|
/**
|
|
* The width of any lines drawn
|
|
*
|
|
* @property lineWidth
|
|
* @type Number
|
|
*/
|
|
this.lineWidth = 0;
|
|
|
|
/**
|
|
* The color of any lines drawn
|
|
*
|
|
* @property lineColor
|
|
* @type String
|
|
*/
|
|
this.lineColor = "black";
|
|
|
|
/**
|
|
* Graphics data
|
|
*
|
|
* @property graphicsData
|
|
* @type Array
|
|
* @private
|
|
*/
|
|
this.graphicsData = [];
|
|
|
|
this.tint = 0xFFFFFF;// * Math.random();
|
|
|
|
this.blendMode = PIXI.blendModes.NORMAL;
|
|
|
|
/**
|
|
* Current path
|
|
*
|
|
* @property currentPath
|
|
* @type Object
|
|
* @private
|
|
*/
|
|
this.currentPath = {points:[]};
|
|
|
|
this._webGL = [];
|
|
|
|
this.isMask = false;
|
|
|
|
this.bounds = null;
|
|
|
|
this.boundsPadding = 10;
|
|
};
|
|
|
|
// constructor
|
|
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
|
PIXI.Graphics.prototype.constructor = PIXI.Graphics;
|
|
|
|
/**
|
|
* If cacheAsBitmap is true the graphics object will then be rendered as if it was a sprite.
|
|
* This is useful if your graphics element does not change often as it will speed up the rendering of the object
|
|
* It is also usful as the graphics object will always be antialiased because it will be rendered using canvas
|
|
* Not recommended if you are constanly redrawing the graphics element.
|
|
*
|
|
* @property cacheAsBitmap
|
|
* @default false
|
|
* @type Boolean
|
|
* @private
|
|
*/
|
|
Object.defineProperty(PIXI.Graphics.prototype, "cacheAsBitmap", {
|
|
get: function() {
|
|
return this._cacheAsBitmap;
|
|
},
|
|
set: function(value) {
|
|
this._cacheAsBitmap = value;
|
|
|
|
if(this._cacheAsBitmap)
|
|
{
|
|
this._generateCachedSprite();
|
|
}
|
|
else
|
|
{
|
|
this.destroyCachedSprite();
|
|
this.dirty = true;
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* Specifies a line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
|
|
*
|
|
* @method lineStyle
|
|
* @param lineWidth {Number} width of the line to draw, will update the object's stored style
|
|
* @param color {Number} color of the line to draw, will update the object's stored style
|
|
* @param alpha {Number} alpha of the line to draw, will update the object's stored style
|
|
*/
|
|
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
|
{
|
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
|
|
|
this.lineWidth = lineWidth || 0;
|
|
this.lineColor = color || 0;
|
|
this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
|
|
|
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
|
|
|
this.graphicsData.push(this.currentPath);
|
|
};
|
|
|
|
/**
|
|
* Moves the current drawing position to (x, y).
|
|
*
|
|
* @method moveTo
|
|
* @param x {Number} the X coord to move to
|
|
* @param y {Number} the Y coord to move to
|
|
*/
|
|
PIXI.Graphics.prototype.moveTo = function(x, y)
|
|
{
|
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
|
|
|
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
|
|
|
this.currentPath.points.push(x, y);
|
|
|
|
this.graphicsData.push(this.currentPath);
|
|
};
|
|
|
|
/**
|
|
* Draws a line using the current line style from the current drawing position to (x, y);
|
|
* the current drawing position is then set to (x, y).
|
|
*
|
|
* @method lineTo
|
|
* @param x {Number} the X coord to draw to
|
|
* @param y {Number} the Y coord to draw to
|
|
*/
|
|
PIXI.Graphics.prototype.lineTo = function(x, y)
|
|
{
|
|
this.currentPath.points.push(x, y);
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
|
|
* (such as lineTo() or drawCircle()) use when drawing.
|
|
*
|
|
* @method beginFill
|
|
* @param color {uint} the color of the fill
|
|
* @param alpha {Number} the alpha
|
|
*/
|
|
PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
|
{
|
|
|
|
this.filling = true;
|
|
this.fillColor = color || 0;
|
|
this.fillAlpha = (arguments.length < 2) ? 1 : alpha;
|
|
};
|
|
|
|
/**
|
|
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
|
|
*
|
|
* @method endFill
|
|
*/
|
|
PIXI.Graphics.prototype.endFill = function()
|
|
{
|
|
this.filling = false;
|
|
this.fillColor = null;
|
|
this.fillAlpha = 1;
|
|
};
|
|
|
|
/**
|
|
* @method drawRect
|
|
*
|
|
* @param x {Number} The X coord of the top-left of the rectangle
|
|
* @param y {Number} The Y coord of the top-left of the rectangle
|
|
* @param width {Number} The width of the rectangle
|
|
* @param height {Number} The height of the rectangle
|
|
*/
|
|
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
|
{
|
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
|
|
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
|
points:[x, y, width, height], type:PIXI.Graphics.RECT};
|
|
|
|
this.graphicsData.push(this.currentPath);
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Draws a circle.
|
|
*
|
|
* @method drawCircle
|
|
* @param x {Number} The X coord of the center of the circle
|
|
* @param y {Number} The Y coord of the center of the circle
|
|
* @param radius {Number} The radius of the circle
|
|
*/
|
|
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
|
|
{
|
|
|
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
|
|
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
|
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
|
|
|
|
this.graphicsData.push(this.currentPath);
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Draws an ellipse.
|
|
*
|
|
* @method drawEllipse
|
|
* @param x {Number}
|
|
* @param y {Number}
|
|
* @param width {Number}
|
|
* @param height {Number}
|
|
*/
|
|
PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height)
|
|
{
|
|
|
|
if (!this.currentPath.points.length) this.graphicsData.pop();
|
|
|
|
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
|
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
|
points:[x, y, width, height], type:PIXI.Graphics.ELIP};
|
|
|
|
this.graphicsData.push(this.currentPath);
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
|
|
*
|
|
* @method clear
|
|
*/
|
|
PIXI.Graphics.prototype.clear = function()
|
|
{
|
|
this.lineWidth = 0;
|
|
this.filling = false;
|
|
|
|
this.dirty = true;
|
|
this.clearDirty = true;
|
|
this.graphicsData = [];
|
|
|
|
this.bounds = null; //new PIXI.Rectangle();
|
|
};
|
|
|
|
/**
|
|
* Useful function that returns a texture of the graphics object that can then be used to create sprites
|
|
* This can be quite useful if your geometry is complicated and needs to be reused multiple times.
|
|
*
|
|
* @method generateTexture
|
|
* @return {Texture} a texture of the graphics object
|
|
*/
|
|
PIXI.Graphics.prototype.generateTexture = function()
|
|
{
|
|
var bounds = this.getBounds();
|
|
|
|
var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height);
|
|
var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas);
|
|
|
|
canvasBuffer.context.translate(-bounds.x,-bounds.y);
|
|
|
|
PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context);
|
|
|
|
return texture;
|
|
};
|
|
|
|
PIXI.Graphics.prototype._renderWebGL = function(renderSession)
|
|
{
|
|
// if the sprite is not visible or the alpha is 0 then no need to render this element
|
|
if(this.visible === false || this.alpha === 0 || this.isMask === true)return;
|
|
|
|
if(this._cacheAsBitmap)
|
|
{
|
|
|
|
if(this.dirty)
|
|
{
|
|
this._generateCachedSprite();
|
|
// we will also need to update the texture on the gpu too!
|
|
PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl);
|
|
|
|
this.dirty = false;
|
|
}
|
|
|
|
PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession);
|
|
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
renderSession.spriteBatch.stop();
|
|
|
|
if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession);
|
|
if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock);
|
|
|
|
// check blend mode
|
|
if(this.blendMode !== renderSession.spriteBatch.currentBlendMode)
|
|
{
|
|
this.spriteBatch.currentBlendMode = this.blendMode;
|
|
var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode];
|
|
this.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
|
|
}
|
|
|
|
PIXI.WebGLGraphics.renderGraphics(this, renderSession);
|
|
|
|
// only render if it has children!
|
|
if(this.children.length)
|
|
{
|
|
renderSession.spriteBatch.start();
|
|
|
|
// simple render children!
|
|
for(var i=0, j=this.children.length; i<j; i++)
|
|
{
|
|
this.children[i]._renderWebGL(renderSession);
|
|
}
|
|
|
|
renderSession.spriteBatch.stop();
|
|
}
|
|
|
|
if(this._filters)renderSession.filterManager.popFilter();
|
|
if(this._mask)renderSession.maskManager.popMask(renderSession);
|
|
|
|
renderSession.drawCount++;
|
|
|
|
renderSession.spriteBatch.start();
|
|
}
|
|
};
|
|
|
|
PIXI.Graphics.prototype._renderCanvas = function(renderSession)
|
|
{
|
|
// if the sprite is not visible or the alpha is 0 then no need to render this element
|
|
if(this.visible === false || this.alpha === 0 || this.isMask === true)return;
|
|
|
|
var context = renderSession.context;
|
|
var transform = this.worldTransform;
|
|
|
|
if(this.blendMode !== renderSession.currentBlendMode)
|
|
{
|
|
renderSession.currentBlendMode = this.blendMode;
|
|
context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
|
|
}
|
|
|
|
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
|
|
PIXI.CanvasGraphics.renderGraphics(this, context);
|
|
|
|
// simple render children!
|
|
for(var i=0, j=this.children.length; i<j; i++)
|
|
{
|
|
this.children[i]._renderCanvas(renderSession);
|
|
}
|
|
};
|
|
|
|
PIXI.Graphics.prototype.getBounds = function()
|
|
{
|
|
if(!this.bounds)this.updateBounds();
|
|
|
|
var w0 = this.bounds.x;
|
|
var w1 = this.bounds.width + this.bounds.x;
|
|
|
|
var h0 = this.bounds.y;
|
|
var h1 = this.bounds.height + this.bounds.y;
|
|
|
|
var worldTransform = this.worldTransform;
|
|
|
|
var a = worldTransform[0];
|
|
var b = worldTransform[3];
|
|
var c = worldTransform[1];
|
|
var d = worldTransform[4];
|
|
var tx = worldTransform[2];
|
|
var ty = worldTransform[5];
|
|
|
|
var x1 = a * w1 + c * h1 + tx;
|
|
var y1 = d * h1 + b * w1 + ty;
|
|
|
|
var x2 = a * w0 + c * h1 + tx;
|
|
var y2 = d * h1 + b * w0 + ty;
|
|
|
|
var x3 = a * w0 + c * h0 + tx;
|
|
var y3 = d * h0 + b * w0 + ty;
|
|
|
|
var x4 = a * w1 + c * h0 + tx;
|
|
var y4 = d * h0 + b * w1 + ty;
|
|
|
|
var maxX = -Infinity;
|
|
var maxY = -Infinity;
|
|
|
|
var minX = Infinity;
|
|
var minY = Infinity;
|
|
|
|
minX = x1 < minX ? x1 : minX;
|
|
minX = x2 < minX ? x2 : minX;
|
|
minX = x3 < minX ? x3 : minX;
|
|
minX = x4 < minX ? x4 : minX;
|
|
|
|
minY = y1 < minY ? y1 : minY;
|
|
minY = y2 < minY ? y2 : minY;
|
|
minY = y3 < minY ? y3 : minY;
|
|
minY = y4 < minY ? y4 : minY;
|
|
|
|
maxX = x1 > maxX ? x1 : maxX;
|
|
maxX = x2 > maxX ? x2 : maxX;
|
|
maxX = x3 > maxX ? x3 : maxX;
|
|
maxX = x4 > maxX ? x4 : maxX;
|
|
|
|
maxY = y1 > maxY ? y1 : maxY;
|
|
maxY = y2 > maxY ? y2 : maxY;
|
|
maxY = y3 > maxY ? y3 : maxY;
|
|
maxY = y4 > maxY ? y4 : maxY;
|
|
|
|
var bounds = this._bounds;
|
|
|
|
bounds.x = minX;
|
|
bounds.width = maxX - minX;
|
|
|
|
bounds.y = minY;
|
|
bounds.height = maxY - minY;
|
|
|
|
return bounds;
|
|
};
|
|
|
|
PIXI.Graphics.prototype.updateBounds = function()
|
|
{
|
|
|
|
var minX = Infinity;
|
|
var maxX = -Infinity;
|
|
|
|
var minY = Infinity;
|
|
var maxY = -Infinity;
|
|
|
|
var points, x, y;
|
|
|
|
for (var i = 0; i < this.graphicsData.length; i++) {
|
|
var data = this.graphicsData[i];
|
|
var type = data.type;
|
|
var lineWidth = data.lineWidth;
|
|
|
|
points = data.points;
|
|
|
|
if(type === PIXI.Graphics.RECT)
|
|
{
|
|
x = points.x - lineWidth/2;
|
|
y = points.y - lineWidth/2;
|
|
var width = points.width + lineWidth;
|
|
var height = points.height + lineWidth;
|
|
|
|
minX = x < minX ? x : minX;
|
|
maxX = x + width > maxX ? x + width : maxX;
|
|
|
|
minY = y < minY ? x : minY;
|
|
maxY = y + height > maxY ? y + height : maxY;
|
|
}
|
|
else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP)
|
|
{
|
|
x = points.x;
|
|
y = points.y;
|
|
var radius = points.radius + lineWidth/2;
|
|
|
|
minX = x - radius < minX ? x - radius : minX;
|
|
maxX = x + radius > maxX ? x + radius : maxX;
|
|
|
|
minY = y - radius < minY ? y - radius : minY;
|
|
maxY = y + radius > maxY ? y + radius : maxY;
|
|
}
|
|
else
|
|
{
|
|
// POLY
|
|
for (var j = 0; j < points.length; j+=2)
|
|
{
|
|
|
|
x = points[j];
|
|
y = points[j+1];
|
|
minX = x-lineWidth < minX ? x-lineWidth : minX;
|
|
maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
|
|
|
|
minY = y-lineWidth < minY ? y-lineWidth : minY;
|
|
maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
|
|
}
|
|
}
|
|
}
|
|
|
|
var padding = this.boundsPadding;
|
|
this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2);
|
|
};
|
|
|
|
PIXI.Graphics.prototype._generateCachedSprite = function()
|
|
{
|
|
var bounds = this.getBounds();
|
|
|
|
if(!this._cachedSprite)
|
|
{
|
|
var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height);
|
|
var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas);
|
|
|
|
this._cachedSprite = new PIXI.Sprite(texture);
|
|
this._cachedSprite.buffer = canvasBuffer;
|
|
|
|
this._cachedSprite.worldTransform = this.worldTransform;
|
|
}
|
|
else
|
|
{
|
|
this._cachedSprite.buffer.resize(bounds.width, bounds.height);
|
|
}
|
|
|
|
// leverage the anchor to account for the offset of the element
|
|
this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
|
|
this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
|
|
|
|
// this._cachedSprite.buffer.context.save();
|
|
this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
|
|
|
|
PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
|
|
// this._cachedSprite.buffer.context.restore();
|
|
};
|
|
|
|
PIXI.Graphics.prototype.destroyCachedSprite = function()
|
|
{
|
|
this._cachedSprite.texture.destroy(true);
|
|
|
|
// let the gc collect the unused sprite
|
|
// TODO could be object pooled!
|
|
this._cachedSprite = null;
|
|
};
|
|
|
|
|
|
// SOME TYPES:
|
|
PIXI.Graphics.POLY = 0;
|
|
PIXI.Graphics.RECT = 1;
|
|
PIXI.Graphics.CIRC = 2;
|
|
PIXI.Graphics.ELIP = 3;
|
|
|
|
PIXI.tempMatrix = PIXI.mat3.create();
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</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>
|