Graphics Updated

examples/example 13 - Graphics/index.html

@@ -24,7 +24,9 @@
 	
 
 	// create an new instance of a pixi stage
-	var stage = new PIXI.Stage(0x000000);
+	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);
@@ -96,11 +98,20 @@
 	stage.addChild(sprite);
 	stage.addChild(graphics);
 	
+	stage.click = function()
+	{
+		graphics.clear();	
+	}
+	
 	requestAnimFrame(animate);
 
 	function animate() {
 	    renderer.render(stage);
 	    requestAnimFrame( animate );
+	    graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 0.8);
+	    
+	    graphics.moveTo(Math.random() * 600,Math.random() * 600);
+		graphics.lineTo(Math.random() * 600,Math.random() * 600);
 	}
 
 	</script>

src/pixi/primitives/Graphics.js

@@ -62,6 +62,7 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
 PIXI.Graphics.prototype.lineTo = function(x, y)
 {
 	this.currentPath.points.push(x, y);
+	this.dirty = true;
 }
 
 PIXI.Graphics.prototype.beginFill = function(color, alpha)
@@ -91,6 +92,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
 						points:[x, y, width, height], type:PIXI.Graphics.RECT};
 						
 	this.graphicsData.push(this.currentPath);
+	this.dirty = true;
 }
 
 PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
@@ -100,4 +102,12 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
 						points:[x, y, radius], type:PIXI.Graphics.CIRC};
 						
 	this.graphicsData.push(this.currentPath);
+	this.dirty = true;
+}
+
+PIXI.Graphics.prototype.clear = function()
+{
+	this.dirty = true;
+	this.clearDirty = true;
+	this.graphicsData = [];
 }

src/pixi/renderers/CanvasGraphics.js

@@ -24,8 +24,8 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
 		var data = graphics.graphicsData[i];
 		var points = data.points;
 		
-		context.strokeStyle = "#" + data.lineColor.toString(16);
+		context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
-      	
+
 		context.lineWidth = data.lineWidth;
 		context.globalAlpha = data.lineAlpha;
 		
@@ -55,7 +55,8 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
 			// TODO - need to be Undefined!
 			if(data.fillColor)
 			{
-				context.fillStyle = "#" + data.fillColor.toString(16);
+				context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
+
 				context.fillRect(points[0], points[1], points[2], points[3]);
 				
 			}
@@ -73,7 +74,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
 			
 			if(data.fill)
 			{
-				context.fillStyle = "#" + data.fillColor.toString(16);
+				context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
       			context.fill();
 			}
 			if(data.lineWidth)

src/pixi/renderers/WebGLGraphics.js

@@ -25,7 +25,22 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
 	// graphicsObject
 	// a collection of "shapes" (mainly lines right now!)
 	///this.shape.draw();
-	if(!graphics._webGL)PIXI.WebGLGraphics.initGraphics(graphics);
+	if(!graphics._webGL)graphics._webGL = {points:[], lastPosition:new PIXI.Point(), lastIndex:0, buffer:gl.createBuffer()};
+	
+	if(graphics.dirty)
+	{
+		graphics.dirty = false;
+		
+		if(graphics.clearDirty)
+		{
+			graphics.clearDirty = false;
+			graphics._webGL.lastIndex = 0;
+			graphics._webGL.points = [];
+			
+		}
+		
+		PIXI.WebGLGraphics.initGraphics(graphics);
+	}
 	
 	gl.uniformMatrix4fv(PIXI.shaderProgram2.mvMatrixUniform, false, PIXI.projectionMatrix );
 	
@@ -36,16 +51,14 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
 	//shaderProgram.colorAttribute
 	
 //	ulong idx, long size, ulong type, bool norm, long stride, ulong offset )
-	gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.points.length/6);
+	gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.glPoints.length/6);
 	
 	PIXI.activateDefaultShader();
 }
 
 PIXI.WebGLGraphics.initGraphics = function(graphics)
 {
-	graphics._webGL = {points:[], lastPosition:new PIXI.Point()};
+	for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) 
-	
-	for (var i=0; i < graphics.graphicsData.length; i++) 
 	{
 		var data = graphics.graphicsData[i];
 		
@@ -66,15 +79,15 @@ PIXI.WebGLGraphics.initGraphics = function(graphics)
 		}
 	};
 	
+	//console.log(graphics._webGL.lastIndex - graphics.graphicsData.length )
+	graphics._webGL.lastIndex = graphics.graphicsData.length;
+	
 	// convert to points
-	graphics._webGL.points = new Float32Array(graphics._webGL.points);
+	graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
 	
 	var gl = PIXI.gl;
-	
-	graphics._webGL.buffer = gl.createBuffer();
-	
 	gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
-	gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.points, gl.STATIC_DRAW);
+	gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
 }
 
 

src/pixi/renderers/WebGLRenderGroup.js

@@ -190,7 +190,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
 		{
 			if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
 		}
-		
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 		return;
 	}
 	
@@ -215,7 +218,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
 	{
 		if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
 	}
-	
+	else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	// DO the middle batchs..
 	for (var i=startBatchIndex+1; i < endBatchIndex; i++) 
 	{
@@ -237,7 +243,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
 		{
 			if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
 		}
-		
+		else if(renderable instanceof PIXI.Graphics)
+		{
+			if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+		}
 	}
 	
 	// DO the last batch..
@@ -257,6 +266,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
 	{
 		if(endBatch.visible) endBatch.renderWebGL(this, projectionMatrix);
 	}
+	else if(renderable instanceof PIXI.Graphics)
+	{
+		if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
+	}
 }
 
 PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)