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