Andreas Hocevar
115 lines
3.1 KiB
HTML
115 lines
3.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Copyright 2007 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<title>Graphics Basic events Demo Page</title>
|
|
|
|
<style class="text/css">
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#log {
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 50%;
|
|
right: 0%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
border: 1px solid #cccccc;
|
|
}
|
|
|
|
#c {
|
|
margin-bottom: 10px;
|
|
font-size: small;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../base.js"></script>
|
|
<script type="text/javascript">
|
|
goog.require('goog.debug.DivConsole');
|
|
goog.require('goog.events');
|
|
goog.require('goog.events.EventType');
|
|
goog.require('goog.graphics');
|
|
goog.require('goog.log');
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<span id="shapes"></span>
|
|
</div>
|
|
|
|
<div>
|
|
<span id="colors"></span>
|
|
</div>
|
|
|
|
<p>
|
|
<a href="javascript:void(logconsole.clear())">Clear Log</a>
|
|
</p>
|
|
|
|
<div id="log"></div>
|
|
|
|
<p> Try to mouse over, mouse out, or click the ellipse and the group of
|
|
circles. The ellipse will be disposed in 10 sec.
|
|
</p>
|
|
|
|
<script type="text/javascript">
|
|
// Set up a logger to track responses
|
|
var log = goog.log.getLogger('Events');
|
|
goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
|
|
var logconsole = new goog.debug.DivConsole(document.getElementById('log'));
|
|
logconsole.setCapturing(true);
|
|
|
|
// A helper function to handle events.
|
|
function handleEvent(elementType) {
|
|
return function(e) {
|
|
log.info(elementType + ' ' + e.type + '.');
|
|
}
|
|
}
|
|
|
|
// The events to catch.
|
|
var events = [goog.events.EventType.MOUSEOVER,
|
|
goog.events.EventType.MOUSEOUT,
|
|
goog.events.EventType.CLICK]
|
|
|
|
// Create an elipse.
|
|
var graphics = goog.graphics.createGraphics(600, 200);
|
|
var fill = new goog.graphics.SolidFill('yellow');
|
|
var stroke = new goog.graphics.Stroke(2, 'green');
|
|
|
|
var elipseElem = graphics.drawEllipse(300, 140, 80, 40, stroke, fill);
|
|
goog.events.listen(elipseElem, events, handleEvent('Ellipse'));
|
|
|
|
|
|
// Create a group of circles.
|
|
stroke = new goog.graphics.Stroke(1, 'black');
|
|
var group = graphics.createGroup();
|
|
goog.events.listen(group, events, handleEvent('Group'));
|
|
|
|
fill = new goog.graphics.SolidFill('blue');
|
|
var blueCircle = graphics.drawCircle(500, 60, 40, stroke, fill, group);
|
|
goog.events.listen(blueCircle, events, handleEvent('Blue-Circle'));
|
|
|
|
fill = new goog.graphics.SolidFill("red", 0.5);
|
|
var redCircle = graphics.drawCircle(500, 90, 40, stroke, fill, group);
|
|
goog.events.listen(redCircle, events, handleEvent('Red-Circle'));
|
|
|
|
fill = new goog.graphics.SolidFill('green', 0.2);
|
|
var greenCircle = graphics.drawCircle(500, 120, 40, stroke, fill, group);
|
|
goog.events.listen(greenCircle, events, handleEvent('Green-Circle'));
|
|
|
|
graphics.render(document.getElementById('shapes'));
|
|
|
|
goog.global.setTimeout(function() {elipseElem.dispose();}, 10000);
|
|
</script>
|
|
</body>
|
|
</html>
|