Question

我试图在鼠标悬停或mousedown时更改alpha和颜色，但显示不会改变。

当我使用Text类时，它有效。我将样式从正常更改为粗体，如下所示：

class Leaf extends PIXI.Text{
    ...
    this.interactive = true;
    this.on('mouseover', function () {        
        this.style.fontWeight = 'bold';           
    });
}

然后我尝试更改视图的线条/链接/边缘的颜色，但它不起作用：

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;           
        });
    }
}

我尝试了this.lineAlpha，this.alpha，this.GraphicsData[0].lineAlpha ... this.clear()和this.dirty++。没有什么变化。我也尝试使用this.color和this.lineStyle(1, node.color, 1);更改颜色。

似乎我需要更新渲染或其他东西。使用用户交互更新图形元素的最佳方法是什么？

我正在使用pixi.js - v4.7.3

像这样启动我的应用程序：

var app = new PIXI.Application(width, height, {
        backgroundColor: 0xffffff,
        antialias: true,
        transparent: false,
        resolution: 1
    });

Answer 1

在最新的PixiJS版本（4.x.x）中，您需要使用以下标志：

this.dirty++;
this.clearDirty++;

您可以将行更新代码实现为函数或将其添加到Graphics对象原型中，如下所示：

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++;    
  }    
}

然后像这样使用它：

var line = new PIXI.Graphics();
line
.lineStyle(...)
.moveTo(...)       
.lineTo(...);

line.hitArea = line.getBounds();
line.interactive = true;

line.mouseover = function(){
  this.updateLineStyle(5, 0xff0000, 1); 
}

链接到jsfiddle：http://jsfiddle.net/anuragsr/4170xkwu/1/

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

Answer 2

对于那些希望在Pixi 5中更新lineStyle的人，您需要使用：

graphics.geometry.invalidate();

在此处创建一个有效的示例：https://www.pixiplayground.com/#/edit/JwIW3ToNCG1AYloElAoRm

如何使用PIXI.js Graphics更改行的样式？

2 个答案: