jack
/
cocorobolx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!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>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <title>Graphics Basic Elements Demo Page</title>
  <style>
    .type { font-size:14px; font-weight:bold; font-family:arial; background-color:#f7f7f7; text-align:center }
  </style>
  <script type="text/javascript" src="../../base.js"></script>
  <script type="text/javascript">
    goog.require('goog.dom');
    goog.require('goog.graphics');
    goog.require('goog.graphics.Font');
  </script>
  <script type="text/javascript">
    function drawElements() {
      var graphics = goog.graphics.createSimpleGraphics(600, 200);
      // Basic shapes
      var fill = new goog.graphics.SolidFill('yellow');
      var stroke = new goog.graphics.Stroke(2, 'green');

      graphics.drawRect(30, 10, 100, 80, stroke, fill);
      stroke = new goog.graphics.Stroke(4, 'green');

      // Image shapes
      graphics.drawImage(30, 110, 276, 110,
          'http://www.google.com/intl/en_ALL/images/logo.gif');

      graphics.drawCircle(190, 70, 50, stroke, fill);
      stroke = new goog.graphics.Stroke(6, 'green');
      graphics.drawEllipse(300, 140, 80, 40, stroke, fill);

      // A path
      var path = new goog.graphics.Path();
      path.moveTo(320, 30);
      path.lineTo(420, 130);
      path.lineTo(480, 30);
      path.close();
      stroke = new goog.graphics.Stroke(1, 'green');
      graphics.drawPath(path, stroke, fill);

      // Clipped shapes
      var redFill = new goog.graphics.SolidFill('red');
      graphics.drawCircle(540, 10, 50, null, redFill);
      graphics.drawCircle(540, 10, 30, null, fill);
      graphics.drawCircle(560, 210, 30, stroke, fill);
      graphics.drawCircle(560, 210, 45, stroke, null); // No fill
      graphics.drawCircle(600, 90, 30, stroke, fill);

      graphics.render(document.getElementById('shapes'));


      // ---------------------------------------------------------------------


      // Text elements
      graphics = goog.graphics.createGraphics(600, 200);
      fill = new goog.graphics.SolidFill('blue');
      stroke = null;

      var font = new goog.graphics.Font(30, 'Times');
      graphics.drawText('Large Top Center', 0, 0, 600, 200, 'center', null,
          font, stroke, fill);
      font = new goog.graphics.Font(24, 'Times');
      font.bold = true;
      graphics.drawText('In Bold', 0, 30, 600, 200, 'center', null,
          font, stroke, fill);
      font.bold = false;
      font.italic = true;
      graphics.drawText('Italics', 0, 54, 600, 200, 'center', null,
          font, stroke, fill);
      font = new goog.graphics.Font(14, 'Arial');
      graphics.drawText('Top-Left', 0, 0, 600, 200, 'left', null,
          font, stroke, fill);
      graphics.drawText('Top-right', 0, 0, 600, 200, 'right', null,
          font, stroke, fill);
      graphics.drawText('Bottom-right', 0, 0, 600, 200, 'right', 'bottom',
          font, stroke, fill);
      graphics.drawText('Right-Middle', 0, 0, 600, 200, 'right', 'center',
          font, stroke, fill);

      graphics.drawTextOnLine('Going down left', 130, 0, 130, 200, 'left',
          font, stroke, fill);
      graphics.drawTextOnLine('Going down center', 150, 0, 150, 200, 'center',
          font, stroke, fill);
      graphics.drawTextOnLine('Going down right', 170, 0, 170, 200, 'right',
          font, stroke, fill);

      graphics.drawTextOnLine('Going up left', 430, 200, 430, 0, 'left',
          font, stroke, fill);
      graphics.drawTextOnLine('Going up center', 450, 200, 450, 0, 'center',
          font, stroke, fill);
      graphics.drawTextOnLine('Going up right', 470, 200, 470, 0, 'right',
          font, stroke, fill);

      font = new goog.graphics.Font(18, 'Arial');
      graphics.drawTextOnLine('Diagonal text', 200, 180, 400, 60, 'center',
          font, stroke, fill);

      graphics.render(document.getElementById('text'));


      // ---------------------------------------------------------------------


      // Path elements
      graphics = goog.graphics.createSimpleGraphics(600, 200);
      fill = new goog.graphics.SolidFill('yellow');
      stroke = new goog.graphics.Stroke(1, 'black');
      path = new goog.graphics.Path();
      path.moveTo(80, 80);
      path.arc(80, 80, 100, 100, 15, -300, true);
      path.close();
      graphics.drawPath(path, stroke, fill);

      stroke = new goog.graphics.Stroke(3, 'black');
      path = new goog.graphics.Path()
          .moveTo(200, 180)
          .lineTo(230, 100)
          .lineTo(280, 30)
          .lineTo(280, 80)
          .lineTo(200, 90);
      graphics.drawPath(path, stroke, null);

      path = new goog.graphics.Path()
          .moveTo(300, 150)
          .curveTo(370, 0, 420, 200, 500, 150);
      graphics.drawPath(path, stroke, null);

      graphics.render(document.getElementById('paths'));


      // ---------------------------------------------------------------------


      // Colors
      graphics = goog.graphics.createSimpleGraphics(600, 200);
      fill = new goog.graphics.SolidFill('red');
      stroke = new goog.graphics.Stroke(1, 'black');
      graphics.drawRect(30, 10, 100, 80, stroke, fill);

      fill = new goog.graphics.LinearGradient(200, 10, 400, 190,
          '#000080', '#800000');
      graphics.drawRect(200, 10, 200, 180, stroke, fill);

      fill = new goog.graphics.LinearGradient(30, 110, 30, 200,
          '#8080ff', '#000080');
      graphics.drawRect(30, 110, 100, 80, stroke, fill);

      fill = new goog.graphics.SolidFill('blue');
      graphics.drawCircle(500, 60, 40, stroke, fill);
      fill = new goog.graphics.SolidFill('red', 0.5);
      graphics.drawCircle(500, 90, 40, stroke, fill);
      fill = new goog.graphics.SolidFill('green', 0.2);
      graphics.drawCircle(500, 120, 40, stroke, fill);

      graphics.render(document.getElementById('colors'));


      // ---------------------------------------------------------------------


      // Coordinates
      graphics = goog.graphics.createSimpleGraphics(1200, 300, 12000, 3000);

      fill = new goog.graphics.SolidFill('yellow');
      stroke = new goog.graphics.Stroke('3px', 'black');
      path = new goog.graphics.Path();
      path.moveTo(300, 300);
      path.arc(300, 300, 1000, 1000, 15, 60, true);
      path.close();
      graphics.drawPath(path, stroke, fill);

      stroke = new goog.graphics.Stroke(3, 'black');
      path = graphics.createPath()
          .moveTo(2000, 1800)
          .lineTo(2300, 1000)
          .lineTo(2800, 300)
          .lineTo(2800, 800)
          .lineTo(2000, 900);
      graphics.drawPath(path, stroke, null);

      path = new goog.graphics.Path()
          .moveTo(3000, 1500)
          .curveTo(3700, 0, 4200, 2000, 5000, 1500);
      graphics.drawPath(path, stroke, null);

      stroke = new goog.graphics.Stroke(20, 'green');

      graphics.drawRect(5300, 100, 1000, 800, stroke, fill);
      stroke = new goog.graphics.Stroke(4, 'green');

      graphics.drawImage(5300, 1100, 2760, 1100,
          'http://www.google.com/intl/en_ALL/images/logo.gif');

      graphics.drawCircle(6900, 700, 500, stroke, fill);
      stroke = new goog.graphics.Stroke(60, 'green');
      graphics.drawEllipse(8000, 1400, 800, 400, stroke, fill);

      font = new goog.graphics.Font(140, 'Arial');
      fill = new goog.graphics.SolidFill('blue');
      graphics.drawTextOnLine('Going up center', 11000, 2000, 11000, 0,
          'center', font, null, fill);

      graphics.render(document.getElementById('coords'));
    }
  </script>

</head>

<body onload="drawElements()">
  <table border="1">
    <tr valign="top">
      <td class="type">
        Text: fonts, alignment, vertical-alignment, direction
      </td>
      <td class="type">
        Basic shapes: Rectangle, Circle, Ellipses, Path, Clip to canvas
      </td>
    </tr>
    <tr>
      <td>
        <span id="text"></span>
      </td>
      <td>
        <span id="shapes"></span>
      </td>
    </tr>
    <tr valign="top">
      <td class="type">
        Paths: Lines, arcs, curves
      </td>
      <td class="type">
        Colors: solid, gradients, transparency
      </td>
    </tr>
    <tr>
      <td>
        <span id="paths"></span>
      </td>
      <td>
         <span id="colors"></span>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="type">
        Coordinate scaling + stroke types
      </td>
    </tr>
    <tr>
      <td colspan="2" class="type">
        <span id="coords"></span>
      </td>
    </tr>
  </table>
</body>

</html>