/
Textwrapping.html
64 lines (53 loc) · 2.85 KB
/
Textwrapping.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Multi-line text</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var stage;
function init() {
stage = new createjs.Stage(document.getElementById("testCanvas"));
var txt = new createjs.Text("", "17px Arial", "#FFF");
txt.text = "This text is rendered in canvas using the Text Object:\n\n";
txt.text += "The API is loosely based on Flash's display list, and should be easy to pick up for both JS and AS3 developers. The key classes are:\n\n";
txt.text += "DisplayObject\nAbstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.\n\n"
txt.text += "Stage\nThe root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.\n\n";
txt.text += "Container\nA nestable display container, which lets you aggregate display objects and manipulate them as a group.\n\n";
txt.text += "Text\nRenders text in the context of the display list."
txt.lineWidth = 800;
txt.textBaseline = "top";
txt.textAlign = "left";
txt.y = 50;
txt.x = 30;
stage.addChild(txt);
// use lineWidth and getMeasuredHeight to dynamically draw a background for our text:
var pad = 10;
var bg = new createjs.Shape();
bg.graphics.beginFill("#114").drawRect(txt.x-pad, txt.y-pad, txt.lineWidth+pad*2, txt.getMeasuredHeight()+pad*2);
stage.addChildAt(bg,0);
stage.update();
}
</script>
</head>
<body onload="init()">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Bitmap Animation</h1>
<p>Simple sample showing multi-line text and text wrapping with <strong>Text</strong> elements.</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>