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

Docs updated

Browse source 
example updated
misplaced files removed
This commit is contained in:
Mat Groves 2013-06-22 11:46:57 +01:00
parent 72e38cccb0
commit e91be9b53a
100 changed files with 6387 additions and 12207 deletions
Download patch file Download diff file Expand all files Collapse all files

205
bin/pixi.dev.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

10
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

2
docs/api.js
View file

@ -5,10 +5,12 @@ YUI.add("yuidoc-meta", function(Y) {
"BaseTexture",
"BitmapFontLoader",
"BitmapText",
"CanvasGraphics",
"CanvasRenderer",
"CustomRenderable",
"DisplayObject",
"DisplayObjectContainer",
"Graphics",
"ImageLoader",
"InteractionData",
"InteractionManager",

4
docs/classes/AssetLoader.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/BaseTexture.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/BitmapFontLoader.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/BitmapText.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

218
docs/classes/CanvasGraphics.html Normal file
View file

@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CanvasGraphics - 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>
</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:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 1.3.0</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="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
<li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</a></li>
<li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
<li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
<li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
<li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
<li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="..&#x2F;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>CanvasGraphics Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLGraphics.js.html#l7"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLGraphics.js:7</code></a>
</div>
Module: <a href="../modules/PIXI.html">PIXI</a>
</div>
<div class="box intro">
<p>A set of functions used by the webGL renderer to draw the primitive graphics data</p>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="..&#x2F;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>
</body>
</html>

4
docs/classes/CanvasRenderer.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/CustomRenderable.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/DisplayObject.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

8
docs/classes/DisplayObjectContainer.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -146,7 +150,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLGraphics.js.html#l6"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLGraphics.js:6</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_display_DisplayObjectContainer.js.html#l6"><code>src&#x2F;pixi&#x2F;display&#x2F;DisplayObjectContainer.js:6</code></a>
</div>
@ -200,7 +204,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLGraphics.js.html#l6"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLGraphics.js:6</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_display_DisplayObjectContainer.js.html#l6"><code>src&#x2F;pixi&#x2F;display&#x2F;DisplayObjectContainer.js:6</code></a>
</p>

3395
docs/classes/Graphics.html Normal file
View file

File diff suppressed because it is too large Load diff

4
docs/classes/ImageLoader.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/InteractionData.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/InteractionManager.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/JsonLoader.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/MovieClip.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Point.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Polygon.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Rectangle.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

6
docs/classes/RenderTexture.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -509,7 +513,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_RenderTexture.js.html#l90"><code>src&#x2F;pixi&#x2F;textures&#x2F;RenderTexture.js:90</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_RenderTexture.js.html#l92"><code>src&#x2F;pixi&#x2F;textures&#x2F;RenderTexture.js:92</code></a>
</p>

4
docs/classes/Spine.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Sprite.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/SpriteSheetLoader.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Stage.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Text.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/Texture.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/TilingSprite.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/classes/WebGLBatch.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

8
docs/classes/WebGLRenderer.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -411,7 +415,7 @@ Dont forget to add the view to your DOM or you will not see anything :)</p>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLRenderer.js.html#l115"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderer.js:115</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLRenderer.js.html#l116"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderer.js:116</code></a>
</p>
@ -504,7 +508,7 @@ Dont forget to add the view to your DOM or you will not see anything :)</p>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLRenderer.js.html#l257"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderer.js:257</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_webgl_WebGLRenderer.js.html#l258"><code>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderer.js:258</code></a>
</p>

283
docs/data.json
View file

@ -46,7 +46,9 @@
"src/pixi/display/DisplayObjectContainer.js": {
"name": "src/pixi/display/DisplayObjectContainer.js",
"modules": {},
"classes": {},
"classes": {
"DisplayObjectContainer": 1
},
"fors": {},
"namespaces": {}
},
@ -173,7 +175,9 @@
"src/pixi/primitives/Graphics.js": {
"name": "src/pixi/primitives/Graphics.js",
"modules": {},
"classes": {},
"classes": {
"Graphics": 1
},
"fors": {},
"namespaces": {}
},
@ -204,7 +208,7 @@
"name": "src/pixi/renderers/webgl/WebGLGraphics.js",
"modules": {},
"classes": {
"DisplayObjectContainer": 1
"CanvasGraphics": 1
},
"fors": {},
"namespaces": {}
@ -355,6 +359,8 @@
"ImageLoader": 1,
"JsonLoader": 1,
"SpriteSheetLoader": 1,
"Graphics": 1,
"CanvasGraphics": 1,
"CanvasRenderer": 1,
"WebGLBatch": 1,
"WebGLRenderer": 1,
@ -479,7 +485,7 @@
"plugin_for": [],
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/renderers/webgl/WebGLGraphics.js",
"file": "src/pixi/display/DisplayObjectContainer.js",
"line": 6,
"description": "A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.",
"extends": "DisplayObject",
@ -755,6 +761,34 @@
}
]
},
"Graphics": {
"name": "Graphics",
"shortname": "Graphics",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/primitives/Graphics.js",
"line": 6,
"description": "The Graphics class contains a set of methods that you can use to create primitive shapes and lines.",
"extends": "DisplayObjectContainer",
"is_constructor": 1
},
"CanvasGraphics": {
"name": "CanvasGraphics",
"shortname": "CanvasGraphics",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/renderers/webgl/WebGLGraphics.js",
"line": 7,
"description": "A set of functions used by the webGL renderer to draw the primitive graphics data"
},
"CanvasRenderer": {
"name": "CanvasRenderer",
"shortname": "CanvasRenderer",
@ -2162,13 +2196,198 @@
"file": "src/pixi/primitives/Graphics.js",
"line": 1,
"author": "Mat Groves http://matgroves.com/ @Doormat23",
"class": "DisplayObjectContainer"
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 32,
"description": "Specifies a line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.",
"itemtype": "method",
"name": "lineStyle",
"params": [
{
"name": "lineWidth",
"description": "",
"type": "Number"
},
{
"name": "color",
"description": "",
"type": "Number"
},
{
"name": "alpha",
"description": "",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 53,
"description": "Moves the current drawing position to (x, y).",
"itemtype": "method",
"name": "moveTo",
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 71,
"description": "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).",
"itemtype": "method",
"name": "lineTo",
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 83,
"description": "Specifies a simple one-color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing.",
"itemtype": "method",
"name": "beginFill",
"params": [
{
"name": "color",
"description": "the color of the fill",
"type": "Uint"
},
{
"name": "alpha",
"description": "the alpha",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 96,
"description": "Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.",
"itemtype": "method",
"name": "endFill",
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 107,
"itemtype": "method",
"name": "drawRect",
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
},
{
"name": "width",
"description": "",
"type": "Number"
},
{
"name": "height",
"description": "",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 126,
"description": "Draws a circle.",
"itemtype": "method",
"name": "drawCircle",
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
},
{
"name": "radius",
"description": "",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 145,
"description": "Draws an elipse.",
"itemtype": "method",
"name": "drawElipse",
"params": [
{
"name": "x",
"description": "",
"type": "Number"
},
{
"name": "y",
"description": "",
"type": "Number"
},
{
"name": "width",
"description": "",
"type": "Number"
},
{
"name": "height",
"description": "",
"type": "Number"
}
],
"class": "Graphics"
},
{
"file": "src/pixi/primitives/Graphics.js",
"line": 165,
"description": "Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.",
"itemtype": "method",
"name": "clear",
"class": "Graphics"
},
{
"file": "src/pixi/renderers/canvas/CanvasGraphics.js",
"line": 1,
"author": "Mat Groves http://matgroves.com/ @Doormat23",
"class": "DisplayObjectContainer"
"class": "CanvasGraphics"
},
{
"file": "src/pixi/renderers/canvas/CanvasRenderer.js",
@ -2445,7 +2664,7 @@
"file": "src/pixi/renderers/webgl/WebGLGraphics.js",
"line": 1,
"author": "Mat Groves http://matgroves.com/ @Doormat23",
"class": "DisplayObjectContainer"
"class": "CanvasGraphics"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
@ -2455,35 +2674,35 @@
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"line": 647,
"line": 624,
"access": "private",
"tagname": "",
"class": "WebGLBatch"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"line": 733,
"line": 710,
"access": "private",
"tagname": "",
"class": "WebGLBatch"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"line": 789,
"line": 765,
"access": "private",
"tagname": "",
"class": "WebGLBatch"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"line": 866,
"line": 849,
"access": "private",
"tagname": "",
"class": "WebGLBatch"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"line": 903,
"line": 886,
"access": "private",
"tagname": "",
"class": "WebGLBatch"
@ -2496,28 +2715,28 @@
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 84,
"line": 85,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 99,
"line": 100,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 109,
"line": 110,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 115,
"line": 116,
"description": "Renders the stage to its webGL view",
"itemtype": "method",
"name": "render",
@ -2532,14 +2751,14 @@
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 198,
"line": 199,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 257,
"line": 258,
"description": "resizes the webGL view to the specified width and height",
"itemtype": "method",
"name": "resize",
@ -2559,14 +2778,14 @@
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 281,
"line": 285,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
"line": 290,
"line": 294,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
@ -2818,7 +3037,7 @@
},
{
"file": "src/pixi/textures/RenderTexture.js",
"line": 90,
"line": 92,
"description": "This function will draw the display object to the texture.",
"itemtype": "method",
"name": "render",
@ -3434,23 +3653,23 @@
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:647"
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:624"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:733"
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:710"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:789"
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:765"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:866"
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:849"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:903"
"line": " src/pixi/renderers/webgl/WebGLRenderGroup.js:886"
},
{
"message": "Missing item type",
@ -3458,27 +3677,27 @@
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:84"
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:85"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:99"
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:100"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:109"
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:110"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:198"
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:199"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:281"
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:285"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:290"
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:294"
},
{
"message": "Missing item type",

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

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_Intro.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_Outro.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_Pixi.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_core_Point.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_core_Polygon.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_core_Rectangle.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_display_DisplayObject.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_display_DisplayObjectContainer.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_display_MovieClip.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_display_Sprite.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_display_Stage.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_extras_CustomRenderable.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_extras_Rope.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_extras_Spine.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_extras_Strip.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_extras_TilingSprite.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_loaders_AssetLoader.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_loaders_BitmapFontLoader.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_loaders_ImageLoader.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_loaders_JsonLoader.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_loaders_SpineLoader.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_loaders_SpriteSheetLoader.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

119
docs/files/src_pixi_primitives_Graphics.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -144,9 +148,9 @@
&#x2F;**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
* @class Graphics
* @extends DisplayObjectContainer
* @constructor
*&#x2F;
PIXI.Graphics = function()
@ -155,9 +159,6 @@ PIXI.Graphics = function()
this.renderable = true;
&#x2F;&#x2F; style - color
&#x2F;&#x2F; style - thickness
&#x2F;&#x2F; alpha -
this.fillAlpha = 1;
this.lineWidth = 2;
@ -165,43 +166,70 @@ PIXI.Graphics = function()
this.graphicsData = [];
this.currentPath = {points:[]};
}
&#x2F;&#x2F; SOME TYPES:
PIXI.Graphics.POLY = 0;
PIXI.Graphics.RECT = 1;
PIXI.Graphics.CIRC = 2;
&#x2F;&#x2F; constructor
PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
&#x2F;**
* 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}
* @param color {Number}
* @param alpha {Number}
*&#x2F;
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
{
if(this.currentPath.points.length == 0)this.graphicsData.pop();
this.lineWidth = lineWidth || 0;
this.lineColor = color || 0;
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
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);
}
&#x2F;**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
*&#x2F;
PIXI.Graphics.prototype.moveTo = function(x, y)
{
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
if(this.currentPath.points.length == 0)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);
}
&#x2F;**
* 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}
* @param y {Number}
*&#x2F;
PIXI.Graphics.prototype.lineTo = function(x, y)
{
this.currentPath.points.push(x, y);
this.dirty = true;
}
&#x2F;**
* 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
*&#x2F;
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
this.filling = true;
@ -209,6 +237,10 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
this.fillAlpha = alpha || 1;
}
&#x2F;**
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
* @method endFill
*&#x2F;
PIXI.Graphics.prototype.endFill = function()
{
this.filling = false;
@ -216,14 +248,17 @@ PIXI.Graphics.prototype.endFill = function()
this.fillAlpha = 1;
}
PIXI.Graphics.prototype.updateTransform = function()
{
if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this );
}
&#x2F;**
* @method drawRect
* @param x {Number}
* @param y {Number}
* @param width {Number}
* @param height {Number}
*&#x2F;
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
{
if(this.currentPath.points.length == 0)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};
@ -232,23 +267,65 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
this.dirty = true;
}
&#x2F;**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
* @param radius {Number}
*&#x2F;
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
{
if(this.currentPath.points.length == 0)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], type:PIXI.Graphics.CIRC};
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
&#x2F;**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
* @param width {Number}
* @param height {Number}
*&#x2F;
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
{
if(this.currentPath.points.length == 0)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;
}
&#x2F;**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
* @method clear
*&#x2F;
PIXI.Graphics.prototype.clear = function()
{
this.lineWidth = 0;
this.filling = false;
this.dirty = true;
this.clearDirty = true;
this.graphicsData = [];
}
&#x2F;&#x2F; SOME TYPES:
PIXI.Graphics.POLY = 0;
PIXI.Graphics.RECT = 1;
PIXI.Graphics.CIRC = 2;
PIXI.Graphics.ELIP = 3;
</pre>
</div>

80
docs/files/src_pixi_renderers_canvas_CanvasGraphics.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -144,18 +148,22 @@
&#x2F;**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*&#x2F;
PIXI.CanvasGraphics = function()
{
}
&#x2F;&#x2F; constructor
&#x2F;*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*&#x2F;
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -167,11 +175,11 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.strokeStyle = color = &#x27;#&#x27; + (&#x27;00000&#x27; + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth;
context.globalAlpha = data.lineAlpha;
if(data.type == PIXI.Graphics.POLY)
{
if(data.lineWidth &lt;= 0)continue;
&#x2F;&#x2F;if(data.lineWidth &lt;= 0)continue;
context.beginPath();
@ -188,20 +196,31 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.closePath();
}
if(data.fill)
{
context.globalAlpha = data.fillAlpha;
context.fillStyle = color = &#x27;#&#x27; + (&#x27;00000&#x27; + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
{
context.globalAlpha = data.lineAlpha;
context.stroke();
}
}
else if(data.type == PIXI.Graphics.RECT)
{
&#x2F;&#x2F; TODO - need to be Undefined!
if(data.fillColor)
{
context.globalAlpha = data.fillAlpha;
context.fillStyle = color = &#x27;#&#x27; + (&#x27;00000&#x27; + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]);
}
if(data.lineWidth)
{
context.globalAlpha = data.lineAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]);
}
}
@ -214,11 +233,56 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.fill)
{
context.globalAlpha = data.fillAlpha;
context.fillStyle = color = &#x27;#&#x27; + (&#x27;00000&#x27; + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
{
context.globalAlpha = data.lineAlpha;
context.stroke();
}
}
else if(data.type == PIXI.Graphics.ELIP)
{
&#x2F;&#x2F; elipse code taken from: http:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;2172798&#x2F;how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points;
var w = elipseData[2] * 2;
var h = elipseData[3] * 2;
var x = elipseData[0] - w&#x2F;2;
var y = elipseData[1] - h&#x2F;2;
context.beginPath();
var kappa = .5522848,
ox = (w &#x2F; 2) * kappa, &#x2F;&#x2F; control point offset horizontal
oy = (h &#x2F; 2) * kappa, &#x2F;&#x2F; control point offset vertical
xe = x + w, &#x2F;&#x2F; x-end
ye = y + h, &#x2F;&#x2F; y-end
xm = x + w &#x2F; 2, &#x2F;&#x2F; x-middle
ym = y + h &#x2F; 2; &#x2F;&#x2F; y-middle
context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
if(data.fill)
{
context.globalAlpha = data.fillAlpha;
context.fillStyle = color = &#x27;#&#x27; + (&#x27;00000&#x27; + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
{
context.globalAlpha = data.lineAlpha;
context.stroke();
}
}

4
docs/files/src_pixi_renderers_canvas_CanvasRenderer.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_renderers_webgl_WebGLBatch.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

346
docs/files/src_pixi_renderers_webgl_WebGLGraphics.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -143,28 +147,24 @@
*&#x2F;
&#x2F;**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*&#x2F;
PIXI.WebGLGraphics = function()
{
}
&#x2F;&#x2F; constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics)
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
&#x2F;&#x2F; graphicsObject
&#x2F;&#x2F; a collection of &quot;shapes&quot; (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], lastPosition:new PIXI.Point(), lastIndex:0, buffer:gl.createBuffer()};
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
if(graphics.dirty)
{
@ -178,21 +178,32 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
graphics._webGL.points = [];
}
PIXI.WebGLGraphics.initGraphics(graphics);
PIXI.WebGLGraphics.updateGraphics(graphics);
}
gl.uniform2f(PIXI.primitiveProgram.projectionVector, 400, 300);
&#x2F;&#x2F; This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m);
&#x2F;&#x2F; set the matrix transform for the
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.glPoints.length&#x2F;6);
&#x2F;&#x2F; set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
&#x2F;&#x2F; return to default shader...
PIXI.activateDefaultShader();
}
PIXI.WebGLGraphics.initGraphics = function(graphics)
PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
for (var i=graphics._webGL.lastIndex; i &lt; graphics.graphicsData.length; i++)
{
@ -200,6 +211,12 @@ PIXI.WebGLGraphics.initGraphics = function(graphics)
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
{
if(data.points.length&gt;3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
}
if(data.lineWidth &gt; 0)
{
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
@ -209,21 +226,24 @@ PIXI.WebGLGraphics.initGraphics = function(graphics)
{
PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
}
else if(data.type == PIXI.Graphics.CIRC)
else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP)
{
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
}
};
&#x2F;&#x2F;console.log(graphics._webGL.lastIndex - graphics.graphicsData.length )
graphics._webGL.lastIndex = graphics.graphicsData.length;
&#x2F;&#x2F; convert to points
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
}
@ -249,10 +269,9 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
&#x2F;&#x2F; dead triangle
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
verts.push(x, y, 1, 1, 1, 1);
var vertPos = verts.length&#x2F;6;
&#x2F;&#x2F; start
verts.push(x, y);
@ -267,8 +286,8 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
webGLData.lastPosition.x = x + width;
webGLData.lastPosition.y = y + height;
&#x2F;&#x2F; insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
}
if(graphicsData.lineWidth)
@ -292,9 +311,10 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var radius = rectData[2];
var width = rectData[2];
var height = rectData[3];
var totalSegs = 40
var totalSegs = 40;
var seg = (Math.PI * 2) &#x2F; totalSegs ;
if(graphicsData.fill)
@ -307,26 +327,24 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
verts.push(x, y, 1, 1, 1, 1);
var vecPos = verts.length&#x2F;6;
indices.push(vecPos);
for (var i=0; i &lt; totalSegs + 1 ; i++)
{
verts.push(x,y);
verts.push(r, g, b, alpha);
verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * radius,
y + Math.cos(seg * i) * radius);
verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height,
r, g, b, alpha);
verts.push(r, g, b, alpha);
indices.push(vecPos++, vecPos++);
};
verts.push(x,y);
verts.push(1, 0, 0, 1);
webGLData.lastPosition.x = x;
webGLData.lastPosition.y = y;
indices.push(vecPos-1);
}
if(graphicsData.lineWidth)
@ -335,8 +353,8 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
for (var i=0; i &lt; totalSegs + 1; i++)
{
graphicsData.points.push(x + Math.sin(seg * i) * radius,
y + Math.cos(seg * i) * radius)
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height)
};
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
@ -346,6 +364,8 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{
&#x2F;&#x2F; TODO OPTIMISE!
var wrap = true;
var points = graphicsData.points;
if(points.length == 0)return;
@ -370,118 +390,197 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
}
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length &#x2F; 2;
var indexCount = points.length;
var indexStart = verts.length&#x2F;6;
&#x2F;&#x2F; DRAW the Line
var width = graphicsData.lineWidth &#x2F; 2;
&#x2F;&#x2F; sort color
var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
&#x2F;&#x2F; i = 0 &#x2F;&#x2F;
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var perp = getPerp(point1, point2);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
perp.x &#x2F;= dist;
perp.y &#x2F;= dist;
perp.x *= width;
perp.y *= width;
p1x = points[0];
p1y = points[1];
&#x2F;&#x2F; insert dead triangle!
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
verts.push(points[0] - perp.x , points[1] - perp.y, 1, 1, 1, 1);
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx &#x2F;= dist;
perpy &#x2F;= dist;
perpx *= width;
perpy *= width;
&#x2F;&#x2F; start
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i &lt; length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = getPerp(point1, point2);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x &#x2F;= dist;
perp.y &#x2F;= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = getPerp(point2, point3);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x &#x2F;= dist2;
perp2.y &#x2F;= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var p1 = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var p1_ = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var p2 = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var p2_ = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx &#x2F;= dist;
perpy &#x2F;= dist;
perpx *= width;
perpy *= width;
var p = lineIntersectLine(p1, p1_, p2, p2_);
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x &#x2F;= dist;
perp2y &#x2F;= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
px = (b1*c2 - b2*c1)&#x2F;denom;
py = (a2*c1 - a1*c2)&#x2F;denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist &gt; 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x &#x2F;= dist3;
perp3.y &#x2F;= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x &#x2F;= dist;
perp3y &#x2F;= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));&#x2F;&#x2F;, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));&#x2F;&#x2F;, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = getPerp(point1, point2);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x &#x2F;= dist;
perp.y &#x2F;= dist;
perp.x *= width;
perp.y *= width;
verts.push(point2.x - perp.x , point2.y - perp.y)
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx &#x2F;= dist;
perpy &#x2F;= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
&#x2F;&#x2F; set last triangle!
webGLData.lastPosition.x = point2.x + perp.x;
webGLData.lastPosition.y = point2.y + perp.y;
indices.push(indexStart);
for (var i=0; i &lt; indexCount; i++)
{
indices.push(indexStart++);
};
indices.push(indexStart-1);
}
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{
var points = graphicsData.points;
if(points.length &lt; 6)return;
&#x2F;&#x2F; get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length &#x2F; 2;
&#x2F;&#x2F; sort color
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length &#x2F; 6;
for (var i=0; i &lt; triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
indices.push(triangles[i+1] + vertPos);
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
};
for (var i = 0; i &lt; length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);
};
}
function HEXtoRGB(hex) {
@ -489,47 +588,6 @@ function HEXtoRGB(hex) {
}
function normalise(point)
{
var dist = Math.sqrt(point.x * point.x + point.y * point.y);
return new PIXI.Point(point.x &#x2F; dist, point.y &#x2F; dist);
}
function getPerp(point, point2)
{
return new PIXI.Point(-(point.y - point2.y), point.x - point2.x);
}
function lineIntersectLine(A,B,E,F)
{
var ip;
var a1;
var a2;
var b1;
var b2;
var c1;
var c2;
a1= B.y-A.y;
b1= A.x-B.x;
c1= B.x*A.y - A.x*B.y;
a2= F.y-E.y;
b2= E.x-F.x;
c2= F.x*E.y - E.x*F.y;
var denom=a1*b2 - a2*b1;
if (denom == 0) {
&#x2F;&#x2F; return null;
console.log(&quot;!&quot;)
denom+=1;
}
ip=new PIXI.Point();
ip.x=(b1*c2 - b2*c1)&#x2F;denom;
ip.y=(a2*c1 - a1*c2)&#x2F;denom;
return ip;
}

129
docs/files/src_pixi_renderers_webgl_WebGLRenderGroup.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -183,14 +187,16 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
&#x2F;&#x2F;displayObject
}
PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
PIXI.WebGLRenderGroup.prototype.render = function(projection)
{
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
&#x2F;&#x2F; set the flipped matrix..
gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
&#x2F;&#x2F; gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, PIXI.projectionMatrix);
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
&#x2F;&#x2F; TODO remove this by replacing visible with getter setters..
this.checkVisibility(this.root, this.root.visible);
@ -208,27 +214,29 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
}
else if(renderable instanceof PIXI.TilingSprite)
{
if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
if(renderable.visible)this.renderTilingSprite(renderable, projection);
}
else if(renderable instanceof PIXI.Strip)
{
if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
if(renderable.visible)this.renderStrip(renderable, projection);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable, projection);&#x2F;&#x2F;, projectionMatrix);
}
}
}
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projectionMatrix)
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
this.checkVisibility(displayObject, displayObject.visible);
gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
&#x2F;&#x2F; gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
&#x2F;&#x2F;console.log(&quot;SPECIFIC&quot;);
@ -311,28 +319,15 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
&#x2F;&#x2F; TODO - need to fold this up a bit!
if(startBatch == endBatch)
{
if(startBatch instanceof PIXI.WebGLBatch)
{
startBatch.render(startIndex, endIndex+1);
}
else if(startBatch instanceof PIXI.TilingSprite)
else
{
if(startBatch.visible)this.renderTilingSprite(startBatch, projectionMatrix);
}
else if(startBatch instanceof PIXI.Strip)
{
if(startBatch.visible)this.renderStrip(startBatch, projectionMatrix);
}
else if(startBatch instanceof PIXI.CustomRenderable)
{
if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
this.renderSpecial(startBatch);
}
return;
}
@ -346,22 +341,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
startBatch.render(startIndex);
}
else if(startBatch instanceof PIXI.TilingSprite)
else
{
if(startBatch.visible)this.renderTilingSprite(startBatch, projectionMatrix);
}
else if(startBatch instanceof PIXI.Strip)
{
if(startBatch.visible)this.renderStrip(startBatch, projectionMatrix);
}
else if(startBatch instanceof PIXI.CustomRenderable)
{
if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
this.renderSpecial(startBatch);
}
&#x2F;&#x2F; DO the middle batchs..
for (var i=startBatchIndex+1; i &lt; endBatchIndex; i++)
{
@ -371,7 +355,26 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
this.batchs[i].render();
}
else if(renderable instanceof PIXI.TilingSprite)
else
{
this.renderSpecial(renderable);
}
}
&#x2F;&#x2F; DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch)
{
endBatch.render(0, endIndex+1);
}
else
{
this.renderSpecial(endBatch);
}
}
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable)
{
if(renderable instanceof PIXI.TilingSprite)
{
if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
}
@ -387,29 +390,6 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
}
}
&#x2F;&#x2F; DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch)
{
endBatch.render(0, endIndex+1);
}
else if(endBatch instanceof PIXI.TilingSprite)
{
if(endBatch.visible)this.renderTilingSprite(endBatch);
}
else if(endBatch instanceof PIXI.Strip)
{
if(endBatch.visible)this.renderStrip(endBatch);
}
else if(endBatch instanceof PIXI.CustomRenderable)
{
if(endBatch.visible) endBatch.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);&#x2F;&#x2F;, projectionMatrix);
}
}
PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)
@ -658,6 +638,7 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
}
else if(displayObject instanceof PIXI.TilingSprite)
{
&#x2F;&#x2F; add to a batch!!
this.initTilingSprite(displayObject);
this.batchs.push(displayObject);
@ -893,7 +874,6 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
sprite.indices = new Uint16Array([0, 1, 3,2])&#x2F;&#x2F;, 2]);
sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer();
@ -929,16 +909,25 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
&#x2F;**
* @private
*&#x2F;
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{
var gl = this.gl;
var shaderProgram = PIXI.shaderProgram;
&#x2F;&#x2F; mat
var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
PIXI.mat4.transpose(mat4Real);
PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
&#x2F;&#x2F;var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
&#x2F;&#x2F;PIXI.mat4.transpose(mat4Real);
&#x2F;&#x2F;PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mat4Real);
gl.useProgram(PIXI.stripShaderProgram);
var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m);
&#x2F;&#x2F; set the matrix transform for the
gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y);
if(strip.blendMode == PIXI.blendModes.NORMAL)
{
@ -968,8 +957,6 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
&#x2F;&#x2F; dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
}
else
{
@ -995,11 +982,11 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
&#x2F;&#x2F;console.log(gl.TRIANGLE_STRIP)
&#x2F;&#x2F;console.log(gl.TRIANGLE_STRIP);
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, projectionMatrix);
gl.useProgram(PIXI.shaderProgram);
}

24
docs/files/src_pixi_renderers_webgl_WebGLRenderer.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -198,6 +202,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
PIXI.initPrimitiveShader();
PIXI.initDefaultShader();
PIXI.initDefaultStripShader();
PIXI.activateDefaultShader();
@ -210,7 +215,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
this.projectionMatrix = PIXI.mat4.create();
PIXI.projection = new PIXI.Point(400, 300);
this.resize(this.width, this.height);
this.contextLost = false;
@ -306,10 +311,10 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
gl.clear(gl.COLOR_BUFFER_BIT);
&#x2F;&#x2F; HACK TO TEST
PIXI.projectionMatrix = this.projectionMatrix;
&#x2F;&#x2F;PIXI.projectionMatrix = this.projectionMatrix;
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(this.projectionMatrix);
this.stageRenderGroup.render(PIXI.projection);
&#x2F;&#x2F; interaction
&#x2F;&#x2F; run interaction!
@ -410,12 +415,15 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.gl.viewport(0, 0, this.width, this.height);
var projectionMatrix = this.projectionMatrix;
&#x2F;&#x2F;var projectionMatrix = this.projectionMatrix;
projectionMatrix[0] = 2&#x2F;this.width;
projectionMatrix[5] = -2&#x2F;this.height;
projectionMatrix[12] = -1;
projectionMatrix[13] = 1;
PIXI.projection.x = this.width&#x2F;2;
PIXI.projection.y = this.height&#x2F;2;
&#x2F;&#x2F; projectionMatrix[0] = 2&#x2F;this.width;
&#x2F;&#x2F; projectionMatrix[5] = -2&#x2F;this.height;
&#x2F;&#x2F; projectionMatrix[12] = -1;
&#x2F;&#x2F; projectionMatrix[13] = 1;
}
&#x2F;**

69
docs/files/src_pixi_renderers_webgl_WebGLShaders.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -143,6 +147,11 @@
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
&#x2F;*
* the default suoer fast shader!
*&#x2F;
PIXI.shaderFragmentSrc = [
&quot;precision mediump float;&quot;,
&quot;varying vec2 vTextureCoord;&quot;,
@ -158,17 +167,41 @@ PIXI.shaderVertexSrc = [
&quot;attribute vec2 aVertexPosition;&quot;,
&quot;attribute vec2 aTextureCoord;&quot;,
&quot;attribute float aColor;&quot;,
&quot;uniform mat4 uMVMatrix;&quot;,
&#x2F;&#x2F;&quot;uniform mat4 uMVMatrix;&quot;,
&quot;uniform vec2 projectionVector;&quot;,
&quot;varying vec2 vTextureCoord;&quot;,
&quot;varying float vColor;&quot;,
&quot;void main(void) {&quot;,
&quot;gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);&quot;,
&#x2F;&#x2F; &quot;gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);&quot;,
&quot;gl_Position = vec4( aVertexPosition.x &#x2F; projectionVector.x -1.0, aVertexPosition.y &#x2F; -projectionVector.y + 1.0 , 0.0, 1.0);&quot;,
&quot;vTextureCoord = aTextureCoord;&quot;,
&quot;vColor = aColor;&quot;,
&quot;}&quot;
];
&#x2F;*
* the triangle strip shader..
*&#x2F;
PIXI.stripShaderVertexSrc = [
&quot;attribute vec2 aVertexPosition;&quot;,
&quot;attribute vec2 aTextureCoord;&quot;,
&quot;attribute float aColor;&quot;,
&quot;uniform mat3 translationMatrix;&quot;,
&quot;uniform vec2 projectionVector;&quot;,
&quot;varying vec2 vTextureCoord;&quot;,
&quot;varying float vColor;&quot;,
&quot;void main(void) {&quot;,
&quot;vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);&quot;,
&quot;gl_Position = vec4( v.x &#x2F; projectionVector.x -1.0, v.y &#x2F; -projectionVector.y + 1.0 , 0.0, 1.0);&quot;,
&quot;vTextureCoord = aTextureCoord;&quot;,
&quot;vColor = aColor;&quot;,
&quot;}&quot;
];
&#x2F;*
* primitive shader..
*&#x2F;
PIXI.primitiveShaderFragmentSrc = [
&quot;precision mediump float;&quot;,
@ -181,19 +214,16 @@ PIXI.primitiveShaderFragmentSrc = [
PIXI.primitiveShaderVertexSrc = [
&quot;attribute vec2 aVertexPosition;&quot;,
&quot;attribute vec4 aColor;&quot;,
&quot;uniform mat3 translationMatrix;&quot;,
&quot;uniform vec2 projectionVector;&quot;,
&quot;varying vec4 vColor;&quot;,
&quot;void main(void) {&quot;,
&quot;gl_Position = vec4( aVertexPosition.x &#x2F; projectionVector.x -1.0, aVertexPosition.y &#x2F; -projectionVector.y + 1.0 , 0.0, 1.0);&quot;,
&quot;vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);&quot;,
&quot;gl_Position = vec4( v.x &#x2F; projectionVector.x -1.0, v.y &#x2F; -projectionVector.y + 1.0 , 0.0, 1.0);&quot;,
&quot;vColor = aColor;&quot;,
&quot;}&quot;
];
&#x2F;*
* primitive shader..
*&#x2F;
PIXI.initPrimitiveShader = function()
{
var gl = PIXI.gl;
@ -205,6 +235,7 @@ PIXI.initPrimitiveShader = function()
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, &quot;aVertexPosition&quot;);
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, &quot;aColor&quot;);
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, &quot;projectionVector&quot;);
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, &quot;translationMatrix&quot;);
PIXI.primitiveProgram = shaderProgram;
}
@ -217,6 +248,7 @@ PIXI.initDefaultShader = function()
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, &quot;aVertexPosition&quot;);
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, &quot;projectionVector&quot;);
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, &quot;aTextureCoord&quot;);
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, &quot;aColor&quot;);
@ -226,6 +258,27 @@ PIXI.initDefaultShader = function()
PIXI.shaderProgram = shaderProgram;
}
PIXI.initDefaultStripShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, &quot;aVertexPosition&quot;);
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, &quot;projectionVector&quot;);
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, &quot;aTextureCoord&quot;);
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, &quot;translationMatrix&quot;);
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, &quot;aColor&quot;);
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, &quot;projectionVector&quot;);
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, &quot;uSampler&quot;);
PIXI.stripShaderProgram = shaderProgram;
}
PIXI.CompileVertexShader = function(gl, shaderSrc)
{
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);

4
docs/files/src_pixi_text_BitmapText.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_text_Text.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_textures_BaseTexture.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

15
docs/files/src_pixi_textures_RenderTexture.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -205,6 +209,8 @@ PIXI.RenderTexture.prototype.initWebGL = function()
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
&#x2F;&#x2F; create a projection matrix..
this.projection = new PIXI.Point(this.width&#x2F;2 , this.height&#x2F;2);
this.projectionMatrix = PIXI.mat4.create();
this.projectionMatrix[5] = 2&#x2F;this.height&#x2F;&#x2F; * 0.5;
@ -255,6 +261,9 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, clear)
&#x2F;&#x2F;TODO -? create a new one??? dont think so!
displayObject.worldTransform = PIXI.mat3.create();&#x2F;&#x2F;sthis.indetityMatrix;
&#x2F;&#x2F; modify to flip...
displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2;
for(var i=0,j=children.length; i&lt;j; i++)
{
@ -267,18 +276,18 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, clear)
{
if(displayObject == renderGroup.root)
{
renderGroup.render(this.projectionMatrix);
renderGroup.render(this.projection);
}
else
{
renderGroup.renderSpecific(displayObject, this.projectionMatrix);
renderGroup.renderSpecific(displayObject, this.projection);
}
}
else
{
if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl);
this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projectionMatrix);
this.renderGroup.render(this.projection);
}
}

4
docs/files/src_pixi_textures_Texture.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_utils_Detector.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_utils_EventTarget.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/files/src_pixi_utils_Utils.js.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>

4
docs/index.html
View file

@ -49,6 +49,8 @@
<li><a href=".&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href=".&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href=".&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href=".&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href=".&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href=".&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href=".&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href=".&#x2F;classes/InteractionData.html">InteractionData</a></li>

16
docs/modules/PIXI.html
View file

@ -49,6 +49,8 @@
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
@ -57,6 +59,8 @@
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
@ -188,6 +192,12 @@
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/CanvasGraphics.html">
CanvasGraphics
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/CanvasRenderer.html">
CanvasRenderer
@ -212,6 +222,12 @@
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/Graphics.html">
Graphics
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/ImageLoader.html">
ImageLoader

205
examples/example 1 - Basics/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 10 - Text/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 11 - RenderTexture/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 12 - Spine/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

99
examples/example 13 - Graphics/index.html
View file

@ -11,21 +11,14 @@
</style>
<script src="pixi.js"></script>
<!--<script src="../../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
<script src="../../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
<script src="../../src/pixi/renderers/CanvasRenderer.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
<script src="../../src/pixi/primitives/Graphics.js"></script>
<script src="../../src/pixi/utils/Polyk.js"></script>-->
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x000000, true);
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.setInteractive(true);
@ -46,75 +39,58 @@
var graphics = new PIXI.Graphics();
// set a fill and line style
graphics.beginFill(0xFF0000);
graphics.lineStyle(10, 0x30FF00, 0.5);
graphics.lineStyle(10, 0x30FF00, 1);
// draw a shape
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
graphics.lineTo(100, 100);
graphics.lineTo(250, 220);
graphics.lineTo(50, 220);
graphics.lineTo(50, 50);
graphics.endFill();
graphics.lineStyle(2, 0x30FFFF, 1);
graphics.beginFill(0xFF794B, 0.5);
// set a fill and line style again
graphics.lineStyle(10, 0x000000, 0.8);
graphics.beginFill(0xFF700B, 1);
graphics.drawRect(250, 250, 300, 100);
graphics.drawCircle(350, 350,100);
/*
graphics.endFill();
graphics.lineTo(250, 50);
graphics.lineStyle(10, 0xFF0000, 1);
graphics.moveTo(400,400);
graphics.lineTo(550, 50);
graphics.lineStyle(30, 0xFF0000, 1);
graphics.moveTo(400,100);
graphics.lineTo(550, 50);
//graphics.lineTo(92, 20);
//graphics.lineTo(450, 223);
*/
/*
* point1 = new Point(350, 50);
point2 = new Point(100, 100);
point3 = new Point(250, 220);
points = new Vector.<Point>();
points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
*/
// graphics.beginFill(0xFF700B, 1);
// graphics.drawElipse(450,320, 100, 200);
/* graphics.moveTo(210,300);
// draw a second shape
graphics.moveTo(210,300);
graphics.lineTo(450,320);
graphics.lineTo(570,350);
graphics.lineTo(580,20);
graphics.lineTo(330,120);
graphics.lineTo(410,300);
*/
//graphics.endFill();
graphics.lineTo(210,300);
graphics.endFill();
// draw a rectangel
graphics.lineStyle(2, 0x0000FF, 1);
graphics.drawRect(50, 250, 100, 200);
// draw a circle
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(350, 350,100);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
var container = new PIXI.DisplayObjectContainer();
container.addChild(sprite);
sprite.position.x = 300;
sprite.anchor.x = sprite.anchor.y = 0.5;
sprite.scale.x = sprite.scale.y = 5;
stage.addChild(sprite);
sprite.position.x = 400;
sprite.position.y = 300;
stage.addChild(container);
stage.addChild(graphics);
stage.click = function()
stage.click = stage.tap = function()
{
//graphics.clear();
graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
graphics.moveTo(Math.random() * 600,Math.random() * 600);
graphics.lineTo(Math.random() * 600,Math.random() * 600);
}
requestAnimFrame(animate);
@ -123,14 +99,7 @@
renderer.render(stage);
requestAnimFrame( animate );
container.position.x = 100;//stage.interactionManager.mouse.local.x;
container.position.y = 200;//stage.interactionManager.mouse.local.y;
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
// graphics.moveTo(Math.random() * 600,Math.random() * 600);
// graphics.lineTo(Math.random() * 600,Math.random() * 600);
// graphics.scale.x = 3;
// container.rotation += 0.01;
// sprite.rotation -= 0.01;
sprite.rotation -= 0.01;
}
</script>

205
examples/example 13 - Graphics/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 2 - SpriteSheet/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 3 - MovieClip/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 4 - Balls/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 5 - Morph/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 6 - Interactivity/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 7 - Transparent Background/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 8 - Dragging/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

205
examples/example 9 - Tiling Texture/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-06-21
* Compiled: 2013-06-22
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -2597,6 +2597,7 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}
@ -2846,26 +2847,21 @@ PIXI.activatePrimitiveShader = function()
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -2913,7 +2909,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -3096,12 +3091,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -3114,118 +3105,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -3259,8 +3265,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -3272,8 +3276,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
@ -5464,18 +5466,22 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -5635,6 +5641,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -5655,6 +5662,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -5666,14 +5674,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -5685,9 +5692,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -5697,6 +5705,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -5726,6 +5735,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -5744,6 +5754,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -5763,10 +5774,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

19
src/pixi/primitives/Graphics.js
View file

@ -4,7 +4,7 @@
/**
* The Graphics class contains a set of methods that you can use to create a primitive shapes and lines.
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
* @class Graphics
* @extends DisplayObjectContainer
* @constructor
@ -30,6 +30,7 @@ PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* 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}
* @param color {Number}
@ -50,6 +51,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
}
/**
* Moves the current drawing position to (x, y).
* @method moveTo
* @param x {Number}
* @param y {Number}
@ -61,14 +63,13 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, 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}
* @param y {Number}
@ -80,9 +81,10 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
}
/**
* 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 {Number}
* @param alpha {Number}
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -92,6 +94,7 @@ PIXI.Graphics.prototype.beginFill = function(color, 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()
@ -121,6 +124,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
}
/**
* Draws a circle.
* @method drawCircle
* @param x {Number}
* @param y {Number}
@ -139,6 +143,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
}
/**
* Draws an elipse.
* @method drawElipse
* @param x {Number}
* @param y {Number}
@ -158,10 +163,14 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
}
/**
* 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 = [];

14
src/pixi/renderers/canvas/CanvasGraphics.js
View file

@ -4,18 +4,22 @@
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the canvas renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
/*
* @private
* @static
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{

171
src/pixi/renderers/webgl/WebGLGraphics.js
View file

@ -3,26 +3,21 @@
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
@ -70,7 +65,6 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
@ -253,12 +247,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;// + 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
@ -271,118 +261,133 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
p1x = points[0];
p1y = points[1];
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
perpx = -(p1y - p2y);
perpy = p1x - p2x;
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
var denom = a1*b2 - a2*b1;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
verts.push(point2.x - perp.x , point2.y - perp.y)
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
@ -416,8 +421,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
@ -429,8 +432,6 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] + vertPos);
};
indices.push(triangles[i+2] + vertPos);
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],

1
src/pixi/utils/Polyk.js
View file

@ -91,6 +91,7 @@
}
else
{
console.log("PIXI Warning: shape too complex to fill")
return [];
}
}

203
src/pixi/utils/pixi.js example 13 - Graphics.html
View file

@ -1,203 +0,0 @@
<!DOCTYPE html>
<!-- saved from url=(0077)http://127.0.0.1:8020/pixi.js/examples/example%2013%20-%20Graphics/index.html -->
<html><script>(function main() {
// Create enabled event
function fireEnabledEvent() {
// If gli exists, then we are already present and shouldn't do anything
if (!window.gli) {
setTimeout(function () {
var enabledEvent = document.createEvent("Event");
enabledEvent.initEvent("WebGLEnabledEvent", true, true);
document.dispatchEvent(enabledEvent);
}, 0);
} else {
//console.log("WebGL Inspector already embedded on the page - disabling extension");
}
};
// Grab the path root from the extension
document.addEventListener("WebGLInspectorReadyEvent", function (e) {
var pathElement = document.getElementById("__webglpathroot");
if (window["gliloader"]) {
gliloader.pathRoot = pathElement.innerText;
} else {
// TODO: more?
window.gliCssUrl = pathElement.innerText + "gli.all.css";
}
}, false);
// Rewrite getContext to snoop for webgl
var originalGetContext = HTMLCanvasElement.prototype.getContext;
if (!HTMLCanvasElement.prototype.getContextRaw) {
HTMLCanvasElement.prototype.getContextRaw = originalGetContext;
}
HTMLCanvasElement.prototype.getContext = function () {
var ignoreCanvas = this.internalInspectorSurface;
if (ignoreCanvas) {
return originalGetContext.apply(this, arguments);
}
var result = originalGetContext.apply(this, arguments);
if (result == null) {
return null;
}
var contextNames = ["moz-webgl", "webkit-3d", "experimental-webgl", "webgl", "3d"];
var requestingWebGL = contextNames.indexOf(arguments[0]) != -1;
if (requestingWebGL) {
// Page is requesting a WebGL context!
fireEnabledEvent(this);
// If we are injected, inspect this context
if (window.gli) {
if (gli.host.inspectContext) {
// TODO: pull options from extension
result = gli.host.inspectContext(this, result);
// NOTE: execute in a timeout so that if the dom is not yet
// loaded this won't error out.
window.setTimeout(function() {
var hostUI = new gli.host.HostUI(result);
result.hostUI = hostUI; // just so we can access it later for debugging
}, 0);
}
}
}
return result;
};
})();</script><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>pixi.js example 13 - Graphics</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="./pixi.js example 13 - Graphics_files/pixi.js"></script>
<script src="./pixi.js example 13 - Graphics_files/WebGLGraphics.js"></script>
<script src="./pixi.js example 13 - Graphics_files/WebGLShaders.js"></script>
<script src="./pixi.js example 13 - Graphics_files/CanvasGraphics.js"></script>
<script src="./pixi.js example 13 - Graphics_files/CanvasRenderer.js"></script>
<script src="./pixi.js example 13 - Graphics_files/WebGLRenderer.js"></script>
<script src="./pixi.js example 13 - Graphics_files/WebGLGraphics.js"></script>
<script src="./pixi.js example 13 - Graphics_files/Graphics.js"></script>
<script src="./pixi.js example 13 - Graphics_files/Polyk.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x000000, true);
stage.setInteractive(true);
// create a renderer instance
//var renderer = new PIXI.CanvasRenderer(800, 600);//PIXI.autoDetectRenderer(800, 600);
var renderer = PIXI.autoDetectRenderer(800, 600);
// set the canvas width and height to fill the screen
// renderer.view.style.width = window.innerWidth + "px";
//renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// OOH! SHINY!
// create two render textures.. these dynamic textures will be used to draw the scene into itself
var graphics = new PIXI.Graphics();
graphics.beginFill(0xFF0000);
graphics.lineStyle(10, 0x30FF00, 0.5);
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
graphics.lineTo(100, 100);
graphics.lineTo(250, 220);
graphics.lineTo(50, 220);
graphics.lineTo(50, 50);
graphics.endFill();
graphics.lineStyle(2, 0x30FFFF, 1);
/*
// graphics.beginFill(0xFF794B);
graphics.drawRect(250, 250, 300, 100);
graphics.drawCircle(350, 350,100);
graphics.endFill();
graphics.lineTo(250, 50);
graphics.lineStyle(10, 0xFF0000, 1);
graphics.moveTo(400,400);
graphics.lineTo(550, 50);
graphics.lineStyle(30, 0xFF0000, 1);
graphics.moveTo(400,100);
graphics.lineTo(550, 50);
//graphics.lineTo(92, 20);
//graphics.lineTo(450, 223);
*/
/*
* point1 = new Point(350, 50);
point2 = new Point(100, 100);
point3 = new Point(250, 220);
points = new Vector.<Point>();
points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
*/
//graphics.beginFill(0xFF700B);
// graphics.drawElipse(450,320, 100, 200);
graphics.lineTo(410,300);
graphics.lineTo(450,320);
graphics.lineTo(570,350);
graphics.lineTo(580,120);
graphics.lineTo(630,120);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
var container = new PIXI.DisplayObjectContainer();
container.addChild(sprite);
sprite.position.x = 300;
stage.addChild(container);
stage.addChild(graphics);
stage.click = function()
{
//graphics.clear();
}
requestAnimFrame(animate);
function animate() {
renderer.render(stage);
requestAnimFrame( animate );
container.position.x = 100;//stage.interactionManager.mouse.local.x;
container.position.y = 200;//stage.interactionManager.mouse.local.y;
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
// graphics.moveTo(Math.random() * 600,Math.random() * 600);
// graphics.lineTo(Math.random() * 600,Math.random() * 600);
// graphics.scale.x = 3;
// container.rotation += 0.01;
// sprite.rotation -= 0.01;
}
</script><canvas width="800" height="600" style="display: block; cursor: default;"></canvas>
</body></html>

129
src/pixi/utils/pixi.js example 13 - Graphics_files/CanvasGraphics.js
View file

@ -1,129 +0,0 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
*/
PIXI.CanvasGraphics = function()
{
}
// constructor
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
for (var i=0; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth;
context.globalAlpha = data.lineAlpha;
if(data.type == PIXI.Graphics.POLY)
{
if(data.lineWidth <= 0)continue;
context.beginPath();
context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
// if the first and last point are the same close the path - much neater :)
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
{
context.closePath();
}
context.stroke();
}
else if(data.type == PIXI.Graphics.RECT)
{
// TODO - need to be Undefined!
if(data.fillColor)
{
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]);
}
if(data.lineWidth)
{
context.strokeRect(points[0], points[1], points[2], points[3]);
}
}
else if(data.type == PIXI.Graphics.CIRC)
{
// TODO - need to be Undefined!
context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath();
if(data.fill)
{
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
{
context.stroke();
}
}
else if(data.type == PIXI.Graphics.ELIP)
{
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points;
var w = elipseData[2] * 2;
var h = elipseData[3] * 2;
var x = elipseData[0] - w/2;
var y = elipseData[1] - h/2;
context.beginPath();
var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
if(data.fill)
{
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
{
context.stroke();
}
}
};
}

1
src/pixi/utils/pixi.js example 13 - Graphics_files/CanvasRenderer.js
View file

@ -1 +0,0 @@
<html><body><h1>File /pixi.js/src/pixi/renderers/CanvasRenderer.js not found</h1></body></html>

163
src/pixi/utils/pixi.js example 13 - Graphics_files/Graphics.js
View file

@ -1,163 +0,0 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* The Graphics class contains a set of methods that you can use to create a primitive shapes and lines.
* @class Graphics
* @extends DisplayObjectContainer
* @constructor
*/
PIXI.Graphics = function()
{
PIXI.DisplayObjectContainer.call( this );
this.renderable = true;
this.fillAlpha = 1;
this.lineWidth = 2;
this.lineColor = "#FF0000";
this.graphicsData = [];
}
// constructor
PIXI.Graphics.constructor = PIXI.Graphics;
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
/**
* @method lineStyle
* @param lineWidth {Number}
* @param color {Number}
* @param alpha {Number}
*/
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
{
this.lineWidth = lineWidth || 0;
this.lineColor = color || 0;
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
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.graphicsData.push(this.currentPath);
}
/**
* @method moveTo
* @param x {Number}
* @param y {Number}
*/
PIXI.Graphics.prototype.moveTo = function(x, y)
{
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};
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
this.currentPath.points.push(x, y);
this.graphicsData.push(this.currentPath);
}
/**
* @method lineTo
* @param x {Number}
* @param y {Number}
*/
PIXI.Graphics.prototype.lineTo = function(x, y)
{
this.currentPath.points.push(x, y);
this.dirty = true;
}
/**
* @method beginFill
* @param color {Number}
* @param alpha {Number}
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
this.filling = true;
this.fillColor = color || 0;
this.fillAlpha = alpha || 1;
}
/**
* @method endFill
*/
PIXI.Graphics.prototype.endFill = function()
{
this.filling = false;
this.fillColor = null;
this.fillAlpha = 1;
}
/**
* @method drawRect
* @param x {Number}
* @param y {Number}
* @param width {Number}
* @param height {Number}
*/
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
{
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;
}
/**
* @method drawCircle
* @param x {Number}
* @param y {Number}
* @param radius {Number}
*/
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
{
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;
}
/**
* @method drawElipse
* @param x {Number}
* @param y {Number}
* @param width {Number}
* @param height {Number}
*/
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
{
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;
}
/**
* @method clear
*/
PIXI.Graphics.prototype.clear = function()
{
this.dirty = true;
this.clearDirty = true;
this.graphicsData = [];
}
// SOME TYPES:
PIXI.Graphics.POLY = 0;
PIXI.Graphics.RECT = 1;
PIXI.Graphics.CIRC = 2;
PIXI.Graphics.ELIP = 3;

473
src/pixi/utils/pixi.js example 13 - Graphics_files/Polyk.js
View file

@ -1,473 +0,0 @@
/*
PolyK library
url: http://polyk.ivank.net
Released under MIT licence.
Copyright (c) 2012 Ivan Kuckir
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/
var PolyK = {};
/*
Is Polygon self-intersecting?
O(n^2)
*/
PolyK.IsSimple = function(p)
{
var n = p.length>>1;
if(n<4) return true;
var a1 = new PolyK._P(), a2 = new PolyK._P();
var b1 = new PolyK._P(), b2 = new PolyK._P();
var c = new PolyK._P();
for(var i=0; i<n; i++)
{
a1.x = p[2*i ];
a1.y = p[2*i+1];
if(i==n-1) { a2.x = p[0 ]; a2.y = p[1 ]; }
else { a2.x = p[2*i+2]; a2.y = p[2*i+3]; }
for(var j=0; j<n; j++)
{
if(Math.abs(i-j) < 2) continue;
if(j==n-1 && i==0) continue;
if(i==n-1 && j==0) continue;
b1.x = p[2*j ];
b1.y = p[2*j+1];
if(j==n-1) { b2.x = p[0 ]; b2.y = p[1 ]; }
else { b2.x = p[2*j+2]; b2.y = p[2*j+3]; }
if(PolyK._GetLineIntersection(a1,a2,b1,b2,c) != null) return false;
}
}
return true;
}
PolyK.IsConvex = function(p)
{
if(p.length<6) return true;
var l = p.length - 4;
for(var i=0; i<l; i+=2)
if(!PolyK._convex(p[i], p[i+1], p[i+2], p[i+3], p[i+4], p[i+5])) return false;
if(!PolyK._convex(p[l ], p[l+1], p[l+2], p[l+3], p[0], p[1])) return false;
if(!PolyK._convex(p[l+2], p[l+3], p[0 ], p[1 ], p[2], p[3])) return false;
return true;
}
PolyK.GetArea = function(p)
{
if(p.length <6) return 0;
var l = p.length - 2;
var sum = 0;
for(var i=0; i<l; i+=2)
sum += (p[i+2]-p[i]) * (p[i+1]+p[i+3]);
sum += (p[0]-p[l]) * (p[l+1]+p[1]);
return - sum * 0.5;
}
PolyK.GetAABB = function(p)
{
var minx = Infinity;
var miny = Infinity;
var maxx = -minx;
var maxy = -miny;
for(var i=0; i<p.length; i+=2)
{
minx = Math.min(minx, p[i ]);
maxx = Math.max(maxx, p[i ]);
miny = Math.min(miny, p[i+1]);
maxy = Math.max(maxy, p[i+1]);
}
return {x:minx, y:miny, width:maxx-minx, height:maxy-miny};
}
PolyK.Triangulate = function(p)
{
var n = p.length>>1;
if(n<3) return [];
var tgs = [];
var avl = [];
for(var i=0; i<n; i++) avl.push(i);
var i = 0;
var al = n;
while(al > 3)
{
var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al];
var ax = p[2*i0], ay = p[2*i0+1];
var bx = p[2*i1], by = p[2*i1+1];
var cx = p[2*i2], cy = p[2*i2+1];
var earFound = false;
if(PolyK._convex(ax, ay, bx, by, cx, cy))
{
earFound = true;
for(var j=0; j<al; j++)
{
var vi = avl[j];
if(vi==i0 || vi==i1 || vi==i2) continue;
if(PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
}
}
if(earFound)
{
tgs.push(i0, i1, i2);
avl.splice((i+1)%al, 1);
al--;
i= 0;
}
else if(i++ > 3*al) break; // no convex angles :(
}
tgs.push(avl[0], avl[1], avl[2]);
return tgs;
}
PolyK.ContainsPoint = function(p, px, py)
{
var n = p.length>>1;
var ax, ay, bx = p[2*n-2]-px, by = p[2*n-1]-py;
var depth = 0;
for(var i=0; i<n; i++)
{
ax = bx; ay = by;
bx = p[2*i ] - px;
by = p[2*i+1] - py;
if(ay< 0 && by< 0) continue; // both "up" or both "donw"
if(ay>=0 && by>=0) continue; // both "up" or both "donw"
if(ax< 0 && bx< 0) continue;
var lx = ax + (bx-ax)*(-ay)/(by-ay);
if(lx>0) depth++;
}
return (depth & 1) == 1;
}
PolyK.Slice = function(p, ax, ay, bx, by)
{
if(PolyK.ContainsPoint(p, ax, ay) || PolyK.ContainsPoint(p, bx, by)) return [p.slice(0)];
var a = new PolyK._P(ax, ay);
var b = new PolyK._P(bx, by);
var iscs = []; // intersections
var ps = []; // points
for(var i=0; i<p.length; i+=2) ps.push(new PolyK._P(p[i], p[i+1]));
for(var i=0; i<ps.length; i++)
{
var isc = new PolyK._P(0,0);
isc = PolyK._GetLineIntersection(a, b, ps[i], ps[(i+1)%ps.length], isc);
if(isc)
{
isc.flag = true;
iscs.push(isc);
ps.splice(i+1,0,isc);
i++;
}
}
if(iscs.length == 0) return [p.slice(0)];
var comp = function(u,v) {return PolyK._P.dist(a,u) - PolyK._P.dist(a,v); }
iscs.sort(comp);
var pgs = [];
var dir = 0;
while(iscs.length > 0)
{
var n = ps.length;
var i0 = iscs[0];
var i1 = iscs[1];
var ind0 = ps.indexOf(i0);
var ind1 = ps.indexOf(i1);
var solved = false;
if(PolyK._firstWithFlag(ps, ind0) == ind1) solved = true;
else
{
i0 = iscs[1];
i1 = iscs[0];
ind0 = ps.indexOf(i0);
ind1 = ps.indexOf(i1);
if(PolyK._firstWithFlag(ps, ind0) == ind1) solved = true;
}
if(solved)
{
dir--;
var pgn = PolyK._getPoints(ps, ind0, ind1);
pgs.push(pgn);
ps = PolyK._getPoints(ps, ind1, ind0);
i0.flag = i1.flag = false;
iscs.splice(0,2);
if(iscs.length == 0) pgs.push(ps);
}
else { dir++; iscs.reverse(); }
if(dir>1) break;
}
var result = [];
for(var i=0; i<pgs.length; i++)
{
var pg = pgs[i];
var npg = [];
for(var j=0; j<pg.length; j++) npg.push(pg[j].x, pg[j].y);
result.push(npg);
}
return result;
}
PolyK.Raycast = function(p, x, y, dx, dy, isc)
{
var l = p.length - 2;
var tp = PolyK._tp;
var a1 = tp[0], a2 = tp[1],
b1 = tp[2], b2 = tp[3], c = tp[4];
a1.x = x; a1.y = y;
a2.x = x+dx; a2.y = y+dy;
if(isc==null) isc = {dist:0, edge:0, norm:{x:0, y:0}, refl:{x:0, y:0}};
isc.dist = Infinity;
for(var i=0; i<l; i+=2)
{
b1.x = p[i ]; b1.y = p[i+1];
b2.x = p[i+2]; b2.y = p[i+3];
var nisc = PolyK._RayLineIntersection(a1, a2, b1, b2, c);
if(nisc) PolyK._updateISC(dx, dy, a1, b1, b2, c, i/2, isc);
}
b1.x = b2.x; b1.y = b2.y;
b2.x = p[0]; b2.y = p[1];
var nisc = PolyK._RayLineIntersection(a1, a2, b1, b2, c);
if(nisc) PolyK._updateISC(dx, dy, a1, b1, b2, c, p.length/2, isc);
return (isc.dist != Infinity) ? isc : null;
}
PolyK.ClosestEdge = function(p, x, y, isc)
{
var l = p.length - 2;
var tp = PolyK._tp;
var a1 = tp[0],
b1 = tp[2], b2 = tp[3], c = tp[4];
a1.x = x; a1.y = y;
if(isc==null) isc = {dist:0, edge:0, point:{x:0, y:0}, norm:{x:0, y:0}};
isc.dist = Infinity;
for(var i=0; i<l; i+=2)
{
b1.x = p[i ]; b1.y = p[i+1];
b2.x = p[i+2]; b2.y = p[i+3];
PolyK._pointLineDist(a1, b1, b2, i>>1, isc);
}
b1.x = b2.x; b1.y = b2.y;
b2.x = p[0]; b2.y = p[1];
PolyK._pointLineDist(a1, b1, b2, l>>1, isc);
var idst = 1/isc.dist;
isc.norm.x = (x-isc.point.x)*idst;
isc.norm.y = (y-isc.point.y)*idst;
return isc;
}
PolyK._pointLineDist = function(p, a, b, edge, isc)
{
var x = p.x, y = p.y, x1 = a.x, y1 = a.y, x2 = b.x, y2 = b.y;
var A = x - x1;
var B = y - y1;
var C = x2 - x1;
var D = y2 - y1;
var dot = A * C + B * D;
var len_sq = C * C + D * D;
var param = dot / len_sq;
var xx, yy;
if (param < 0 || (x1 == x2 && y1 == y2)) {
xx = x1;
yy = y1;
}
else if (param > 1) {
xx = x2;
yy = y2;
}
else {
xx = x1 + param * C;
yy = y1 + param * D;
}
var dx = x - xx;
var dy = y - yy;
var dst = Math.sqrt(dx * dx + dy * dy);
if(dst<isc.dist)
{
isc.dist = dst;
isc.edge = edge;
isc.point.x = xx;
isc.point.y = yy;
}
}
PolyK._updateISC = function(dx, dy, a1, b1, b2, c, edge, isc)
{
var nrl = PolyK._P.dist(a1, c);
if(nrl<isc.dist)
{
var ibl = 1/PolyK._P.dist(b1, b2);
var nx = -(b2.y-b1.y)*ibl;
var ny = (b2.x-b1.x)*ibl;
var ddot = 2*(dx*nx+dy*ny);
isc.dist = nrl;
isc.norm.x = nx;
isc.norm.y = ny;
isc.refl.x = -ddot*nx+dx;
isc.refl.y = -ddot*ny+dy;
isc.edge = edge;
}
}
PolyK._getPoints = function(ps, ind0, ind1)
{
var n = ps.length;
var nps = [];
if(ind1<ind0) ind1 += n;
for(var i=ind0; i<= ind1; i++) nps.push(ps[i%n]);
return nps;
}
PolyK._firstWithFlag = function(ps, ind)
{
var n = ps.length;
while(true)
{
ind = (ind+1)%n;
if(ps[ind].flag) return ind;
}
}
PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
{
var v0x = cx-ax;
var v0y = cy-ay;
var v1x = bx-ax;
var v1y = by-ay;
var v2x = px-ax;
var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
// Check if point is in triangle
return (u >= 0) && (v >= 0) && (u + v < 1);
}
PolyK._RayLineIntersection = function(a1, a2, b1, b2, c)
{
var dax = (a1.x-a2.x), dbx = (b1.x-b2.x);
var day = (a1.y-a2.y), dby = (b1.y-b2.y);
var Den = dax*dby - day*dbx;
if (Den == 0) return null; // parallel
var A = (a1.x * a2.y - a1.y * a2.x);
var B = (b1.x * b2.y - b1.y * b2.x);
var I = c;
var iDen = 1/Den;
I.x = ( A*dbx - dax*B ) * iDen;
I.y = ( A*dby - day*B ) * iDen;
if(!PolyK._InRect(I, b1, b2)) return null;
if((day>0 && I.y>a1.y) || (day<0 && I.y<a1.y)) return null;
if((dax>0 && I.x>a1.x) || (dax<0 && I.x<a1.x)) return null;
return I;
}
PolyK._GetLineIntersection = function(a1, a2, b1, b2, c)
{
var dax = (a1.x-a2.x), dbx = (b1.x-b2.x);
var day = (a1.y-a2.y), dby = (b1.y-b2.y);
var Den = dax*dby - day*dbx;
if (Den == 0) return null; // parallel
var A = (a1.x * a2.y - a1.y * a2.x);
var B = (b1.x * b2.y - b1.y * b2.x);
var I = c;
I.x = ( A*dbx - dax*B ) / Den;
I.y = ( A*dby - day*B ) / Den;
if(PolyK._InRect(I, a1, a2) && PolyK._InRect(I, b1, b2)) return I;
return null;
}
PolyK._InRect = function(a, b, c)
{
if (b.x == c.x) return (a.y>=Math.min(b.y, c.y) && a.y<=Math.max(b.y, c.y));
if (b.y == c.y) return (a.x>=Math.min(b.x, c.x) && a.x<=Math.max(b.x, c.x));
if(a.x >= Math.min(b.x, c.x) && a.x <= Math.max(b.x, c.x)
&& a.y >= Math.min(b.y, c.y) && a.y <= Math.max(b.y, c.y))
return true;
return false;
}
PolyK._convex = function(ax, ay, bx, by, cx, cy)
{
return (ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0;
}
PolyK._P = function(x,y)
{
this.x = x;
this.y = y;
this.flag = false;
}
PolyK._P.prototype.toString = function()
{
return "Point ["+this.x+", "+this.y+"]";
}
PolyK._P.dist = function(a,b)
{
var dx = b.x-a.x;
var dy = b.y-a.y;
return Math.sqrt(dx*dx + dy*dy);
}
PolyK._tp = [];
for(var i=0; i<10; i++) PolyK._tp.push(new PolyK._P(0,0));

466
src/pixi/utils/pixi.js example 13 - Graphics_files/WebGLGraphics.js
View file

@ -1,466 +0,0 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* A DisplayObjectContainer represents a collection of display objects. It is the base class of all display objects that act as a container for other objects.
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
*/
PIXI.WebGLGraphics = function()
{
}
// constructor
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
PIXI.activatePrimitiveShader();
var gl = PIXI.gl;
// graphicsObject
// a collection of "shapes" (mainly lines right now!)
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastPosition:new PIXI.Point(), lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
if(graphics.dirty)
{
graphics.dirty = false;
if(graphics.clearDirty)
{
graphics.clearDirty = false;
graphics._webGL.lastIndex = 0;
graphics._webGL.points = [];
}
PIXI.WebGLGraphics.updateGraphics(graphics);
}
// This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m);
// set the matrix transform for the
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
//gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.glPoints.length/6);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
// return to default shader...
PIXI.activateDefaultShader();
}
PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
{
if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
}
if(data.lineWidth > 0)
{
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
}
}
else if(data.type == PIXI.Graphics.RECT)
{
PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
}
else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP)
{
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
}
};
//console.log(graphics._webGL.lastIndex - graphics.graphicsData.length )
graphics._webGL.lastIndex = graphics.graphicsData.length;
// convert to points
var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
}
PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
// dead triangle
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
verts.push(x, y, 1, 1, 1, 1);
// start
verts.push(x, y);
verts.push(r, g, b, alpha);
verts.push(x + width, y);
verts.push(r, g, b, alpha);
verts.push(x , y + height);
verts.push(r, g, b, alpha);
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
webGLData.lastPosition.x = x + width;
webGLData.lastPosition.y = y + height;
}
if(graphicsData.lineWidth)
{
graphicsData.points = [x, y,
x + width, y,
x + width, y + height,
x, y + height,
x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ;
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
verts.push(x, y, 1, 1, 1, 1);
for (var i=0; i < totalSegs + 1 ; i++)
{
verts.push(x,y);
verts.push(r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height);
verts.push(r, g, b, alpha);
};
verts.push(x,y);
verts.push(1, 0, 0, 1);
webGLData.lastPosition.x = x;
webGLData.lastPosition.y = y;
}
if(graphicsData.lineWidth)
{
graphicsData.points = [];
for (var i=0; i < totalSegs + 1; i++)
{
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height)
};
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{
// TODO OPTIMISE!
var wrap = true;
var points = graphicsData.points;
if(points.length == 0)return;
// get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
// if the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
{
points.pop();
points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY)
}
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length + 2;
var indexStart = verts.length/6;
// DRAW the Line
var width = graphicsData.lineWidth / 2;
// sort color
var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
// i = 0 //
var point1 = new PIXI.Point( points[0], points[1] );
var point2 = new PIXI.Point( points[2], points[3] );
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
// insert dead triangle as we are using a triangle strip
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
verts.push(points[0] - perp.x , points[1] - perp.y, 1, 1, 1, 1);
// start
verts.push(points[0] - perp.x , points[1] - perp.y);
verts.push(r, g, b, alpha);
verts.push(points[0] + perp.x , points[1] + perp.y);
verts.push(r, g, b, alpha);
for (var i = 1; i < length-1; i++)
{
var point1 = new PIXI.Point( points[(i-1)*2],points[(i-1)*2 + 1] );
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
perp2.x /= dist2;
perp2.y /= dist2;
perp2.x *= width;
perp2.y *= width;
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
var a1 = B.y-A.y;
var b1 = A.x-B.x;
var c1 = B.x*A.y - A.x*B.y;
var a2 = F.y-E.y;
var b2 = E.x-F.x;
var c2 = F.x*E.y - E.x*F.y;
var denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
var p = new PIXI.Point();
p.x = (b1*c2 - b2*c1)/denom;
p.y = (a2*c1 - a1*c2)/denom;
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
if(pdist > 140 * 140)
{
var perp3 = new PIXI.Point(perp.x - perp2.x, perp.y - perp2.y);
var dist3 = Math.sqrt(perp3.x*perp3.x + perp3.y*perp3.y);
perp3.x /= dist3;
perp3.y /= dist3;
perp3.x *= width;
perp3.y *= width;
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(r, g, b, alpha);
verts.push(point2.x + perp3.x, point2.y +perp3.y);
verts.push(r, g, b, alpha);
verts.push(point2.x - perp3.x, point2.y -perp3.y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(p.x , p.y);
verts.push(r, g, b, alpha);
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
verts.push(r, g, b, alpha);
}
}
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
//getPerp(point1, point2);
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
perp.x /= dist;
perp.y /= dist;
perp.x *= width;
perp.y *= width;
verts.push(point2.x - perp.x , point2.y - perp.y)
verts.push(r, g, b, alpha);
// indices.push(indices.length)
verts.push(point2.x + perp.x , point2.y + perp.y)
verts.push(r, g, b, alpha);
// indices.push(indices.length)
for (var i=0; i < indexCount; i++)
{
indices.push(indexStart + i);
};
// set last triangle!
webGLData.lastPosition.x = point2.x + perp.x;
webGLData.lastPosition.y = point2.y + perp.y;
}
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{
var points = graphicsData.points;
if(points.length < 6)return;
// get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
// sort color
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var triangles = PolyK.Triangulate(graphicsData.points);
// DEAD Triangle
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);
indices.push(verts.length/6)
indices.push(verts.length/6)
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
indices.push(triangles[i+1] + vertPos);
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
};
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);
};
}
function HEXtoRGB(hex) {
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
}

320
src/pixi/utils/pixi.js example 13 - Graphics_files/WebGLRenderer.js
View file

@ -1,320 +0,0 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
// an instance of the gl context..
// only one at the moment :/
PIXI.gl;
/**
* the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer should be used for browsers support webGL. This Render works by automatically managing webGLBatchs. So no need for Sprite Batch's or Sprite Cloud's
* Dont forget to add the view to your DOM or you will not see anything :)
* @class WebGLRenderer
* @constructor
* @param width {Number} the width of the canvas view
* @default 0
* @param height {Number} the height of the canvas view
* @default 0
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view, default false
* @default false
*
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
this.width = width || 800;
this.height = height || 600;
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
// deal with losing context..
var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = [];
try
{
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
alpha: this.transparent,
antialias:false, // SPEED UP??
premultipliedAlpha:false
});
}
catch (e)
{
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
}
PIXI.initPrimitiveShader();
PIXI.initDefaultShader();
PIXI.initDefaultStripShader();
PIXI.activateDefaultShader();
var gl = this.gl;
PIXI.WebGLRenderer.gl = gl;
this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300);
this.resize(this.width, this.height);
this.contextLost = false;
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
}
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
/**
* Renders the stage to its webGL view
* @method render
* @param stage {Stage} the PIXI.Stage element to be rendered
*/
PIXI.WebGLRenderer.prototype.render = function(stage)
{
if(this.contextLost)return;
// if rendering a new stage clear the batchs..
if(this.__stage !== stage)
{
// TODO make this work
// dont think this is needed any more?
//if(this.__stage)this.checkVisibility(this.__stage, false)
this.__stage = stage;
this.stageRenderGroup.setRenderable(stage);
}
// TODO not needed now...
// update children if need be
// best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++)
{
var group = stage.__childrenRemoved[i].__renderGroup
if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/
// update any textures
PIXI.WebGLRenderer.updateTextures();
// recursivly loop through all items!
//this.checkVisibility(stage, true);
// update the scene graph
stage.updateTransform();
var gl = this.gl;
// -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
// set the correct matrix..
// gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST
//PIXI.projectionMatrix = this.projectionMatrix;
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(PIXI.projection);
// interaction
// run interaction!
if(stage.interactive)
{
//need to add some events!
if(!stage._interactiveEventsAdded)
{
stage._interactiveEventsAdded = true;
stage.interactionManager.setTarget(this);
}
}
// after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0)
{
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
{
PIXI.Texture.frameUpdates[i].updateFrame = false;
};
PIXI.Texture.frameUpdates = [];
}
}
/**
* @private
*/
PIXI.WebGLRenderer.updateTextures = function()
{
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
}
PIXI.WebGLRenderer.updateTexture = function(texture)
{
var gl = PIXI.gl;
if(!texture._glTexture)
{
texture._glTexture = gl.createTexture();
}
if(texture.hasLoaded)
{
gl.bindTexture(gl.TEXTURE_2D, texture._glTexture);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// reguler...
if(!texture._powerOf2)
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
else
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
gl.bindTexture(gl.TEXTURE_2D, null);
}
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* resizes the webGL view to the specified width and height
* @method resize
* @param width {Number} the new width of the webGL view
* @param height {Number} the new height of the webGL view
*/
PIXI.WebGLRenderer.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
this.view.width = width;
this.view.height = height;
this.gl.viewport(0, 0, this.width, this.height);
//var projectionMatrix = this.projectionMatrix;
PIXI.projection.x = this.width/2;
PIXI.projection.y = this.height/2;
// projectionMatrix[0] = 2/this.width;
// projectionMatrix[5] = -2/this.height;
// projectionMatrix[12] = -1;
// projectionMatrix[13] = 1;
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
{
event.preventDefault();
this.contextLost = true;
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{
this.gl = this.view.getContext("experimental-webgl", {
alpha: true
});
this.initShaders();
for (var i=0; i < PIXI.TextureCache.length; i++)
{
this.updateTexture(PIXI.TextureCache[i]);
};
for (var i=0; i < this.batchs.length; i++)
{
this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].dirty = true;
};
PIXI._restoreBatchs(this.gl);
this.contextLost = false;
}

206
src/pixi/utils/pixi.js example 13 - Graphics_files/WebGLShaders.js
View file

@ -1,206 +0,0 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/*
* the default suoer fast shader!
*/
PIXI.shaderFragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
PIXI.shaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
//"uniform mat4 uMVMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"void main(void) {",
// "gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
"gl_Position = vec4( aVertexPosition.x / projectionVector.x -1.0, aVertexPosition.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
"}"
];
/*
* the triangle strip shader..
*/
PIXI.stripShaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
"}"
];
/*
* primitive shader..
*/
PIXI.primitiveShaderFragmentSrc = [
"precision mediump float;",
"varying vec4 vColor;",
"void main(void) {",
"gl_FragColor = vColor;",
"}"
];
PIXI.primitiveShaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec4 aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"varying vec4 vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vColor = aColor;",
"}"
];
PIXI.initPrimitiveShader = function()
{
var gl = PIXI.gl;
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
PIXI.primitiveProgram = shaderProgram;
}
PIXI.initDefaultShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.shaderProgram = shaderProgram;
}
PIXI.initDefaultStripShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram;
}
PIXI.CompileVertexShader = function(gl, shaderSrc)
{
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
}
PIXI.CompileFragmentShader = function(gl, shaderSrc)
{
return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
}
PIXI._CompileShader = function(gl, shaderSrc, shaderType)
{
var src = shaderSrc.join("\n");
var shader = gl.createShader(shaderType);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
PIXI.activateDefaultShader = function()
{
var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
}
PIXI.compileProgram = function(vertexSrc, fragmentSrc)
{
var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
return shaderProgram;
}
PIXI.activatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
gl.useProgram(PIXI.primitiveProgram);
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
}

8395
src/pixi/utils/pixi.js example 13 - Graphics_files/pixi.js
View file

File diff suppressed because it is too large Load diff