
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
439 lines
15 KiB
HTML
439 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<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.9.1/build/cssgrids/cssgrids-min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
|
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
|
|
</head>
|
|
<body class="yui3-skin-sam">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: 1.4.3</em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
|
|
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
|
|
|
|
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
|
|
|
|
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
|
|
|
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
|
|
|
|
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
|
|
|
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
|
|
|
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
|
|
|
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
|
|
|
|
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/Circle.html">Circle</a></li>
|
|
|
|
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
|
|
|
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
|
|
|
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
|
|
|
|
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
|
|
|
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
|
|
|
|
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
|
|
|
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
|
|
|
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiFastShader.html">PIXI.PixiFastShader</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
|
|
|
|
<li><a href="../classes/Point.html">Point</a></li>
|
|
|
|
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
|
|
|
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
|
|
|
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
|
|
|
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
|
|
|
|
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
|
|
|
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
|
|
|
|
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
|
|
|
|
<li><a href="../classes/Spine.html">Spine</a></li>
|
|
|
|
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
|
|
|
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
|
|
|
<li><a href="../classes/Stage.html">Stage</a></li>
|
|
|
|
<li><a href="../classes/Text.html">Text</a></li>
|
|
|
|
<li><a href="../classes/Texture.html">Texture</a></li>
|
|
|
|
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
|
|
|
<li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
|
|
|
|
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1 class="file-heading">File: src/pixi/renderers/canvas/CanvasGraphics.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/**
|
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
*/
|
|
|
|
|
|
/**
|
|
* A set of functions used by the canvas renderer to draw the primitive graphics data
|
|
*
|
|
* @class CanvasGraphics
|
|
*/
|
|
PIXI.CanvasGraphics = function()
|
|
{
|
|
|
|
};
|
|
|
|
|
|
/*
|
|
* Renders the graphics object
|
|
*
|
|
* @static
|
|
* @private
|
|
* @method renderGraphics
|
|
* @param graphics {Graphics}
|
|
* @param context {Context2D}
|
|
*/
|
|
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|
{
|
|
var worldAlpha = graphics.worldAlpha;
|
|
var color = '';
|
|
|
|
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)
|
|
{
|
|
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();
|
|
}
|
|
|
|
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.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();
|
|
|
|
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
|
|
|
|
var ellipseData = data.points;
|
|
|
|
var w = ellipseData[2] * 2;
|
|
var h = ellipseData[3] * 2;
|
|
|
|
var x = ellipseData[0] - w/2;
|
|
var y = ellipseData[1] - h/2;
|
|
|
|
context.beginPath();
|
|
|
|
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();
|
|
|
|
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
|
|
*
|
|
* @static
|
|
* @private
|
|
* @method renderGraphicsMask
|
|
* @param graphics {Graphics}
|
|
* @param context {Context2D}
|
|
*/
|
|
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
|
|
{
|
|
var len = graphics.graphicsData.length;
|
|
|
|
if(len === 0) return;
|
|
|
|
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');
|
|
}
|
|
|
|
for (var i = 0; i < 1; i++)
|
|
{
|
|
var data = graphics.graphicsData[i];
|
|
var points = data.points;
|
|
|
|
if(data.type === PIXI.Graphics.POLY)
|
|
{
|
|
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();
|
|
}
|
|
|
|
}
|
|
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)
|
|
{
|
|
|
|
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
|
var ellipseData = data.points;
|
|
|
|
var w = ellipseData[2] * 2;
|
|
var h = ellipseData[3] * 2;
|
|
|
|
var x = ellipseData[0] - w/2;
|
|
var y = ellipseData[1] - h/2;
|
|
|
|
context.beginPath();
|
|
|
|
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>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</script>
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
|
<script src="../assets/../api.js"></script>
|
|
<script src="../assets/js/api-filter.js"></script>
|
|
<script src="../assets/js/api-list.js"></script>
|
|
<script src="../assets/js/api-search.js"></script>
|
|
<script src="../assets/js/apidocs.js"></script>
|
|
</body>
|
|
</html>
|