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

Docs updated Builds updated

Browse source
This commit is contained in:
Mat Groves 2013-07-02 10:48:05 +01:00
parent b1b2e417a3
commit 69b3be322e
93 changed files with 6214 additions and 1190 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -53,12 +53,16 @@
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/Circle.html">Circle</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/Ellipse.html">Ellipse</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
@ -179,7 +183,6 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.type == PIXI.Graphics.POLY)
{
&#x2F;&#x2F;if(data.lineWidth &lt;= 0)continue;
context.beginPath();
@ -211,12 +214,13 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
}
else if(data.type == PIXI.Graphics.RECT)
{
&#x2F;&#x2F; TODO - need to be Undefined!
if(data.fillColor)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
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]);
context.rect(points[0], points[1], points[2], points[3]);
}
if(data.lineWidth)
@ -224,6 +228,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]);
}
}
else if(data.type == PIXI.Graphics.CIRC)
{
@ -288,6 +293,94 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
}
}
};
}
&#x2F;*
* @private
* @static
* @method renderGraphicsMask
* @param graphics {Graphics}
* @param context {Context2D}
*&#x2F;
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
{
var worldAlpha = graphics.worldAlpha;
var len = graphics.graphicsData.length;
if(len &gt; 1)
{
len = 1;
console.log(&quot;Pixi.js warning: masks in canvas can only mask using the first path in the graphics object&quot;)
}
for (var i=0; i &lt; 1; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
if(data.type == PIXI.Graphics.POLY)
{
&#x2F;&#x2F;if(data.lineWidth &lt;= 0)continue;
context.beginPath();
context.moveTo(points[0], points[1]);
for (var j=1; j &lt; points.length&#x2F;2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
&#x2F;&#x2F; if the first and last point are the same close the path - much neater :)
if(points[0] == points[points.length-2] &amp;&amp; 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)
{
&#x2F;&#x2F; 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)
{
&#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();
}
};
}