Rectangle (or polygon) mouse over and mouse out?

[monk-e-boy]

How would I change the color of a rectangle as the mouse hovers it?

 

I am confused as to where in the code I render the rect.... I add them to the stage, then:

 

update();

function update(){

    requestAnimationFrame(update);

    renderer.render(stage);

 

    //rect.drawRect(0,0, 200,200);

};

 

but nothing is drawn? Uncommenting the line will draw the rect.

[Seby]

You must add your rrectangle in stage, look examples : http://pixijs.github.io/examples/index.html?s=basics&f=graphics.js&title=Graphics&v=v3.0.2

[monk-e-boy]

This is my code:

 

var renderer = PIXI.autoDetectRenderer(500, 500, {backgroundColor:0xFFFFFF}, true);

var stage = new PIXI.Stage(0xFFFFFF);

stage.interactive = true;

 

//document.getElementById("canvas").appendChild(renderer.view);

document.body.appendChild(renderer.view);

 

var rect = new PIXI.Graphics();

rect.lineStyle(1, 0x00ffff);

 

rect.interactive = true;

rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);

rect.drawRect(0,0, 200,200);

rect.click = function(ev) { console.log("clicked"); }

rect.mouseover = function(ev) {

  console.log("over");

  rect.lineStyle(1, 0xff0000);

}

rect.mouseout = function(ev) {

  console.log("over");

  rect.lineStyle(1, 0x00ffff);

  // rect.drawRect(0,0, 200,200);

}

stage.addChild(rect);

 

stage.hitArea = new PIXI.Rectangle(0,0,500,500);

 

stage.mouseover = function(ev) {

  console.log('m');

}

 

stage.mouseup = function(ev) {

  console.log(ev.x);

}

 

update();

function update(){

    requestAnimationFrame(update);

    renderer.render(stage);

 

    //rect.drawRect(0,0, 200,200);

};

 

I just wanted to change the color of the rect as the mouse went over it

[clement_cvL]

You will have to redraw your rectangle:

rect.mouseover = function(){    rect.clear();    rect.lineStyle(1, 0x00ffff);    rect.drawRect(...);}