You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.2 KiB
83 lines
2.2 KiB
<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> |
|
<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]; |
|
} |
|
|
|
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>
|
|
|