如何使用 PIXI.js 图形更改线条样式?

Question

我正在尝试更改mouseover或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