git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/gfx/tests/test_text.html

   1 <html>
   2 <head>
   3 <title>Testing text</title>
   4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5 <style type="text/css">
   6         @import "../../../dojo/resources/dojo.css";
   7         @import "../../../dijit/tests/css/dijitTests.css";
   8 </style>
   9 <!--
  10 The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
  11 <script type="text/javascript" src="Silverlight.js"></script>
  12 -->
  13 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
  14 <!--
  15 <script type="text/javascript" src="../common.js"></script>
  16 <script type="text/javascript" src="../shape.js"></script>
  17 -->
  18 <!--<script type="text/javascript" src="../vml.js"></script>-->
  19 <!--<script type="text/javascript" src="../svg.js"></script>-->
  20 <!--<script type="text/javascript" src="../silverlight.js"></script>-->
  21 <script type="text/javascript">
  22 dojo.require("dojox.gfx");
  23
  24 var ROTATION = 30;
  25
  26 var surface = null, t1, t2, t3, t4, t5;
  27
  28 var placeAnchor = function(surface, x, y){
  29         surface.createLine({x1: x - 2, y1: y, x2: x + 2, y2: y}).setStroke("blue");
  30         surface.createLine({x1: x, y1: y - 2, x2: x, y2: y + 2}).setStroke("blue");
  31 };
  32
  33 var makeText = function(surface, text, font, fill, stroke){
  34         var t = surface.createText(text);
  35         if(font)   t.setFont(font);
  36         if(fill)   t.setFill(fill);
  37         if(stroke) t.setStroke(stroke);
  38         placeAnchor(surface, text.x, text.y);
  39         return t;
  40 };
  41
  42 makeShapes = function(){
  43         surface = dojox.gfx.createSurface("test", 500, 500);
  44         var m = dojox.gfx.matrix;
  45         surface.createLine({x1: 250, y1: 0, x2: 250, y2: 500}).setStroke("green");
  46         t1 = makeText(surface, {x: 250, y: 50, text: "Start", align: "start"},
  47                 {family: "Times", size: "36pt", weight: "bold"}, "black", "red")
  48                 .setTransform(m.rotategAt(ROTATION, 250, 50))
  49                 ;
  50         t2 = makeText(surface, {x: 250, y: 100, text: "Middle", align: "middle"},
  51                 {family: "Symbol", size: "24pt"}, "red", "black")
  52                 .setTransform(m.rotategAt(ROTATION, 250, 100))
  53                 ;
  54         t3 = makeText(surface, {x: 250, y: 150, text: "End", align: "end"},
  55                 {family: "Helvetica", style: "italic", size: "18pt", rotated: true}, "#FF8000")
  56                 .setTransform(m.rotategAt(ROTATION, 250, 150))
  57                 ;
  58         t4 = makeText(surface, {x: 250, y: 200, text: "Define Shuffle Tiff", align: "middle", kerning: true},
  59                 {family: "serif", size: "36pt"}, "black")
  60                 .setTransform(m.rotategAt(0, 250, 200))
  61                 ;
  62         t5 = makeText(surface, {x: 250, y: 250, text: "Define Shuffle Tiff", align: "middle", kerning: false},
  63                 {family: "serif", size: "36pt"}, "black")
  64                 .setTransform(m.rotategAt(0, 250, 250))
  65                 ;
  66 };
  67
  68 getSizes = function(){
  69         var t = [];
  70         dojo.forEach(["t1", "t2", "t3", "t4", "t5"], function(name){
  71                 var node = eval("(" + name + ")");
  72                 t.push(node.getShape().text + " = " + node.getTextWidth());
  73         });
  74         dojo.byId("sizes").innerHTML = t.join("<br/>");
  75 };
  76
  77 dojo.addOnLoad(makeShapes);
  78
  79 </script>
  80 </head>
  81 <body>
  82         <h1>dojox.gfx Text test</h1>
  83 <div id="test" style="width: 500px; height: 500px;"></div>
  84 <div><button onclick="surface.clear();">Clear</button>&nbsp;<button onclick="getSizes();">Get sizes</button></div>
  85 <p id="sizes">&nbsp;</p>
  86 <p>That's all Folks!</p>
  87 </body>
  88 </html>