I am trying to change alpha and color on 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
    });

I am trying to change alpha and color on 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
    });

• javascript
• graphics
• pixi.js

Share Improve this question Follow edited Jun 14, 2022 at 15:21 Anurag Srivastava 14.5k44 gold badges3737 silver badges4646 bronze badges asked May 7, 2018 at 19:22 HenryHenry 42144 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/anuragsr/4170xkwu/1/

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

For those looking to update the lineStyle in Pixi 5, you'll need use:

graphics.geometry.invalidate();

Made a working example here: https://www.pixiplayground./#/edit/JwIW3ToNCG1AYloElAoRm