160 lines
4.4 KiB
HTML
160 lines
4.4 KiB
HTML
|
<!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>
|