diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/gfx/demos/circles.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/gfx/demos/circles.html')
| -rw-r--r-- | includes/js/dojox/gfx/demos/circles.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/circles.html b/includes/js/dojox/gfx/demos/circles.html new file mode 100644 index 0000000..ce4d0cd --- /dev/null +++ b/includes/js/dojox/gfx/demos/circles.html @@ -0,0 +1,90 @@ +<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, + surface = null, + 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)), + green = Math.floor(getRand(0, 255)), + blue = Math.floor(getRand(0, 255)), + 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), + cx = getRand(r, surface_size.width - r), + cy = getRand(r, surface_size.height - r), + 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"); + 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> |