<!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 />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: A box with a label.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
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.drawRect(0, 0, 300, 100)
labeledBox.endFill()
app.scene.addChild(labeledBox)
</script>
</body>