2023-05-09 13:25:39 +02:00
<!DOCTYPE html>
2019-03-21 09:57:27 +01:00
< html lang = "en" >
2023-05-09 13:25:39 +02:00
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
2019-03-21 09:57:27 +01:00
2023-05-09 13:25:39 +02:00
< title > PIXI LabeledGraphics< / title >
2019-03-21 09:57:27 +01:00
2023-05-09 13:25:39 +02:00
< link rel = "stylesheet" href = "../3rdparty/highlight/styles/default.css" / >
< link rel = "stylesheet" href = "../../css/doctest.css" / >
2019-03-21 09:57:27 +01:00
2023-05-09 13:25:39 +02:00
< script src = "../3rdparty/highlight/highlight.pack.js" > < / script >
< script src = "../../dist/iwmlib.3rdparty.js" > < / script >
2019-03-21 09:57:27 +01:00
2023-05-09 13:25:39 +02:00
< script src = "../../dist/iwmlib.js" > < / script >
< script src = "../../dist/iwmlib.pixi.js" > < / script >
< / head >
< body onload = "Doctest.run()" >
< h1 > < a href = "../index.html" > lib.< / a > < a href = "index.html" > pixi.< / a > LabeledGraphics< / h1 >
< p >
A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows to place and reuse
labels, i.e. PIXI.Text objects. The labels are cached by a given key and only rendered anew if necessary.
< / p >
< p > < a href = "../../doc/out/LabeledGraphics.html" > JavaScript API< / a > < / p >
< p > Let's look at an example:< / p >
< br / >
< canvas id = "canvas1" class = "interactive" > < / canvas >
< p > What you should see: A box with a label.< / p >
< script class = "doctest" >
const app = new PIXIApp({
view: canvas1,
width: 900,
height: 150
})
.setup()
.run()
2019-03-21 09:57:27 +01:00
2023-05-09 13:25:39 +02:00
const labeledBox = new LabeledGraphics()
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top' })
labeledBox.beginFill(0x333333)
labeledBox.drawRect(0, 0, 300, 100)
labeledBox.endFill()
2019-03-21 09:57:27 +01:00
2023-05-09 13:25:39 +02:00
app.scene.addChild(labeledBox)
< / script >
< h2 > Zoomable Labels< / h2 >
< p >
Labeled graphics can also be used to represent zoomable text columns in more complex layouts. Use the
mousewheel to zoom the following text column:
< / p >
2019-03-28 09:49:21 +01:00
2023-05-09 13:25:39 +02:00
< canvas id = "canvas2" class = "interactive" > < / canvas >
< script class = "doctest" >
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 150
})
.setup()
.run()
2019-03-28 09:49:21 +01:00
2023-05-09 13:25:39 +02:00
const loremIpsum = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
2019-03-28 09:49:21 +01:00
At vero eos et accusam et justo duo dolores et ea rebum.`
2023-05-09 13:25:39 +02:00
const column = new LabeledGraphics()
const text = column.ensureLabel('key', loremIpsum, {
maxWidth: 250,
zoomFonts: true,
justify: 'top',
align: 'align'
})
column.beginFill(0x333333)
column.drawRect(0, 0, 900, 150)
column.endFill()
2019-03-28 09:49:21 +01:00
2023-05-09 13:25:39 +02:00
column.interactive = true
text.interactive = true
text.getLocalBounds()
2019-03-28 09:49:21 +01:00
2023-05-09 13:25:39 +02:00
text.on('zoom', (event) => {
let factor = 1.0 + event.wheelDelta / 1000
text.zoom(factor)
})
2019-03-28 09:49:21 +01:00
2023-05-09 13:25:39 +02:00
app2.view.addEventListener('mousewheel', (event) => {
text.emit('zoom', event)
event.preventDefault()
})
2019-03-28 09:49:21 +01:00
2023-05-09 13:25:39 +02:00
app2.scene.addChild(column)
< / script >
< / body >
< / html >
