dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
55 lines (50 loc) • 2.28 kB
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>