Fixed graphics bug + updated docs
Fixed issue with getBounds being incorrect for graphics Updated docs Linted code
This commit is contained in:
Mat Groves
parent
53506da65e
commit
7713731ab3
145 changed files with 15583 additions and 24078 deletions
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
<em>API Docs for: 1.4.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -45,6 +45,8 @@
|
|||
|
||||
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
||||
|
||||
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
|
||||
|
||||
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
||||
|
||||
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
||||
|
|
@ -61,7 +63,7 @@
|
|||
|
||||
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
||||
|
||||
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
|
||||
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
|
||||
|
||||
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
||||
|
||||
|
|
@ -75,7 +77,7 @@
|
|||
|
||||
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
||||
|
||||
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
|
||||
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
|
||||
|
||||
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
||||
|
||||
|
|
@ -87,6 +89,8 @@
|
|||
|
||||
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
||||
|
||||
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
|
||||
|
||||
<li><a href="../classes/Point.html">Point</a></li>
|
||||
|
||||
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
||||
|
|
@ -109,10 +113,10 @@
|
|||
|
||||
<li><a href="../classes/Spine.html">Spine</a></li>
|
||||
|
||||
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
||||
|
||||
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
||||
|
||||
<li><a href="../classes/Sprite™.html">Sprite™</a></li>
|
||||
|
||||
<li><a href="../classes/Stage.html">Stage</a></li>
|
||||
|
||||
<li><a href="../classes/Text.html">Text</a></li>
|
||||
|
|
@ -121,8 +125,6 @@
|
|||
|
||||
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
||||
|
||||
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
|
||||
|
||||
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
@ -183,7 +185,7 @@
|
|||
PIXI.CanvasGraphics = function()
|
||||
{
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
|
|
@ -197,128 +199,128 @@ PIXI.CanvasGraphics = function()
|
|||
*/
|
||||
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
||||
{
|
||||
var worldAlpha = graphics.worldAlpha;
|
||||
var worldAlpha = graphics.worldAlpha;
|
||||
var color = '';
|
||||
|
||||
for (var i=0; i < graphics.graphicsData.length; i++)
|
||||
{
|
||||
var data = graphics.graphicsData[i];
|
||||
var points = data.points;
|
||||
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.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
|
||||
|
||||
context.lineWidth = data.lineWidth;
|
||||
context.lineWidth = data.lineWidth;
|
||||
|
||||
if(data.type == PIXI.Graphics.POLY)
|
||||
{
|
||||
context.beginPath();
|
||||
if(data.type === PIXI.Graphics.POLY)
|
||||
{
|
||||
context.beginPath();
|
||||
|
||||
context.moveTo(points[0], points[1]);
|
||||
context.moveTo(points[0], points[1]);
|
||||
|
||||
for (var j=1; j < points.length/2; j++)
|
||||
{
|
||||
context.lineTo(points[j * 2], points[j * 2 + 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();
|
||||
}
|
||||
// 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();
|
||||
}
|
||||
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.RECT)
|
||||
{
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type === PIXI.Graphics.RECT)
|
||||
{
|
||||
|
||||
if(data.fillColor || data.fillColor === 0)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fillRect(points[0], points[1], points[2], points[3]);
|
||||
if(data.fillColor || data.fillColor === 0)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
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.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.strokeRect(points[0], points[1], points[2], points[3]);
|
||||
}
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
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();
|
||||
}
|
||||
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.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.ELIP)
|
||||
{
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type === PIXI.Graphics.ELIP)
|
||||
{
|
||||
|
||||
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
|
||||
var ellipseData = data.points;
|
||||
var ellipseData = data.points;
|
||||
|
||||
var w = ellipseData[2] * 2;
|
||||
var h = ellipseData[3] * 2;
|
||||
var w = ellipseData[2] * 2;
|
||||
var h = ellipseData[3] * 2;
|
||||
|
||||
var x = ellipseData[0] - w/2;
|
||||
var y = ellipseData[1] - h/2;
|
||||
var x = ellipseData[0] - w/2;
|
||||
var y = ellipseData[1] - h/2;
|
||||
|
||||
context.beginPath();
|
||||
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
|
||||
var kappa = 0.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.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();
|
||||
context.closePath();
|
||||
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha * worldAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Renders a graphics mask
|
||||
|
|
@ -331,83 +333,82 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
*/
|
||||
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
||||
{
|
||||
var worldAlpha = graphics.worldAlpha;
|
||||
var len = graphics.graphicsData.length;
|
||||
|
||||
var len = graphics.graphicsData.length;
|
||||
if(len > 1)
|
||||
{
|
||||
len = 1;
|
||||
console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object")
|
||||
}
|
||||
if(len === 0) return;
|
||||
|
||||
for (var i=0; i < 1; i++)
|
||||
{
|
||||
var data = graphics.graphicsData[i];
|
||||
var points = data.points;
|
||||
if(len > 1)
|
||||
{
|
||||
len = 1;
|
||||
window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object');
|
||||
}
|
||||
|
||||
if(data.type == PIXI.Graphics.POLY)
|
||||
{
|
||||
context.beginPath();
|
||||
context.moveTo(points[0], points[1]);
|
||||
for (var i = 0; i < 1; i++)
|
||||
{
|
||||
var data = graphics.graphicsData[i];
|
||||
var points = data.points;
|
||||
|
||||
for (var j=1; j < points.length/2; j++)
|
||||
{
|
||||
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
||||
}
|
||||
if(data.type === PIXI.Graphics.POLY)
|
||||
{
|
||||
context.beginPath();
|
||||
context.moveTo(points[0], points[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();
|
||||
}
|
||||
for (var j=1; j < points.length/2; j++)
|
||||
{
|
||||
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
||||
}
|
||||
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.RECT)
|
||||
{
|
||||
context.beginPath();
|
||||
context.rect(points[0], points[1], points[2], points[3]);
|
||||
context.closePath();
|
||||
}
|
||||
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();
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.ELIP)
|
||||
{
|
||||
// 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();
|
||||
}
|
||||
|
||||
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
var ellipseData = data.points;
|
||||
}
|
||||
else if(data.type === PIXI.Graphics.RECT)
|
||||
{
|
||||
context.beginPath();
|
||||
context.rect(points[0], points[1], points[2], points[3]);
|
||||
context.closePath();
|
||||
}
|
||||
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();
|
||||
}
|
||||
else if(data.type === PIXI.Graphics.ELIP)
|
||||
{
|
||||
|
||||
var w = ellipseData[2] * 2;
|
||||
var h = ellipseData[3] * 2;
|
||||
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
var ellipseData = data.points;
|
||||
|
||||
var x = ellipseData[0] - w/2;
|
||||
var y = ellipseData[1] - h/2;
|
||||
var w = ellipseData[2] * 2;
|
||||
var h = ellipseData[3] * 2;
|
||||
|
||||
context.beginPath();
|
||||
var x = ellipseData[0] - w/2;
|
||||
var y = ellipseData[1] - h/2;
|
||||
|
||||
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.beginPath();
|
||||
|
||||
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();
|
||||
}
|
||||
var kappa = 0.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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue