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.
54 lines
2.2 KiB
54 lines
2.2 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Testing image 5</title> |
|
<style> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
</style> |
|
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug:1, async: true"></script> |
|
<script> |
|
require(["dojox/gfx", "dojox/gfx/matrix", "dojox/gfx/Moveable", "dojo/domReady!"], function(gfx, matrix, Moveable){ |
|
var surface = gfx.createSurface("test", 800, 600); |
|
surface.whenLoaded(function(surface){ |
|
var gridSize = 800, |
|
gridStep = 50; |
|
|
|
for(var i = 0; i <= gridSize; i += gridStep){ |
|
surface.createLine({ x1: 0, x2: gridSize, y1: i, y2: i }).setStroke("gray"); |
|
surface.createLine({ y1: 0, y2: gridSize, x1: i, x2: i }).setStroke("gray"); |
|
} |
|
|
|
var rect1 = surface.createRect({ x: 0, y: 0, width: 300, height: 200, r: 5 }).setFill("red").setStroke("black"); |
|
var img1 = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.jpg"}).setTransform({ dx: 50, dy: 50 }); |
|
var rect2 = surface.createRect({ x: 100, y: 100, width: 300, height: 200, r: 5 }).setFill("yellow").setStroke("black"); |
|
var img2 = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.gif"}).setTransform({ dx: 150, dy: 150 }); |
|
var rect3 = surface.createRect({ x: 200, y: 200, width: 300, height: 200, r: 5 }).setFill("green").setStroke("black"); |
|
var img3 = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.png"}).setTransform({ dx: 250, dy: 250 }); |
|
var rect4 = surface.createRect({ x: 300, y: 300, width: 300, height: 200, r: 5 }).setFill("blue").setStroke("black"); |
|
|
|
new Moveable(rect1); |
|
new Moveable(rect2); |
|
new Moveable(rect3); |
|
new Moveable(rect4); |
|
|
|
new Moveable(img1); |
|
new Moveable(img2); |
|
new Moveable(img3); |
|
}); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<h1>dojox.gfx Image opacity and move tests</h1> |
|
<p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p> |
|
<div id="test"></div> |
|
<p>That's how images should look like (light yellow background):</p> |
|
<p style="background-color: #ffe; padding: 1em; border: 1px solid black;"> |
|
<img src="images/eugene-sm.jpg"> |
|
<img src="images/eugene-sm.gif"> |
|
<img src="images/eugene-sm.png"> |
|
</p> |
|
</body> |
|
</html>
|
|
|