chao
/
mini_cocopi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!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>