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

Graphics shape fill added

Browse source 
shaders optimised - removed need for 4x4 matrix
draw elipse added
any shape can now be filled
This commit is contained in:
Mat Groves 2013-06-21 18:37:14 +01:00
parent 2ad9002a79
commit 72e38cccb0
105 changed files with 20670 additions and 4633 deletions
Download patch file Download diff file Expand all files Collapse all files

59
examples/example 13 - Graphics/index.html
View file

@ -11,13 +11,14 @@
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/renderers/WebGLGraphics.js"></script>
<script src="../../src/pixi/renderers/WebGLShaders.js"></script>
<!--<script src="../../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
<script src="../../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
<script src="../../src/pixi/renderers/CanvasRenderer.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
<script src="../../src/pixi/primitives/Graphics.js"></script>
<script src="../../src/pixi/utils/Polyk.js"></script>-->
</head>
<body>
<script>
@ -45,22 +46,25 @@
var graphics = new PIXI.Graphics();
graphics.beginFill(0xFF0000);
graphics.lineStyle(10, 0x30FF00, 0.5);
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
//graphics.lineTo(100, 100);
graphics.lineTo(100, 100);
graphics.lineTo(250, 220);
graphics.lineTo(50, 220);
graphics.lineTo(150, 50);
graphics.lineTo(50, 50);
graphics.endFill();
graphics.lineStyle(2, 0x30FFFF, 1);
// graphics.beginFill(0xFF794B);
graphics.beginFill(0xFF794B, 0.5);
graphics.drawRect(250, 250, 300, 100);
graphics.drawCircle(350, 350,100);
/*
graphics.endFill();
graphics.lineTo(250, 50);
@ -72,9 +76,10 @@
graphics.lineStyle(30, 0xFF0000, 1);
graphics.moveTo(400,100);
graphics.lineTo(550, 50);
// graphics.lineTo(92, 20);
//graphics.lineTo(450, 223);
//graphics.lineTo(92, 20);
//graphics.lineTo(450, 223);
*/
/*
* point1 = new Point(350, 50);
@ -87,20 +92,29 @@
points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
*/
graphics.lineTo(410,300);
// graphics.beginFill(0xFF700B, 1);
// graphics.drawElipse(450,320, 100, 200);
/* graphics.moveTo(210,300);
graphics.lineTo(450,320);
graphics.lineTo(570,350);
graphics.lineTo(580,120);
graphics.lineTo(630,120);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
graphics.lineTo(580,20);
graphics.lineTo(330,120);
graphics.lineTo(410,300);
*/
//graphics.endFill();
stage.addChild(sprite);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
var container = new PIXI.DisplayObjectContainer();
container.addChild(sprite);
sprite.position.x = 300;
stage.addChild(container);
stage.addChild(graphics);
stage.click = function()
{
graphics.clear();
//graphics.clear();
}
requestAnimFrame(animate);
@ -108,10 +122,15 @@
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);
container.position.x = 100;//stage.interactionManager.mouse.local.x;
container.position.y = 200;//stage.interactionManager.mouse.local.y;
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
// graphics.moveTo(Math.random() * 600,Math.random() * 600);
// graphics.lineTo(Math.random() * 600,Math.random() * 600);
// graphics.scale.x = 3;
// container.rotation += 0.01;
// sprite.rotation -= 0.01;
}
</script>

968
examples/example 13 - Graphics/pixi.js
View file

File diff suppressed because it is too large Load diff