Как изменить стиль линий с помощью графики PIXI.js? - PullRequest
Новая
       18

Как изменить стиль линий с помощью графики PIXI.js?

0 голосов
/ 07 мая 2018

Я пытаюсь изменить альфа-канал и цвет при наведении курсора мыши или mousedown, но отображение не меняется.

Когда я использовал класс 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
    });

1 Ответ

0 голосов
/ 22 ноября 2018

В последней версии 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

...