chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!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 Advanced Coordinates Demo Page</title>
  <script type="text/javascript" src="../../base.js"></script>
  <script type="text/javascript">
    goog.require('goog.dom');
    goog.require('goog.graphics');
    goog.require('goog.graphics.ext');
  </script>
  <script type="text/javascript">
    var group;

    function drawElements() {
      var graphics = new goog.graphics.ext.Graphics(2000, 2000);

      group = new goog.graphics.ext.Group(graphics);
      group.setLeft(20, true);
      group.setTop(20, true);
      group.setWidth(600, true);
      group.setHeight(200);      

      // Basic shapes
      var fill = new goog.graphics.SolidFill('yellow');
      var stroke = new goog.graphics.Stroke(2, 'green');

      var bg = new goog.graphics.SolidFill('#eeeeee');
      var outline = new goog.graphics.Stroke(1, '#333333');

      var background = new goog.graphics.ext.Rectangle(group);
      background.setLeft(0, true);
      background.setTop(0, true);
      background.setWidth('100%', true);
      background.setHeight('100%');
      background.setStroke(outline);
      background.setFill(bg);

      var rect = new goog.graphics.ext.Rectangle(group);
      rect.setLeft('-5px', true);
      rect.setTop('-5px', true);
      rect.setWidth('10px', true);
      rect.setHeight('10px');
      rect.setStroke(stroke);
      rect.setFill(fill);

      rect = new goog.graphics.ext.Rectangle(group);
      rect.setRight('-5px', true);
      rect.setTop('-5px', true);
      rect.setWidth('10px', true);
      rect.setHeight('10px');
      rect.setStroke(stroke);
      rect.setFill(fill);

      rect = new goog.graphics.ext.Rectangle(group);
      rect.setRight('-5px', true);
      rect.setBottom('-5px', true);
      rect.setWidth('10px', true);
      rect.setHeight('10px');
      rect.setStroke(stroke);
      rect.setFill(fill);

      rect = new goog.graphics.ext.Rectangle(group);
      rect.setLeft('-5px', true);
      rect.setBottom('-5px', true);
      rect.setWidth('10px', true);
      rect.setHeight('10px');
      rect.setStroke(stroke);
      rect.setFill(fill);

      var image = new goog.graphics.ext.Image(group,
          'http://www.google.com/intl/en_ALL/images/logo.gif');
      image.setRight(10, true);
      image.setTop(10, true);
      image.setWidth('276px', true);
      image.setHeight('110px');

      var ellipse = new goog.graphics.ext.Ellipse(group);
      ellipse.setCenter(0, true);
      ellipse.setMiddle(0, true);
      ellipse.setWidth('10%', true);
      ellipse.setHeight('80%');
      ellipse.setStroke(stroke);
      ellipse.setFill(fill);

      ellipse = new goog.graphics.ext.Ellipse(group);
      ellipse.setCenter(0, true);
      ellipse.setMiddle(0, true);      
      ellipse.setWidth(120, true);
      ellipse.setHeight(60);
      ellipse.setStroke(stroke);
      ellipse.setFill(fill);

      var path = new goog.graphics.ext.Path().moveTo(0, 0).lineTo(20, 0).
          lineTo(10, 20).close();

      var shape = new goog.graphics.ext.Shape(group, path);
      shape.setLeft(10, true);
      shape.setTop(10, true);
      shape.setWidth('10%', true);
      shape.setHeight('10%');
      shape.setStroke(stroke);
      shape.setFill(fill);

      shape = new goog.graphics.ext.Shape(group, path, true);
      shape.setLeft(40, true);
      shape.setTop(10, true);
      shape.setWidth('10%', true);
      shape.setHeight('10%');
      shape.setStroke(stroke);
      shape.setFill(fill);

      graphics.render(document.body);
    }
  </script>

</head>

<body onload="drawElements()">
<div style="position: absolute; top: 400px">
  <p>
    W: <input type="text" name="width" value="600"
              onchange="group.setWidth(this.value)">
    H: <input type="text" name="height" value="200"
              onchange="group.setHeight(this.value)">
    R: <input type="text" name="rotation" value="0"
              onchange="group.setRotation(this.value)">
  </p>

  <p>The front ellipse is sized based on absolute units.  The back ellipse is
  sized based on percentage of the parent.</p>
  
</div>
</body>

</html>