aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/graphics/basicelements.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/graphics/basicelements.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/graphics/basicelements.html264
1 files changed, 0 insertions, 264 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/graphics/basicelements.html b/contexts/data/lib/closure-library/closure/goog/demos/graphics/basicelements.html
deleted file mode 100644
index d55645a..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/graphics/basicelements.html
+++ /dev/null
@@ -1,264 +0,0 @@
-<!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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-29 00:11:26 +0000