Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,264 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user