Argthtjtr

I am trying to change alpha and color when mouseover or mousedown, but the display is not changing.

When I used the Text class, it worked. I changed the style from normal to bold as follows:

class Leaf extends PIXI.Text{

    ...

    this.interactive = true;

    this.on('mouseover', function () {        

        this.style.fontWeight = 'bold';           

    });

}

Then I tried to change the color of lines/links/edges of my view, but it is not working:

class TreeEdge extends Graphics{

    constructor(d){

        super();

        this.data = d;

        let p0 = project(d.source.x, d.source.y);  

        let p1 = project(d.target.x, d.target.y);        

        this.lineStyle(1, d.target.color, 1);

        this.moveTo(p0[0], p0[1]);               

        this.lineTo(p1[0], p1[1]);

        this.endFill(); 



        this.hitArea = this.getBounds();

        this.interactive = true;

        this.on('mouseover', function () {                      

            this.alpha = 1;           

        });

    }

}

I tried this.lineAlpha, this.alpha, this.GraphicsData[0].lineAlpha... this.clear() and this.dirty++. Nothing changes. I tried to change color as well, with this.color and this.lineStyle(1, node.color, 1);.

It seems I need to update the render or something.
What is the best approach to update graphics elements with user interaction?

I am using pixi.js - v4.7.3

Initiating my app like so:

var app = new PIXI.Application(width, height, {

        backgroundColor: 0xffffff,

        antialias: true,

        transparent: false,

        resolution: 1

    });

In the latest PixiJS version (4.x.x), you need to use these flags:

this.dirty++;

this.clearDirty++;

You can implement the line update code as a function or add it to the Graphics object prototype as follows:

PIXI.Graphics.prototype.updateLineStyle = function(lineWidth, color, alpha){   

  var len = this.graphicsData.length;    

  for (var i = 0; i < len; i++) {        

    var data = this.graphicsData[i];

    data.lineWidth = lineWidth;        

    data.lineColor = color;        

    data.alpha = alpha;   

    this.dirty++;        

    this.clearDirty++;    

  }    

}

Then use it like this:

var line = new PIXI.Graphics();

line

.lineStyle(...)

.moveTo(...)       

.lineTo(...);



line.hitArea = line.getBounds();

line.interactive = true;



line.mouseover = function(){

  this.updateLineStyle(5, 0xff0000, 1); 

}

Link to jsfiddle : http://jsfiddle.net/anuragsr/4170xkwu/1/

Source : http://www.html5gamedevs.com/topic/9374-change-the-style-of-line-that-is-already-drawn/?tab=comments#comment-55611