如何使用 PIXI.js 图形更改线条样式？答案

【问题标题】：How to change Style of Lines using PIXI.js Graphics?如何使用 PIXI.js 图形更改线条样式？
【发布时间】：2019-12-03 09:53:19
【问题描述】：

我试图在鼠标悬停或鼠标悬停时更改 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
    });

【问题讨论】：

标签： javascript graphics pixi.js

【解决方案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

【讨论】：

这在 v5 中不起作用。 graphicsData 似乎被移动到 Graphics.geometry.graphicsData 但 graphics.dirty++;图形.clearDirty++;好像在 Pixi 5 中没有效果。这个很重要，已经报过好几次了，但至今没有答案。

【解决方案2】：

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

graphics.geometry.invalidate();

在这里做了一个工作示例：https://www.pixiplayground.com/#/edit/JwIW3ToNCG1AYloElAoRm

【讨论】：