<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Text</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> <script src="../3rdparty/d3.min.js"></script> </head> <body onload="Doctest.run()"> <h1>Text</h1> <p> The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse). </p> <p>Let's look at some tooltip examples:</p><br /> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: Ten colored circles with different tooltips. </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 900, height: 500, transparent: false, backgroundColor: 0x2c2d2b }).setup().run() const container = new PIXI.Graphics() container.beginFill(0x58595b, 1) container.drawRect(0, 0, 700, 300) container.pivot.set(container.width / 2, container.height / 2) container.position.set(450, 250) app.scene.addChild(container) const sixthWidth = container.width / 6 const halfHeight = container.height / 2 app.loadSprites([ './assets/stuttgart-library.jpg', './assets/Arial.fnt' ], sprites => { // PIXI.Text //-------------------- const text = new PIXI.Text('Bibliothek\nStuttgart', {fontSize: 50}) text.x = sixthWidth text.y = halfHeight text.pivot.set(text.width / 2, text.height / 2) container.addChild(text) // PIXI.BitmapText //-------------------- const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', { font: '50px Arial', align: 'left' }) bitmapText.x = sixthWidth * 3 bitmapText.y = halfHeight bitmapText.pivot.set(bitmapText.width / 2, bitmapText.height / 2) container.addChild(bitmapText) // PIXI.Sprite //-------------------- const sprite = sprites.get('./assets/stuttgart-library.jpg') sprite.scale.set(.05, .05) sprite.x = sixthWidth * 5 sprite.y = halfHeight sprite.anchor.set(.5, .5) container.addChild(sprite) // Scale //-------------------- const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([.05, 1, 50]) const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([.1, 1, 10]) const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([.005, .05, .5]) // Sliders //-------------------- const sliderContainer = new Slider({ value: 50, width: 500, tooltip: 'Scale Container', container: app.view, onUpdate: function() { const value = scaleContainer(this.value) container.scale.set(value, value) } }) sliderContainer.x = app.size.width / 2 - sliderContainer.width / 2 sliderContainer.y = 10 app.scene.addChild(sliderContainer) const sliderContainerAll = new Slider({ value: 50, width: 500, tooltip: 'Scale Container All', container: app.view, onUpdate: function() { const value = scaleContainer(this.value) container.scale.set(value, value) text.scale.set(1 / value, 1 / value) bitmapText.scale.set(1 / value, 1 / value) } }) sliderContainerAll.x = app.size.width / 2 - sliderContainerAll.width / 2 sliderContainerAll.y = 55 app.scene.addChild(sliderContainerAll) const sliderText = new Slider({ value: 50, tooltip: 'Scale PIXI.Text', container: app.view, onUpdate: function() { const value = scaleTexts(this.value) text.scale.set(value, value) } }) sliderText.x = app.size.width / 6 - sliderText.width / 2 sliderText.y = app.size.height - 10 - sliderText.height app.scene.addChild(sliderText) const sliderBitmapText = new Slider({ value: 50, tooltip: 'Scale PIXI.extras.BitmapText', container: app.view, onUpdate: function() { const value = scaleTexts(this.value) bitmapText.scale.set(value, value) } }) sliderBitmapText.x = app.size.width / 6 * 3 - sliderBitmapText.width / 2 sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height app.scene.addChild(sliderBitmapText) const sliderSprite = new Slider({ value: 50, tooltip: 'Scale PIXI.Sprite', container: app.view, onUpdate: function() { const value = scaleSprite(this.value) sprite.scale.set(value, value) } }) sliderSprite.x = app.size.width / 6 * 5 - sliderSprite.width / 2 sliderSprite.y = app.size.height - 10 - sliderSprite.height app.scene.addChild(sliderSprite) }, {resolutionDependent: false}) </script> </body>