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.
48 lines (41 loc) • 1.76 kB
HTML
<html>
<head>
<title>dojox.gfx: Canvas events bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, gfxRenderer:'canvas'">
</script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/dom",
"dojox/gfx",
"dojox/gfx/matrix"
],function(ready, dom, gfx, matrix){
var container = null, surface = null;
ready(function(){
container = dom.byId("gfx_holder");
surface = gfx.createSurface(container, 600, 100);
var g1 = surface.createGroup(), g2 = surface.createGroup();
g1.setTransform(matrix.translate({x: 0,y: 0}));
g1.createRect({x: 0,y: 0,width: 220,height: 56,r: 12}).setFill("#212833");
g1.createImage({x: 0,y: 0,width: 215,height: 53,src: 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'});
g1.connect("onclick", null, function(){alert('Thank you for choosing jQuery')});
g2.setTransform(matrix.translate({x: 300,y: 0}));
g2.createPath("M0 -10l16 0").setStroke({color: 'red',width: 4});
g2.createRect({x: 0,y: 0,width: 220,height: 56,r: 12}).setFill("#212833");
g2.createImage({x: 0,y: 0,width: 123,height: 56,src: 'http://dojotoolkit.org/images/logo.png'});
g2.connect("onclick", null, function(){alert('Thank you for choosing dojo')});
});
});
</script>
</head>
<body>
<h1>dojox.gfx: Canvas events bug (Canvas version)</h1>
<p>
Click on one of the image below. An alert should pop up displaying the chosen framework name.
</p>
<div id="gfx_holder" style="width: 600px; height: 100px;">
</div>
</body>
</html>