JSFiddle - React, Tailwind, and code Playground

by flek

HTML

<script src="https://unpkg.com/[email protected]/dist/pixi.min.js"></script>
<div id="root"></div>

JavaScript

const root = document.getElementById('root');
console.log(root)
const app = new window.PIXI.Application({
    width: 300, height: 300, backgroundColor: 0x000000, resolution: window.devicePixelRatio || 1,
});
root.appendChild(app.view);

const container = new PIXI.Container();

app.stage.addChild(container);

const buffer = new Float32Array([
    1, 0.5, 0.25, 1,   0.1, 0.1,  0.1, 1,    0.1, 0.1, 0.1, 1,
  0.1, 0.1,  0.1, 1,   0.5,   1, 0.25, 1,    0.1, 0.1, 0.1, 1,
  0.1, 0.1,  0.1, 1,   0.1, 0.1,  0.1, 1,   0.25, 0.5,   1, 1,
])
const texture = window.PIXI.Texture.fromBuffer(buffer, 3, 3);

const createImageWithBorder = (texture) => {
	const container = new PIXI.Container();
  const border = new PIXI.Graphics();
  const sprite = new PIXI.Sprite(texture);
  sprite.scale.x = 20;
  sprite.scale.y = 20;
  
  const clearBorder = () => {
  	border.clear();
  }
  
  const drawBorder = () => {
    clearBorder();
    
  	const bounds = container.getBounds();
    
    border.beginFill(0xFF0000, 1.0);
    border.drawRect(-2, -2, bounds.width + 4, bounds.height + 4);
    border.endFill();
  }

  const pointerOverHandler = () => {
    drawBorder();
  };
  const pointerOutHandler = () => {
    clearBorder();
  };
  
  container.interactive = true;
  container.buttonMode = true;
  container.on('pointerover', pointerOverHandler);
  container.on('pointerout', pointerOutHandler);
  container.addChild(border);
  container.addChild(sprite);
  
  return container;
}

const img = createImageWithBorder(texture);

// Move container to the center
img.x = 10;
img.y = 10;

container.addChild(img);

container.interactive = true;