| New file |
|---|
| 0,0 → 1,92 |
|---|
| <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
| <head> |
| <title>dojox.gfx: 100 draggable circles</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <style type="text/css"> |
| @import "../../../dojo/resources/dojo.css"; |
| @import "../../../dijit/tests/css/dijitTests.css"; |
| </style> |
| <!-- |
| The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
| <script type="text/javascript" src="Silverlight.js"></script> |
| --> |
| <script type="text/javascript" src="../../../dojo/dojo.js"></script> |
| <script type="text/javascript"> |
| |
| dojo.require("dojox.gfx"); |
| dojo.require("dojox.gfx.move"); |
| |
| var container = null; |
| var container_position = null; |
| var surface = null; |
| var surface_size = null; |
| |
| function getRand(from, to){ |
| return Math.random() * (to - from) + from; |
| } |
| |
| var skew_stat_factor = 15; |
| |
| function getRandSkewed(from, to){ |
| // let skew stats to smaller values |
| var seed = 0; |
| for(var i = 0; i < skew_stat_factor; ++i){ |
| seed += Math.random(); |
| } |
| seed = 2 * Math.abs(seed / skew_stat_factor - 0.5); |
| return seed * (to - from) + from; |
| } |
| |
| function randColor(alpha){ |
| var red = Math.floor(getRand(0, 255)); |
| var green = Math.floor(getRand(0, 255)); |
| var blue = Math.floor(getRand(0, 255)); |
| var opacity = alpha ? getRand(0.1, 1) : 1; |
| return [red, green, blue, opacity]; |
| } |
| |
| var gShapes = {} |
| var gShapeCounter = 0; |
| |
| function makeCircleGrid(itemCount){ |
| var minR = 10, maxR = surface_size.width / 3; |
| for(var j = 0; j < itemCount; ++j){ |
| var r = getRandSkewed(minR, maxR); |
| var cx = getRand(r, surface_size.width - r); |
| var cy = getRand(r, surface_size.height - r); |
| var shape = surface.createCircle({cx: cx, cy: cy, r: r}) |
| .setFill(randColor(true)) |
| .setStroke({color: randColor(true), width: getRand(0, 3)}) |
| ; |
| new dojox.gfx.Moveable(shape); |
| } |
| } |
| |
| function initGfx(){ |
| container = dojo.byId("gfx_holder"); |
| container_position = dojo.coords(container, true); |
| surface = dojox.gfx.createSurface(container, 500, 500); |
| surface_size = {width: 500, height: 500}; |
| |
| makeCircleGrid(100); |
| |
| // cancel text selection and text dragging |
| dojo.connect(container, "ondragstart", dojo, "stopEvent"); |
| dojo.connect(container, "onselectstart", dojo, "stopEvent"); |
| } |
| |
| dojo.addOnLoad(initGfx); |
| |
| </script> |
| |
| <style type="text/css"> |
| .movable { cursor: pointer; } |
| </style> |
| |
| </head> |
| <body> |
| <h1>dojox.gfx: 100 draggable circles</h1> |
| <p>Warning: Canvas renderer doesn't implement event handling.</p> |
| <div id="gfx_holder" style="width: 500px; height: 500px;"></div> |
| </body> |
| </html> |