Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/test_transform.html
+++ b/master/examples/test_transform.html
@@ -0,0 +1,99 @@
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
+<head>
+<title>Dojo Unified 2D Graphics</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>
+<!-- SVGWEB { -->
+<meta name="svg.render.forceflash" content="true"/>
+<script src="svgweb/src/svg.js" data-path="svgweb/src"></script>
+<script src="../../../../dojo/dojo.js" djConfig="isDebug:true,forceGfxRenderer:'svg'" type="text/javascript"></script>
+<!-- } -->
+<script type="text/javascript">
+dojo.require("dojox.gfx");
+
+makeShapes = function(){
+	var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500);
+	/* SVGWEB { */
+	surface.whenLoaded(function() {
+	var g1 = surface.createGroup();
+	// make a checkerboard
+	for(var i = 0; i < 500; i += 100){
+		for(var j = 0; j < 500; j += 100){
+			if(i % 200 == j % 200) {
+				surface.createRect({x: i, y: j}).setFill([255, 0, 0, 0.1]);
+			}
+		}
+	}
+	var r1 = g1.createShape({type: "rect", x: 200, y: 200})
+				.setFill("green")
+				.setStroke({})
+				//.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250))
+				;
+	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" })
+				//.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250))
+				;
+	var r4 = g1.createShape({type: "rect"})
+				.setFill("blue")
+				//.setStroke({})
+				//.setTransform(dojox.gfx.matrix.rotategAt(-45, 350, 250))
+				.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(dojox.gfx.matrix.rotategAt(-45, 250, 250))
+				.setTransform({})
+				;
+	var p2 = g1.createShape(p1.getShape())
+				.setStroke({color: "red", width: 2})
+				//.moveTo( 300, 100 )
+				//.lineTo( 400, 200 )
+				//.lineTo( 400, 300 )
+				//.lineTo( 300, 400 )
+				//.curveTo( 400, 300, 400, 200, 300, 100 )
+				//.setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250))
+				.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.setTransform({dx: 100});
+	g1.moveToFront();
+	g1.setTransform(dojox.gfx.matrix.rotategAt(-15, 250, 250));
+	//g1.setTransform([dojox.gfx.matrix.rotategAt(-45, 250, 250), dojox.gfx.matrix.scaleAt(0.5, 250, 250)]);
+	//g1.setTransform([dojox.gfx.matrix.scaleAt(2, 1, 250, 250), dojox.gfx.matrix.rotategAt(-45, 250, 250)]);
+	});
+	/* } */
+};
+
+dojo.addOnLoad(makeShapes);
+
+</script>
+</head>
+<body>
+<h1>dojox.gfx Transform test</h1>
+<div id="test"></div>
+<p>That's all Folks!</p>
+</body>
+</html>