Initial commit.

2019-03-21 09:57:27 +01:00
parent 9893d5de24
commit 80317c5026
1907 changed files with 502783 additions and 0 deletions
@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Tooltip</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>Tooltip</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: 250
+}).setup().run()
+
+const circle1 = new PIXI.Graphics()
+circle1.beginFill(0x5251a3)
+circle1.drawCircle(50, 50, 40)
+
+const circle2 = new PIXI.Graphics()
+circle2.beginFill(0x8ca351)
+circle2.drawCircle(150, 50, 40)
+
+const circle3 = new PIXI.Graphics()
+circle3.beginFill(0xbda038)
+circle3.drawCircle(250, 50, 40)
+
+const circle4 = new PIXI.Graphics()
+circle4.beginFill(0xae4a4a)
+circle4.drawCircle(350, 50, 40)
+
+const circle5 = new PIXI.Graphics()
+circle5.beginFill(0xa64f94)
+circle5.drawCircle(450, 50, 40)
+
+const circle6 = new PIXI.Graphics()
+circle6.beginFill(0x6b6acf)
+circle6.drawCircle(50, 150, 40)
+
+const circle7 = new PIXI.Graphics()
+circle7.beginFill(0xb5d16a)
+circle7.drawCircle(150, 150, 40)
+
+const circle8 = new PIXI.Graphics()
+circle8.beginFill(0xe7bc51)
+circle8.drawCircle(250, 150, 40)
+
+const circle9 = new PIXI.Graphics()
+circle9.beginFill(0xd7626c)
+circle9.drawCircle(350, 150, 40)
+
+const circle10 = new PIXI.Graphics()
+circle10.beginFill(0xcf6bbd)
+circle10.drawCircle(450, 150, 40)
+
+let tooltip1 = new Tooltip({
+    object: circle1,
+    container: app.scene,
+    content: 'Das Gesetz ist der Freund des Schwachen.'
+})
+
+let tooltip2 = new Tooltip({
+    object: circle2,
+    content: 'Sieh vorwärts, Werner, und nicht hinter dich!'
+})
+
+let tooltip3 = new Tooltip({
+    object: circle3,
+    container: app.scene,
+    padding: 20,
+    content: 'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.'
+})
+
+let tooltip4 = new Tooltip({
+    object: circle4,
+    container: app.scene,
+    content: 'Stets ist die Sprache kecker als die Tat.',
+    textStyle: {fill: 0x5251a3, fontSize: 20},
+    fill: 0xa64f94,
+    fillAlpha: .8
+})
+
+let tooltip5 = new Tooltip({
+    object: circle5,
+    container: app.scene,
+    content: 'Hier gilt es, Schütze, deine Kunst zu zeigen:\nDas Ziel ist würdig, und der Preis ist groß.',
+    fillAlpha: 0,
+    strokeAlpha: 0,
+    offsetLeft: -160,
+    offsetTop: 100,
+    delay: 3,
+    textStyle: {fill: 0x5251a3, fontSize: 20, stroke: 0xeeeeee, strokeThickness: 2}
+})
+
+app.loadSprites([
+    './assets/tooltip-1.jpg',
+    './assets/tooltip-2.jpg'
+], sprites => {
+    let sprite1 = sprites.get('./assets/tooltip-1.jpg')
+    sprite1.scale.set(.33, .33)
+    let tooltip6 = new Tooltip({
+        object: circle6,
+        container: app.scene,
+        content: sprite1
+    })
+
+    let sprite2 = sprites.get('./assets/tooltip-2.jpg')
+    sprite2.scale.set(.33, .33)
+    let tooltip7 = new Tooltip({
+        object: circle7,
+        container: app.scene,
+        padding: 0,
+        content: sprite2,
+        fillAlpha: 0,
+        strokeAlpha: 0
+    })
+
+    let tooltip8 = new Tooltip({
+        object: circle8,
+        container: app.scene,
+        padding: 8,
+        fill: 0xe7bc51,
+        fillAlpha: .7,
+        content: 'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.',
+        textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'}
+    })
+
+    let texture1 = PIXI.Texture.fromVideo('./assets/tooltip-3.mp4')
+
+    texture1.baseTexture.on('loaded', e => {
+
+        let sprite3 = new PIXI.Sprite(texture1)
+        sprite3.scale.set(.15, .15)
+        let tooltip9 = new Tooltip({
+            object: circle9,
+            container: app.scene,
+            content: sprite3,
+            offsetTop: 100,
+            offsetLeft: 30
+        })
+
+        let sprite4 = new PIXI.Sprite(texture1)
+        sprite4.scale.set(.1, .1)
+        let tooltip10 = new Tooltip({
+            object: circle10,
+            container: app.scene,
+            content: sprite4,
+            offsetTop: 100,
+            offsetLeft: -100,
+            padding: 1
+        })
+    })
+}, {resolutionDependent: false})
+
+app.scene.addChild(circle1, circle2, circle3, circle4, circle5)
+app.scene.addChild(circle6, circle7, circle8, circle9, circle10)
+    </script>
+</body>