Added 2 filters fix filter bug
Fixed filter bug where filters not wotkring on transparent renderer Added CrossHatchFilter Added RGBSplitFilter Updated Example 15
This commit is contained in:
parent
fdf7dcaf61
commit
4204ada63e
12 changed files with 747 additions and 491 deletions
|
@ -22,6 +22,8 @@
|
|||
|
||||
stage.setInteractive(true);
|
||||
|
||||
var sprite= PIXI.Sprite.fromImage("spinObj_02.png");
|
||||
//stage.addChild(sprite);
|
||||
// create a renderer instance
|
||||
// the 5the parameter is the anti aliasing
|
||||
var renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);
|
||||
|
@ -35,31 +37,99 @@
|
|||
document.body.appendChild(renderer.view);
|
||||
|
||||
var graphics = new PIXI.Graphics();
|
||||
/*
|
||||
// set a fill and line style
|
||||
graphics.beginFill(0xFF3300);
|
||||
graphics.lineStyle(10, 0xffd900, 1);
|
||||
|
||||
var container = new PIXI.DisplayObjectContainer();
|
||||
var mask_me = new PIXI.DisplayObjectContainer();
|
||||
var mask = new PIXI.Graphics();
|
||||
// draw a shape
|
||||
graphics.moveTo(50,50);
|
||||
graphics.lineTo(250, 50);
|
||||
graphics.lineTo(100, 100);
|
||||
graphics.lineTo(250, 220);
|
||||
graphics.lineTo(50, 220);
|
||||
graphics.lineTo(50, 50);
|
||||
graphics.endFill();
|
||||
|
||||
container.addChild(mask_me);
|
||||
container.addChild(mask);
|
||||
// set a fill and line style again
|
||||
graphics.lineStyle(10, 0xFF0000, 0.8);
|
||||
graphics.beginFill(0xFF700B, 1);
|
||||
|
||||
mask_me.mask = mask;
|
||||
// draw a second shape
|
||||
graphics.moveTo(210,300);
|
||||
graphics.lineTo(450,320);
|
||||
graphics.lineTo(570,350);
|
||||
graphics.lineTo(580,20);
|
||||
graphics.lineTo(330,120);
|
||||
graphics.lineTo(410,200);
|
||||
graphics.lineTo(210,300);
|
||||
graphics.endFill();
|
||||
|
||||
stage.addChild(container);
|
||||
renderer.render(stage);
|
||||
// draw a rectangel
|
||||
graphics.lineStyle(2, 0x0000FF, 1);
|
||||
graphics.drawRect(50, 250, 100, 100);
|
||||
|
||||
mask.beginFill();
|
||||
mask.drawRect(0, 0, 100, 100);
|
||||
mask.endFill();
|
||||
// draw a circle
|
||||
graphics.lineStyle(0);
|
||||
graphics.beginFill(0xFFFF0B, 0.5);
|
||||
graphics.drawCircle(470, 200,100);
|
||||
|
||||
//renderer.render(stage);
|
||||
graphics.lineStyle(20, 0x33FF00);
|
||||
graphics.moveTo(30,30);
|
||||
graphics.lineTo(600, 300);
|
||||
*/
|
||||
|
||||
var g = new PIXI.Graphics();
|
||||
g.lineStyle(10, 0x000000, 1);
|
||||
g.beginFill(0xff0000);
|
||||
g.moveTo(0,0);
|
||||
g.drawRect(0, 0, 100, 100);
|
||||
|
||||
g.pivot.x = 50;
|
||||
g.pivot.y = 50;
|
||||
|
||||
// g.lineTo(00, 200);
|
||||
// g.lineTo(300, 300);
|
||||
|
||||
g.position.x = 100;
|
||||
g.position.y = 100;
|
||||
|
||||
stage.addChild(g);
|
||||
|
||||
// lets create moving shape
|
||||
var thing = new PIXI.Graphics();
|
||||
stage.addChild(thing);
|
||||
thing.position.x = 620/2;
|
||||
thing.position.y = 380/2;
|
||||
|
||||
var count = 0;
|
||||
|
||||
stage.click = stage.tap = function()
|
||||
{
|
||||
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
|
||||
// graphics.moveTo(Math.random() * 620,Math.random() * 380);
|
||||
// graphics.lineTo(Math.random() * 620,Math.random() * 380);
|
||||
}
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
|
||||
thing.clear();
|
||||
g.rotation += 0.1
|
||||
count += 0.1;
|
||||
/*
|
||||
thing.clear();
|
||||
thing.lineStyle(30, 0xff0000, 1);
|
||||
thing.beginFill(0xffFF00, 0.5);
|
||||
|
||||
thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
|
||||
thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
|
||||
thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
|
||||
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
|
||||
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
|
||||
*/
|
||||
thing.rotation = count * 0.1;
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue