Pixi.js Interactions

by duckywang1

HTML

<script src="https://cdn.bootcss.com/pixi.js/4.7.0/pixi.js"></script>
<style>* { margin: 0; padding: 0; }</style>
<canvas id="renderer" height="800" width="600"></canvas>

JavaScript

function animate() {
    renderer.render(mainContainer);
    requestAnimationFrame( animate );
}
var pixiOptions = {
  antialias: false,
  transparent: false,
  resolution: 1,
  view: document.getElementById("renderer"),
};
var renderer = PIXI.autoDetectRenderer(800, 600, pixiOptions);
var mainContainer = new PIXI.Container();

var currentLayer = null;
var currentLayerList = [];

var hoverLayer = new PIXI.Graphics();
hoverLayer.lineStyle(2, 0x0000FF, 1);
hoverLayer.beginFill('transparent', 0);
hoverLayer.drawRect(0, 0, 120, 120);
hoverLayer.interactive = true;
hoverLayer.buttonMode = true;
/* var globalHighLightContainer = new PIXI.Container();
globalHighLightContainer.interactive = true;
globalHighLightContainer.buttonMode = true;
globalHighLightContainer.addChild(hoverLayer); */

var page0 = new PIXI.Container();

var styleText = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 36,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#00ff99'], // gradient
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 500
});
var strText = 'Rich text with a lot of options and across multiple lines';
var richText = new PIXI.Text(strText, styleText);

richText.x = 100;
richText.y = 100;
richText.interactive = true;
richText.buttonMode = true;
richText.on('pointerover', function() {
  console.log(this);
  console.log(hoverLayer);
  hoverLayer.alpha = 1;
  hoverLayer.position.x = this.position.x -8;
  hoverLayer.position.y = this.position.y -8;
  hoverLayer.width = this.width + 16;
  hoverLayer.height = this.height + 16;
});
richText.on('pointerout', function() {
  // hoverLayer = null;
  hoverLayer.alpha = 0.1;
});
richText.on('pointerdown', function() {
  currentLayer = this;
});

page0.addChild(hoverLayer);
page0.addChild(richText);

mainContainer.interactive =...