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

   1 <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
   2 <head>
   3 <title>dojox.gfx: 100 draggable circles</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"></script>
  14 <script type="text/javascript">
  15
  16 dojo.require("dojox.gfx");
  17 dojo.require("dojox.gfx.move");
  18
  19 var container = null,
  20         surface = null,
  21         surface_size = null;
  22
  23 function getRand(from, to){
  24         return Math.random() * (to - from) + from;
  25 }
  26
  27 var skew_stat_factor = 15;
  28
  29 function getRandSkewed(from, to){
  30         // let skew stats to smaller values
  31         var seed = 0;
  32         for(var i = 0; i < skew_stat_factor; ++i){
  33                 seed += Math.random();
  34         }
  35         seed = 2 * Math.abs(seed / skew_stat_factor - 0.5);
  36         return seed * (to - from) + from;
  37 }
  38
  39 function randColor(alpha){
  40         var red   = Math.floor(getRand(0, 255)),
  41                 green = Math.floor(getRand(0, 255)),
  42                 blue  = Math.floor(getRand(0, 255)),
  43                 opacity = alpha ? getRand(0.1, 1) : 1;
  44         return [red, green, blue, opacity];
  45 }
  46
  47 var gShapes = {}
  48 var gShapeCounter = 0;
  49
  50 function makeCircleGrid(itemCount){
  51         var minR = 10, maxR = surface_size.width / 3;
  52         for(var j = 0; j < itemCount; ++j){
  53                 var r = getRandSkewed(minR, maxR),
  54                         cx = getRand(r, surface_size.width  - r),
  55                         cy = getRand(r, surface_size.height - r),
  56                         shape = surface.createCircle({cx: cx, cy: cy, r: r})
  57                                 .setFill(randColor(true))
  58                                 .setStroke({color: randColor(true), width: getRand(0, 3)})
  59                                 ;
  60                 new dojox.gfx.Moveable(shape);
  61         }
  62 }
  63
  64 function initGfx(){
  65         container = dojo.byId("gfx_holder");
  66         surface = dojox.gfx.createSurface(container, 500, 500);
  67         surface_size = {width: 500, height: 500};
  68
  69         makeCircleGrid(100);
  70
  71         // cancel text selection and text dragging
  72         dojo.connect(container, "ondragstart",   dojo, "stopEvent");
  73         dojo.connect(container, "onselectstart", dojo, "stopEvent");
  74 }
  75
  76 dojo.addOnLoad(initGfx);
  77
  78 </script>
  79
  80 <style type="text/css">
  81 .movable { cursor: pointer; }
  82 </style>
  83
  84 </head>
  85 <body>
  86 <h1>dojox.gfx: 100 draggable circles</h1>
  87 <p>Warning: Canvas renderer doesn't implement event handling.</p>
  88 <div id="gfx_holder" style="width: 500px; height: 500px;"></div>
  89 </body>
  90 </html>