New file |
0,0 → 1,123 |
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
<head> |
<title>Create DojoX GFX JSON</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"; |
td.cell { padding: 1em 1em 0em 0em; } |
</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.utils"); |
|
surface = null; |
grid_size = 500; |
grid_step = 50; |
|
init = function(){ |
// initialize graphics |
var container = dojo.byId("gfx"); |
surface = dojox.gfx.createSurface(container, 500, 500); |
// create a picture |
|
// make a grid |
var grid = surface.createGroup(); |
for(var i = 0; i <= grid_size; i += grid_step){ |
grid.createLine({x1: 0, x2: grid_size, y1: i, y2: i}).setStroke("black"); |
grid.createLine({y1: 0, y2: grid_size, x1: i, x2: i}).setStroke("black"); |
} |
|
// make a checkerboard |
var board = surface.createGroup(), gs2 = grid_step * 2; |
for(var i = 0; i < grid_size; i += grid_step){ |
for(var j = 0; j < grid_size; j += grid_step){ |
if(i % gs2 == j % gs2) { |
board.createRect({x: i, y: j, width: grid_step, height: grid_step}).setFill([255, 0, 0, 0.1]); |
} |
} |
} |
|
// draw test_transform shapes |
var g1 = surface.createGroup(); |
var r1 = g1.createShape({type: "rect", x: 200, y: 200}) |
.setFill("green") |
.setStroke({}) |
; |
var r2 = surface.createShape({type: "rect"}).setStroke({}) |
.setFill({type: "linear", to: {x: 50, y: 100}, |
colors: [{offset: 0, color: "green"}, {offset: 0.5, color: "red"}, {offset: 1, color: "blue"}] }) |
.setTransform({dx: 100, dy: 100}) |
; |
var r3 = surface.createRect().setStroke({}) |
.setFill({ type: "linear" }) |
; |
var r4 = g1.createShape({type: "rect"}) |
.setFill("blue") |
.setTransform([dojox.gfx.matrix.rotategAt(-30, 350, 250), { dx: 300, dy: 200 }]) |
; |
var p1 = g1.createShape({type: "path"}) |
.setStroke({}) |
.moveTo(300, 100) |
.lineTo(400, 200) |
.lineTo(400, 300) |
.lineTo(300, 400) |
.curveTo(400, 300, 400, 200, 300, 100) |
.setTransform({}) |
; |
var p2 = g1.createShape(p1.getShape()) |
.setStroke({color: "red", width: 2}) |
.setTransform({dx: 100}) |
; |
var p3 = g1.createShape({type: "path"}) |
.setStroke({color: "blue", width: 2}) |
.moveTo(300, 100) |
.setAbsoluteMode(false) |
.lineTo ( 100, 100) |
.lineTo ( 0, 100) |
.lineTo (-100, 100) |
.curveTo( 100, -100, 100, -200, 0, -300) |
//.setTransform(dojox.gfx.matrix.rotategAt(135, 250, 250)) |
.setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) |
; |
g1.moveToFront(); |
g1.setTransform(dojox.gfx.matrix.rotategAt(-15, 250, 250)); |
|
// dump everything |
dump(); |
}; |
|
dump = function(){ |
var objects = dojox.gfx.utils.serialize(surface); |
// name top-level objects |
for(var i = 0; i < objects.length; ++i){ |
objects[i].name = "shape" + i; |
} |
// format and show |
dojo.byId("io").value = dojo.toJson(objects, dojo.byId("pprint").checked); |
}; |
|
dojo.addOnLoad(init); |
</script> |
</head> |
<body> |
<h1>Create DojoX GFX JSON</h1> |
<p>This is a helper file, which serves as a template to generate static pictures.</p> |
<table> |
<tr> |
<td align="left" valign="top" class="cell"> |
<div id="gfx" style="width: 500px; height: 500px; border: solid 1px black;"> |
</div> |
</td> |
</tr> |
</table> |
<p><textarea id="io" cols="80" rows="10" wrap="off"></textarea></p> |
<p><button onclick="dump()">Dump!</button> |
<input type="checkbox" id="pprint" checked="checked" /> <label for="pprint">Pretty-print JSON</label></p> |
</body> |
</html> |