<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PIXI Badge</title> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" /> <link rel="stylesheet" href="../../css/doctest.css" /> <script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> </head> <body onload="Doctest.run()"> <h1>Badge</h1> <p> Small and adaptive tag for adding context to just about any content. </p> <p>Let's look at some badge examples:</p> <br /> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: Badges, badges, badges... </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 900, height: 250 }) .setup() .run() const circle1 = new PIXI.Graphics() circle1.beginFill(0x5251a3) circle1.drawCircle(50, 50, 40) const circle2 = new PIXI.Graphics() circle2.beginFill(0x8ca351) circle2.drawCircle(150, 50, 40) const button1 = new Button({ x: 10, y: 110, label: 'Button with Badge' }) const button2 = new Button({ x: 230, y: 110, label: 'Button with Video-Badge' }) const button3 = new Button({ x: 480, y: 110, label: 'Button and ', badge: 'Badge' }) const button4 = new Button({ x: 640, y: 110, label: 'Button', badge: { content: 'IWM', align: 'center', verticalAlign: 'bottom', offsetTop: 6, radius: 16, fill: 0xfe832d } }) const button5 = new Button({ x: 740, y: 110, label: 'Button', badge: { content: '1', radius: 16, tooltip: 'One' } }) const button6 = new Button({ x: 740, y: 180, label: 'Change Badge', action: () => { button5.badge.content = '2' } }) let badge1 = new Badge({ x: 60, y: 10, content: 'New' }) let badge2 = new Badge({ content: '7', x: 160, y: 10, fill: 0x1078fc }) let badge3 = new Badge({ x: 170, y: 95, padding: 5, radius: 16, content: '142', fill: 0xfe9727 }) let sprite1 = new PIXI.Sprite( PIXI.Texture.from('./assets/badge-1.mp4') ) sprite1.scale.set(0.05, 0.05) let texture1 = PIXI.Texture.from('./assets/badge-1.mp4') texture1.baseTexture.on('loaded', e => { let sprite1 = new PIXI.Sprite(texture1) sprite1.scale.set(0.05, 0.05) sprite1.alpha = 0.5 let badge4 = new Badge({ x: 300, y: 152, stroke: 0x5ec7f8, strokeWidth: 3, fillAlpha: 0.7, padding: 0, radius: 1, content: sprite1, tooltip: 'Earth in Space' }) app.scene.addChild(badge4) }) app.scene.addChild(circle1, circle2) app.scene.addChild( button1, button2, button3, button4, button5, button6 ) app.scene.addChild(badge1, badge2, badge3) </script> </body> </html>