<!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>