Added text that zooms vis font size changes,

This commit is contained in:
2019-03-28 09:49:21 +01:00
parent df0c2fea3a
commit 909c67cfba
3 changed files with 85 additions and 4 deletions
+42 -3
View File
@@ -23,23 +23,62 @@
</p>
<p><a href="../../doc/out/LabeledGraphics.html">JavaScript API</a></p>
<p>Let's look at an example:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<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: canvas,
view: canvas1,
width: 900,
height: 150
}).setup().run()
const labeledBox = new LabeledGraphics()
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top'})
labeledBox.beginFill(0x0000FF)
labeledBox.beginFill(0x333333)
labeledBox.drawRect(0, 0, 300, 100)
labeledBox.endFill()
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>
<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>
</body>