Docs updated
This commit is contained in:
Mat Groves
parent
a46b74f8ca
commit
6c762fb396
119 changed files with 38715 additions and 9039 deletions
|
|
@ -2,12 +2,12 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>src/pixi/renderers/canvas/CanvasGraphics.js - Pixi.JS</title>
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0/build/cssgrids/cssgrids-min.css">
|
||||
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
||||
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
||||
<script src="http://yui.yahooapis.com/combo?3.8.0/build/yui/yui-min.js"></script>
|
||||
<title>src/pixi/renderers/canvas/CanvasGraphics.js - Pixi.JS</title>
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
|
||||
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
||||
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
||||
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
|
||||
</head>
|
||||
<body class="yui3-skin-sam">
|
||||
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<div id="hd" class="yui3-g header">
|
||||
<div class="yui3-u-3-4">
|
||||
|
||||
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
|
||||
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
|
||||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
|
|
@ -41,71 +41,95 @@
|
|||
<div id="api-tabview-panel">
|
||||
<ul id="api-classes" class="apis classes">
|
||||
|
||||
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
||||
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
|
||||
|
||||
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
||||
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
||||
|
||||
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
||||
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
||||
|
||||
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
||||
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
||||
|
||||
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
||||
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
||||
|
||||
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
||||
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
|
||||
|
||||
<li><a href="../classes/Circle.html">Circle</a></li>
|
||||
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
||||
|
||||
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
|
||||
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
||||
|
||||
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
||||
<li><a href="../classes/Circle.html">Circle</a></li>
|
||||
|
||||
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
||||
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
||||
|
||||
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
||||
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
|
||||
|
||||
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
||||
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
||||
|
||||
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
||||
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
||||
|
||||
<li><a href="../classes/InteractionData.html">InteractionData</a></li>
|
||||
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
||||
|
||||
<li><a href="../classes/InteractionManager.html">InteractionManager</a></li>
|
||||
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
||||
|
||||
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
||||
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
|
||||
|
||||
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
||||
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
||||
|
||||
<li><a href="../classes/Point.html">Point</a></li>
|
||||
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
|
||||
|
||||
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
||||
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
||||
|
||||
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
||||
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
||||
|
||||
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
|
||||
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
||||
|
||||
<li><a href="../classes/Spine.html">Spine</a></li>
|
||||
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
||||
|
||||
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
||||
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
||||
|
||||
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
||||
<li><a href="../classes/Point.html">Point</a></li>
|
||||
|
||||
<li><a href="../classes/Stage.html">Stage</a></li>
|
||||
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
||||
|
||||
<li><a href="../classes/Text.html">Text</a></li>
|
||||
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
||||
|
||||
<li><a href="../classes/Texture.html">Texture</a></li>
|
||||
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
||||
|
||||
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
||||
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
||||
|
||||
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
|
||||
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
|
||||
|
||||
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
||||
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
|
||||
|
||||
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
||||
|
||||
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
|
||||
|
||||
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
|
||||
|
||||
<li><a href="../classes/Spine.html">Spine</a></li>
|
||||
|
||||
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
||||
|
||||
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
||||
|
||||
<li><a href="../classes/Stage.html">Stage</a></li>
|
||||
|
||||
<li><a href="../classes/Text.html">Text</a></li>
|
||||
|
||||
<li><a href="../classes/Texture.html">Texture</a></li>
|
||||
|
||||
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
||||
|
||||
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
|
||||
|
||||
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul id="api-modules" class="apis modules">
|
||||
|
||||
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
||||
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -142,64 +166,65 @@
|
|||
<div class="apidocs">
|
||||
<div id="docs-main">
|
||||
<div class="content">
|
||||
<h1 class="file-heading">File: src/pixi/renderers/canvas/CanvasGraphics.js</h1>
|
||||
<h1 class="file-heading">File: src/pixi/renderers/canvas/CanvasGraphics.js</h1>
|
||||
|
||||
<div class="file">
|
||||
<pre class="code prettyprint linenums">
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* A set of functions used by the canvas renderer to draw the primitive graphics data
|
||||
* @class CanvasGraphics
|
||||
*/
|
||||
*
|
||||
* @class CanvasGraphics
|
||||
*/
|
||||
PIXI.CanvasGraphics = function()
|
||||
{
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* @private
|
||||
/*
|
||||
* Renders the graphics object
|
||||
*
|
||||
* @static
|
||||
* @private
|
||||
* @method renderGraphics
|
||||
* @param graphics {Graphics}
|
||||
* @param context {Context2D}
|
||||
*/
|
||||
*/
|
||||
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
||||
{
|
||||
var worldAlpha = graphics.worldAlpha;
|
||||
|
||||
for (var i=0; i < graphics.graphicsData.length; i++)
|
||||
|
||||
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;
|
||||
|
||||
|
||||
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++)
|
||||
|
||||
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 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;
|
||||
|
|
@ -214,29 +239,28 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
}
|
||||
else if(data.type == PIXI.Graphics.RECT)
|
||||
{
|
||||
|
||||
// TODO - need to be Undefined!
|
||||
if(data.fillColor)
|
||||
|
||||
if(data.fillColor || data.fillColor === 0)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.rect(points[0], points[1], points[2], points[3]);
|
||||
|
||||
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]);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.CIRC)
|
||||
{
|
||||
// TODO - need to be Undefined!
|
||||
// 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;
|
||||
|
|
@ -251,35 +275,35 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
}
|
||||
else if(data.type == PIXI.Graphics.ELIP)
|
||||
{
|
||||
|
||||
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
|
||||
|
||||
// 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;
|
||||
|
||||
|
||||
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
|
||||
|
||||
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.globalAlpha = data.fillAlpha * worldAlpha;
|
||||
|
|
@ -292,51 +316,51 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* @private
|
||||
/*
|
||||
* Renders a graphics mask
|
||||
*
|
||||
* @static
|
||||
* @private
|
||||
* @method renderGraphicsMask
|
||||
* @param graphics {Graphics}
|
||||
* @param context {Context2D}
|
||||
*/
|
||||
*/
|
||||
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
||||
{
|
||||
var worldAlpha = graphics.worldAlpha;
|
||||
|
||||
|
||||
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")
|
||||
}
|
||||
|
||||
for (var i=0; i < 1; i++)
|
||||
|
||||
for (var i=0; i < 1; i++)
|
||||
{
|
||||
var data = graphics.graphicsData[i];
|
||||
var points = data.points;
|
||||
|
||||
|
||||
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++)
|
||||
|
||||
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 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();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.RECT)
|
||||
{
|
||||
|
|
@ -346,33 +370,33 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
|||
}
|
||||
else if(data.type == PIXI.Graphics.CIRC)
|
||||
{
|
||||
// TODO - need to be Undefined!
|
||||
// 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)
|
||||
{
|
||||
|
||||
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
|
||||
// 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;
|
||||
|
||||
|
||||
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
|
||||
|
||||
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);
|
||||
|
|
@ -380,8 +404,8 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
|||
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||
context.closePath();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -394,13 +418,13 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
||||
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
||||
<script>prettyPrint();</script>
|
||||
<script src="../assets/js/yui-prettify.js"></script>
|
||||
<script src="../assets/../api.js"></script>
|
||||
<script src="../assets/js/api-filter.js"></script>
|
||||
<script src="../assets/js/api-list.js"></script>
|
||||
<script src="../assets/js/api-search.js"></script>
|
||||
<script src="../assets/js/apidocs.js"></script>
|
||||
<script src="../assets/js/yui-prettify.js"></script>
|
||||
<script src="../assets/../api.js"></script>
|
||||
<script src="../assets/js/api-filter.js"></script>
|
||||
<script src="../assets/js/api-list.js"></script>
|
||||
<script src="../assets/js/api-search.js"></script>
|
||||
<script src="../assets/js/apidocs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue