| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta charset="utf-8"> |
|---|
| 5 | <title>Testing image 5</title> |
|---|
| 6 | <style> |
|---|
| 7 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 8 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 9 | </style> |
|---|
| 10 | <script src="../../../dojo/dojo.js" data-dojo-config="isDebug:1, async: true"></script> |
|---|
| 11 | <script> |
|---|
| 12 | require(["dojox/gfx", "dojox/gfx/matrix", "dojox/gfx/Moveable", "dojo/domReady!"], function(gfx, matrix, Moveable){ |
|---|
| 13 | var surface = gfx.createSurface("test", 800, 600); |
|---|
| 14 | surface.whenLoaded(function(surface){ |
|---|
| 15 | var gridSize = 800, |
|---|
| 16 | gridStep = 50; |
|---|
| 17 | |
|---|
| 18 | for(var i = 0; i <= gridSize; i += gridStep){ |
|---|
| 19 | surface.createLine({ x1: 0, x2: gridSize, y1: i, y2: i }).setStroke("gray"); |
|---|
| 20 | surface.createLine({ y1: 0, y2: gridSize, x1: i, x2: i }).setStroke("gray"); |
|---|
| 21 | } |
|---|
| 22 | |
|---|
| 23 | var rect1 = surface.createRect({ x: 0, y: 0, width: 300, height: 200, r: 5 }).setFill("red").setStroke("black"); |
|---|
| 24 | var img1 = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.jpg"}).setTransform({ dx: 50, dy: 50 }); |
|---|
| 25 | var rect2 = surface.createRect({ x: 100, y: 100, width: 300, height: 200, r: 5 }).setFill("yellow").setStroke("black"); |
|---|
| 26 | var img2 = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.gif"}).setTransform({ dx: 150, dy: 150 }); |
|---|
| 27 | var rect3 = surface.createRect({ x: 200, y: 200, width: 300, height: 200, r: 5 }).setFill("green").setStroke("black"); |
|---|
| 28 | var img3 = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.png"}).setTransform({ dx: 250, dy: 250 }); |
|---|
| 29 | var rect4 = surface.createRect({ x: 300, y: 300, width: 300, height: 200, r: 5 }).setFill("blue").setStroke("black"); |
|---|
| 30 | |
|---|
| 31 | new Moveable(rect1); |
|---|
| 32 | new Moveable(rect2); |
|---|
| 33 | new Moveable(rect3); |
|---|
| 34 | new Moveable(rect4); |
|---|
| 35 | |
|---|
| 36 | new Moveable(img1); |
|---|
| 37 | new Moveable(img2); |
|---|
| 38 | new Moveable(img3); |
|---|
| 39 | }); |
|---|
| 40 | }); |
|---|
| 41 | </script> |
|---|
| 42 | </head> |
|---|
| 43 | <body> |
|---|
| 44 | <h1>dojox.gfx Image opacity and move tests</h1> |
|---|
| 45 | <p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p> |
|---|
| 46 | <div id="test"></div> |
|---|
| 47 | <p>That's how images should look like (light yellow background):</p> |
|---|
| 48 | <p style="background-color: #ffe; padding: 1em; border: 1px solid black;"> |
|---|
| 49 | <img src="images/eugene-sm.jpg"> |
|---|
| 50 | <img src="images/eugene-sm.gif"> |
|---|
| 51 | <img src="images/eugene-sm.png"> |
|---|
| 52 | </p> |
|---|
| 53 | </body> |
|---|
| 54 | </html> |
|---|
