PixiJS Changing line data

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.0/pixi.min.js"></script>

CSS

body{
  background: black;
}

JavaScript

var pixiApp = new PIXI.Application( 800, 600, {
  transparent:true,
  antialias: true
})

pixiApp.view.style.position  = "absolute";
pixiApp.view.style.top = pixiApp.view.style.left = 0;

$("body").append(pixiApp.view);

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 area = new PIXI.Graphics();
area
  .lineStyle(0, 0xffffff, 1)
  .beginFill(0xff00ff, 1)
  .drawPolygon(0,0, 200,500, 400, 200, 100, 150, 0, 0)
  .endFill();

area.interactive = true;

area.mouseover = function(e){
  this.alpha = .6;
  this.updateLineStyle(5, 0xffffff, 1); 
}

area.mouseout = function(e){
  this.alpha = 1;
  this.updateLineStyle(0, 0xffffff, 1);      
}

pixiApp.stage.addChild(area);

var line = new PIXI.Graphics();
line
.lineStyle(5, 0xffffff, 1)
.moveTo(300, 400)       
.lineTo(450, 400);

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

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

line.mouseout = function(e){
  this.alpha = 1;
  this.updateLineStyle(5, 0xffffff, 1);      
}

pixiApp.stage.addChild(line);