2019-03-21 09:57:27 +01:00
<!doctype html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > PIXI LabeledGraphics< / 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 = "../3rdparty/all.js" > < / script >
< script src = "../all.js" > < / script >
< script src = "./all.js" > < / script >
< / head >
< body onload = "Doctest.run()" >
< h1 > 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 / >
2019-03-28 09:49:21 +01:00
< canvas id = "canvas1" class = "interactive" > < / canvas >
2019-03-21 09:57:27 +01:00
< p >
What you should see: A box with a label.
< / p >
< script class = "doctest" >
const app = new PIXIApp({
2019-03-28 09:49:21 +01:00
view: canvas1,
2019-03-21 09:57:27 +01:00
width: 900,
height: 150
}).setup().run()
const labeledBox = new LabeledGraphics()
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top'})
2019-03-28 09:49:21 +01:00
labeledBox.beginFill(0x333333)
2019-03-21 09:57:27 +01:00
labeledBox.drawRect(0, 0, 300, 100)
labeledBox.endFill()
app.scene.addChild(labeledBox)
< / script >
2019-03-28 09:49:21 +01:00
< 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 >
< canvas id = "canvas2" class = "interactive" > < / canvas >
< script class = "doctest" >
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 150
}).setup().run()
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.
At vero eos et accusam et justo duo dolores et ea rebum.`
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()
column.interactive = true
text.interactive = true
text.getLocalBounds()
text.on('zoom', (event) => {
let factor = 1.0 + event.wheelDelta / 1000
text.zoom(factor)
})
app2.view.addEventListener('mousewheel', (event) => {
text.emit('zoom', event)
event.preventDefault()
})
app2.scene.addChild(column)
< / script >
2019-03-21 09:57:27 +01:00
< / body >
