Added text that zooms vis font size changes,

This commit is contained in:
Uwe Oestermeier 2019-03-28 09:49:21 +01:00
parent df0c2fea3a
commit 909c67cfba
3 changed files with 85 additions and 4 deletions

View File

@ -35,6 +35,7 @@ const index = new Index(itemTemplate, [
['DeepZoom', 'deepzoom.html'],
['DeepZoomImage', 'deepzoomimage.html'],
['Flippable', 'flippable.html'],
['LabeledGraphics', 'labeledgraphics.html'],
['List', 'list.html'],
['Message', 'message.html'],
['Modal', 'modal.html'],

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>

View File

@ -130,6 +130,47 @@ export class Hypenate {
}
}
class TextLabel extends PIXI.Text {
/**
*Creates an instance of TextLabel.
* @param {string} text - The string that you would like the text to display
* @param {object PIXI.TextStyle optional} style - The style parameters
* @param {canvas}
* @memberof TextLabel
*/
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
super(text, style, canvas )
this.normFontSize = this.style.fontSize
this.minZoom = minZoom
this.maxZoom = maxZoom
}
zoom(factor) {
let oldValue = parseFloat(this.style.fontSize) / this.normFontSize
let value = oldValue * factor
this.setZoom(value)
}
setZoom(value) {
let oldValue = parseFloat(this.style.fontSize) / this.normFontSize
if (value > this.maxZoom) {
value = this.maxZoom
}
if (value < this.minZoom) {
value = this.minZoom
}
if (value != oldValue) {
this.style.fontSize = Math.max(value * this.normFontSize, 1)
}
}
setZoomAndScale(scale) {
this.scale.set(1 / scale)
this.setZoom(scale)
}
}
/**
* A specialization of the PIXI.Graphics class that allows to
* resuse and place labels across different layout variants
@ -151,7 +192,7 @@ export class LabeledGraphics extends PIXI.Graphics {
}
_createText(label, fontInfo) {
return new PIXI.Text(label, fontInfo)
return new TextLabel(label, fontInfo)
}