source: Dev/trunk/src/client/dojox/gfx/tests/test_text.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.1 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>Testing text</title>
5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
7        <script type="text/javascript">
8
9        require(["dojo/ready", "dojo/_base/array", "dojo/dom", "dojo/on", "dojox/gfx","dojox/gfx/matrix"],
10        function(ready, array, dom, on, gfx, matrix){
11
12                var ROTATION = 30, surface = null, t1, t2, t3, t4, t5, t6, t7, t8, t9;
13
14                function placeBBox(surface, shape){
15                        var bbox = shape.getBoundingBox();
16                        var t = shape.getTransform();//shape._getRealMatrix();
17                        var tbbox = matrix.multiplyRectangle(t, bbox);
18                        var rect = surface.createRect(tbbox).setStroke("red");
19                }
20
21                function placeAnchor(surface, x, y){
22                        surface.createLine({x1: x - 2, y1: y, x2: x + 2, y2: y}).setStroke("blue");
23                        surface.createLine({x1: x, y1: y - 2, x2: x, y2: y + 2}).setStroke("blue");
24                }
25
26                function makeText(surface, text, font, fill, stroke){
27                        var t = surface.createText(text);
28                        if(font)   t.setFont(font);
29                        if(fill)   t.setFill(fill);
30                        if(stroke) t.setStroke(stroke);
31                        placeAnchor(surface, text.x, text.y);
32                        return t;
33                }
34
35                function makeShapes(){
36                        var m = matrix;
37                        surface.createLine({x1: 250, y1: 0, x2: 250, y2: 500}).setStroke("green");
38                        t1 = makeText(surface, {x: 250, y: 50, text: "Start", align: "start"},
39                                {family: "Times", size: "36pt", weight: "bold"}, "black", "red")
40                                .setTransform(m.rotategAt(ROTATION, 250, 50));
41                        t2 = makeText(surface, {x: 250, y: 100, text: "Middle", align: "middle"},
42                                {family: "Symbol", size: "24pt"}, "red", "black")
43                                .setTransform(m.rotategAt(ROTATION, 250, 100));
44                        t3 = makeText(surface, {x: 250, y: 150, text: "End", align: "end"},
45                                {family: "Helvetica", style: "italic", size: "18pt", rotated: true}, "#FF8000")
46                                .setTransform(m.rotategAt(ROTATION, 250, 150));
47                        t4 = makeText(surface, {x: 250, y: 200, text: "Define Shuffle Tiff", align: "middle", kerning: true},
48                                {family: "serif", size: "36pt"}, "black")
49                                .setTransform(m.rotategAt(0, 250, 200));
50                        t5 = makeText(surface, {x: 250, y: 250, text: "Define Shuffle Tiff", align: "middle", kerning: false},
51                                {family: "serif", size: "36pt"}, "black")
52                                .setTransform(m.rotategAt(0, 250, 250));
53                        // test #14522
54                        t6 = makeText(surface, {x: 250, y: 290, text: 18, align: "start"},
55                                {family: "sans serif", size: "18pt", weight: "bold"}, "black");
56                        // test #16099
57                        t7 = makeText(surface, {x: 0, y: 0, text: "Middle", align: "middle"},
58                                {family: "sans serif", size: "24pt"}, "red", "black")
59                                .setTransform(m.translate(250, 340));
60                        t8 = makeText(surface, {x: 250, y: 390, text: "Number: \u200E\u202A20\u202C", align: "middle"},
61                                        {family: "sans serif", size: "24pt"}, "red", "black");
62                        // a text with some descents
63                        t9 = makeText(surface, {x: 0, y: 0, text: "go, Dojo! go", align: "end"},
64                                        {family: "serif", size: "36pt"}, "red", "black")
65                                        .setTransform(m.translate(250, 440));
66
67
68                        array.forEach(["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"], function(name){
69                                var node = eval("(" + name + ")");
70                                placeBBox(surface, node);
71                        });
72                }
73
74                function createSurface(nodeId){
75                        surface = gfx.createSurface(nodeId, 500, 500);
76                        surface.whenLoaded(makeShapes);
77                }
78
79                function getSizes(){
80                        if (!surface.children.length){return;}
81                        var t = [];
82                        array.forEach(["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"], function(name){
83                                var node = eval("(" + name + ")");
84                                t.push(node.getShape().text + " = " + node.getTextWidth());
85                        });
86                        dom.byId("sizes").innerHTML = t.join("<br/>");
87                }
88
89                ready(function(){
90                        on(dom.byId("getSizes"), "click", getSizes);
91                        on(dom.byId("clear"), "click", function(){surface.clear();});
92                        createSurface("test");
93                });
94        });
95</script>
96</head>
97<body>
98        <h1>dojox.gfx Text test</h1>
99        <div id="test" style="width: 500px; height: 500px;"></div>
100        <div><button id="clear">Clear</button>&nbsp;<button id="getSizes">Get sizes</button></div>
101        <p id="sizes">&nbsp;</p>
102        <p>That's all Folks!</p>
103</body>
104</html>
Note: See TracBrowser for help on using the repository browser.