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

   1 <html>
   2 <head>
   3 <title>Testing textpath</title>
   4 <style type="text/css">
   5         @import "../../../dojo/resources/dojo.css";
   6         @import "../../../dijit/tests/css/dijitTests.css";
   7 </style>
   8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   9 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
  10 <!--
  11 <script type="text/javascript" src="../common.js"></script>
  12 <script type="text/javascript" src="../shape.js"></script>
  13 <script type="text/javascript" src="../path.js"></script>
  14 -->
  15 <!--<script type="text/javascript" src="../vml.js"></script>-->
  16 <!--<script type="text/javascript" src="../svg.js"></script>-->
  17 <script type="text/javascript">
  18 dojo.require("dojox.gfx");
  19
  20 var CPD = 30;
  21
  22 var surface = null;
  23
  24 var makeText = function(surface, text, font, fill, stroke){
  25         var t = surface.createText(text);
  26         if(font)   t.setFont(font);
  27         if(fill)   t.setFill(fill);
  28         if(stroke) t.setStroke(stroke);
  29         placeAnchor(surface, text.x, text.y);
  30         return t;
  31 };
  32
  33 makeShapes = function(){
  34         surface = dojox.gfx.createSurface("test", 500, 500);
  35         var p = surface.createPath({})
  36                 .setStroke("green")
  37                 .moveTo(0, 100)
  38                 .setAbsoluteMode(false)
  39                 .curveTo(CPD, 0, 100 - CPD,  300, 100,  300)
  40                 .curveTo(CPD, 0, 100 - CPD, -300, 100, -300)
  41                 .curveTo(CPD, 0, 100 - CPD,  300, 100,  300)
  42                 .curveTo(CPD, 0, 100 - CPD, -300, 100, -300)
  43                 .curveTo(CPD, 0, 100 - CPD,  300, 100,  300)
  44                 ;
  45         console.debug(p);
  46         var t = surface.createTextPath({
  47                         text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. " +
  48                                         "In malesuada ultricies velit. Vestibulum tempor odio vitae diam. " +
  49                                         "Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam."
  50                         , align: "middle"
  51                         //, rotated: true
  52                 })
  53                 //.setShape(p.shape)
  54                 .moveTo(0, 100)
  55                 .setAbsoluteMode(false)
  56                 .curveTo(CPD, 0, 100 - CPD,  300, 100,  300)
  57                 .curveTo(CPD, 0, 100 - CPD, -300, 100, -300)
  58                 .curveTo(CPD, 0, 100 - CPD,  300, 100,  300)
  59                 .curveTo(CPD, 0, 100 - CPD, -300, 100, -300)
  60                 .curveTo(CPD, 0, 100 - CPD,  300, 100,  300)
  61                 .setFont({family: "times", size: "12pt"})
  62                 .setFill("blue")
  63                 ;
  64         console.debug(t);
  65 };
  66
  67 dojo.addOnLoad(makeShapes);
  68
  69 </script>
  70 </head>
  71 <body>
  72         <h1>dojox.gfx Text on a Path test</h1>
  73 <div id="test" style="width: 500px; height: 500px;"></div>
  74 <p>That's all Folks!</p>
  75 </body>
  76 </html>