ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding mapbox-gl branch

Browse Source
This commit is contained in:
Andreas Hocevar
2015-03-16 18:50:27 +01:00
parent 7985f030fa
commit 57ee7f52fd
3109 changed files with 943365 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mapbox-gl/closure-library/closure/goog/demos/graphics/advancedcoordinates.html
+141
View File
@@ -0,0 +1,141 @@
<!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>
mapbox-gl/closure-library/closure/goog/demos/graphics/advancedcoordinates2.html
+130
View File
@@ -0,0 +1,130 @@
<!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 -
Using Percentage Based Surface Size</title>
<style type="text/css">
html, body {
height: 100%;
}
</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.ext');
</script>
</head>
<body>
<script type="text/javascript">
var graphics = new goog.graphics.ext.Graphics('100%', '100%', 1000, 1000);
graphics.setCoordOrigin(320, 0);
var 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>
</body>
</html>
mapbox-gl/closure-library/closure/goog/demos/graphics/basicelements.html
+264
View File
@@ -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>
mapbox-gl/closure-library/closure/goog/demos/graphics/events.html
+114
View File
@@ -0,0 +1,114 @@
<!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 Basic events Demo Page</title>
<style class="text/css">
html, body {
width: 100%;
height: 100%;
overflow:hidden;
}
#log {
position: absolute;
top: 0px;
width: 50%;
right: 0%;
height: 100%;
overflow: auto;
border: 1px solid #cccccc;
}
#c {
margin-bottom: 10px;
font-size: small;
}
</style>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">
goog.require('goog.debug.DivConsole');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.graphics');
goog.require('goog.log');
</script>
</head>
<body>
<div>
<span id="shapes"></span>
</div>
<div>
<span id="colors"></span>
</div>
<p>
<a href="javascript:void(logconsole.clear())">Clear Log</a>
</p>
<div id="log"></div>
<p> Try to mouse over, mouse out, or click the ellipse and the group of
circles. The ellipse will be disposed in 10 sec.
</p>
<script type="text/javascript">
// Set up a logger to track responses
var log = goog.log.getLogger('Events');
goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
var logconsole = new goog.debug.DivConsole(document.getElementById('log'));
logconsole.setCapturing(true);
// A helper function to handle events.
function handleEvent(elementType) {
return function(e) {
log.info(elementType + ' ' + e.type + '.');
}
}
// The events to catch.
var events = [goog.events.EventType.MOUSEOVER,
goog.events.EventType.MOUSEOUT,
goog.events.EventType.CLICK]
// Create an elipse.
var graphics = goog.graphics.createGraphics(600, 200);
var fill = new goog.graphics.SolidFill('yellow');
var stroke = new goog.graphics.Stroke(2, 'green');
var elipseElem = graphics.drawEllipse(300, 140, 80, 40, stroke, fill);
goog.events.listen(elipseElem, events, handleEvent('Ellipse'));
// Create a group of circles.
stroke = new goog.graphics.Stroke(1, 'black');
var group = graphics.createGroup();
goog.events.listen(group, events, handleEvent('Group'));
fill = new goog.graphics.SolidFill('blue');
var blueCircle = graphics.drawCircle(500, 60, 40, stroke, fill, group);
goog.events.listen(blueCircle, events, handleEvent('Blue-Circle'));
fill = new goog.graphics.SolidFill("red", 0.5);
var redCircle = graphics.drawCircle(500, 90, 40, stroke, fill, group);
goog.events.listen(redCircle, events, handleEvent('Red-Circle'));
fill = new goog.graphics.SolidFill('green', 0.2);
var greenCircle = graphics.drawCircle(500, 120, 40, stroke, fill, group);
goog.events.listen(greenCircle, events, handleEvent('Green-Circle'));
graphics.render(document.getElementById('shapes'));
goog.global.setTimeout(function() {elipseElem.dispose();}, 10000);
</script>
</body>
</html>
mapbox-gl/closure-library/closure/goog/demos/graphics/modifyelements.html
+195
View File
@@ -0,0 +1,195 @@
<!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>Modifing Graphic Elements Demo</title>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">
goog.require('goog.dom');
goog.require('goog.graphics');
</script>
<script type="text/javascript">
/**
* A rectangle, returned from graphics.drawRect.
* @type goog.graphics.RectElement.
*/
var rectElement;
/**
* An ellipse, returned from graphics.drawEllipse.
* @type goog.graphics.EllipseElement.
*/
var ellipseElement;
/**
* A path element, returned from graphics.drawPath.
* @type goog.graphics.PathElement.
*/
var pathElement;
/**
* A text element, returned from graphics.drawText
* @type goog.graphics.PathElement.
*/
var textElement;
var graphics, fill, stroke, font;
var rectColor = [];
var pathData1, pathData2;
function setupElements() {
graphics = goog.graphics.createGraphics(600, 200);
fill = new goog.graphics.SolidFill('yellow');
stroke = new goog.graphics.Stroke(2, 'green');
font = new goog.graphics.Font(26, 'Arial');
rectColor.push({s: stroke, f: fill});
rectColor.push({s: new goog.graphics.Stroke(4, 'blue'),
f: new goog.graphics.SolidFill('red')});
rectColor.push({s: null, f: new goog.graphics.SolidFill('#c0c0c0')});
rectColor.push({s: new goog.graphics.Stroke(0.5, 'red'), f: null});
var gradient = new goog.graphics.LinearGradient(0, 0, 0, 300, '#8080ff',
'#000080');
rectColor.push({s: new goog.graphics.Stroke(1, 'black'), f: gradient});
drawElements();
graphics.render(document.getElementById('shapes'));
}
function drawElements() {
rectElement = graphics.drawRect(30, 10, 100, 80, stroke, fill);
ellipseElement = graphics.drawEllipse(400, 150, 100, 40, stroke, fill);
pathData1 = graphics.createPath()
.moveTo(200, 180)
.lineTo(230, 100)
.lineTo(280, 30)
.lineTo(280, 80)
.lineTo(200, 90);
pathData2 = graphics.createPath()
.moveTo(200, 180)
.curveTo(220, 50, 260, 180, 280, 30);
pathElement = graphics.drawPath(pathData1, stroke, null);
textElement = graphics.drawTextOnLine(
document.getElementById('text').value,
0, 20, 590, 20, 'right', font, stroke, fill);
}
function setRectColors(index) {
var c = rectColor[index];
rectElement.setFill(c.f);
rectElement.setStroke(c.s);
ellipseElement.setFill(c.f);
ellipseElement.setStroke(c.s);
pathElement.setStroke(c.s);
textElement.setStroke(c.s);
textElement.setFill(c.f);
}
function setRectPosition(x, y) {
rectElement.setPosition(x, y);
}
function setRectSize(width, height) {
rectElement.setSize(width, height);
}
function setEllipseCenter(cx, cy) {
ellipseElement.setCenter(cx, cy);
}
function setEllipseRadius(rx, ry) {
ellipseElement.setRadius(rx, ry);
}
function setPath(i) {
pathElement.setPath(i == 1 ? pathData1 : pathData2);
}
function setText() {
textElement.setText(document.getElementById('text').value);
}
</script>
</head>
<body onload="setupElements()">
<div id="shapes"
style="border:1px solid black; width:600px; height:200px;"></div>
<table>
<tr valign="top">
<td>Colors (stroke/fill):</td>
<td>
<input type="button" value="Green(2):yellow" onclick="setRectColors(0)">
<input type="button" value="Blue(4):red" onclick="setRectColors(1)">
<input type="button" value="null:#c0c0c0" onclick="setRectColors(2)">
<input type="button" value="Red(0.5):null" onclick="setRectColors(3)">
<input type="button" value="Gradient" onclick="setRectColors(4)">
</td>
</tr>
<tr valign="top">
<td>Rectangle position:</td>
<td>
<input type="button" value="30,30" onclick="setRectPosition(30, 10)">
<input type="button" value="200,20" onclick="setRectPosition(200, 20)">
<input type="button" value="0,60" onclick="setRectPosition(0, 60)">
</td>
</tr>
<tr valign="top">
<td>Rectangle size:</td>
<td>
<input type="button" value="100,80" onclick="setRectSize(100, 80)">
<input type="button" value="120,120" onclick="setRectSize(120, 120)">
<input type="button" value="40,60" onclick="setRectSize(40, 60)">
</td>
</tr>
<tr valign="top">
<td>Ellipse center:</td>
<td>
<input type="button" value="400,150"
onclick="setEllipseCenter(400, 150)">
<input type="button" value="200,80"
onclick="setEllipseCenter(200, 80)">
<input type="button" value="350,200"
onclick="setEllipseCenter(350, 200)">
</td>
</tr>
<tr valign="top">
<td>Ellipse radius:</td>
<td>
<input type="button" value="100,40" onclick="setEllipseRadius(100, 40)">
<input type="button" value="80,80" onclick="setEllipseRadius(80, 80)">
<input type="button" value="40,60" onclick="setEllipseRadius(40, 60)">
</td>
</tr>
<tr valign="top">
<td>Path:</td>
<td>
<input type="button" value="Line" onclick="setPath(1)">
<input type="button" value="Curve" onclick="setPath(2)">
</td>
</tr>
<tr valign="top">
<td>Text:</td>
<td>
<input type="text" id="text" value="Text Sample" onkeyup="setText()"
onchange="setText()" size="20">
</td>
</tr>
<tr valign="top">
<td colspan="2">
<input type="button" value="Clear Surface" onclick="graphics.clear()">
<input type="button" value="Redraw Elements"
onclick="graphics.clear(); drawElements()">
</td>
</tr>
</table>
</body>
</html>
mapbox-gl/closure-library/closure/goog/demos/graphics/subpixel.html
+80
View File
@@ -0,0 +1,80 @@
<!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>Sub pixel rendering</title>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">
goog.require('goog.dom');
goog.require('goog.graphics');
</script>
<script type="text/javascript">
function testLineWidth() {
var graphics = goog.graphics.createGraphics(100, 100);
// vertical line
for (var i = 0; i < 100; i++) {
var stroke = new goog.graphics.Stroke(i / 100, 'black');
var path = graphics.createPath();
path.moveTo(49.5, i);
path.lineTo(49.5, i + 1);
path.close();
graphics.drawPath(path, stroke, null);
}
// horizontal line
for (var i = 0; i < 100; i++) {
var stroke = new goog.graphics.Stroke(i / 100, 'black');
var path = graphics.createPath();
path.moveTo(i, 49.5);
path.lineTo(i + 1, 49.5);
path.close();
graphics.drawPath(path, stroke, null);
}
graphics.render();
}
function testLinePos() {
var graphics = goog.graphics.createGraphics(100, 100);
var stroke = new goog.graphics.Stroke(1, 'black');
// vertical line
for (var i = 0; i < 100; i++) {
var path = graphics.createPath();
path.moveTo(49 + i / 100, i);
path.lineTo(49 + i / 100, i + 1);
path.close();
graphics.drawPath(path, stroke, null);
}
// horizontal line
for (var i = 0; i < 100; i++) {
var path = graphics.createPath();
path.moveTo(i, 49.5 + i / 100);
path.lineTo(i + 1, 49.5 + i / 100);
path.close();
graphics.drawPath(path, stroke, null);
}
graphics.render();
}
</script>
</head>
<body>
<script>
testLineWidth();
document.write('<br>');
testLinePos();
</script>
</body>
</html>
mapbox-gl/closure-library/closure/goog/demos/graphics/tiger.html
+105
View File
@@ -0,0 +1,105 @@
<!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>The SVG tiger drawn with goog.graphics</title>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">
goog.require('goog.dom');
goog.require('goog.graphics');
</script>
<script src="tigerdata.js"></script>
<script type="text/javascript">
function drawTiger() {
var graphics = goog.graphics.createGraphics(600, 600);
var fills = {};
var strokes = {};
var segmentFunctions = {
'z': goog.graphics.Path.prototype.close,
'M': goog.graphics.Path.prototype.moveTo,
'L': goog.graphics.Path.prototype.lineTo,
'C': goog.graphics.Path.prototype.curveTo
};
function createPath(stroke, fill, paths) {
var fillObject;
if (fill == null) {
fillObject = null;
} else if (fill in fills) {
fillObject = fills[fill];
} else {
fillObject = new goog.graphics.SolidFill(fill);
fills[fill] = fillObject;
}
var strokeObject;
if (stroke == null) {
strokeObject = null;
} else {
var strokeKey;
if (typeof stroke == 'string') {
strokeKey = stroke;
} else {
strokeKey = stroke.c + stroke.w;
}
if (strokeKey in strokes) {
strokeObject = strokes[strokeKey];
} else if (typeof stroke == 'string') {
strokeObject = null;
} else {
strokeObject = new goog.graphics.Stroke(stroke.w, stroke.c);
}
}
strokes[strokeKey] = strokeObject;
var pathObject = graphics.createPath();
for (var i = 0, path; path = paths[i]; i++) {
segmentFunctions[path.t].apply(pathObject, path.p);
}
graphics.drawPath(pathObject, strokeObject, fillObject);
}
var d0 = new Date;
for (var i = 0; i < tigerData.length; i++) {
var d = tigerData[i];
createPath(d.s, d.f, d.p);
}
graphics.render(goog.dom.getElement('tiger-container'));
var d1 = new Date;
goog.dom.setTextContent(goog.dom.getElement('out'),
'Creating took: ' + (d1 - d0));
window.setTimeout(function() {
var d2 = new Date;
goog.dom.setTextContent(goog.dom.getElement('out-2'),
'Drawing took: ' + (d2 - d1));
}, 1);
}
</script>
</head>
<body>
<div id="tiger-container" style='border:1px solid black;width:600px;height:600px'></div>
<div id="out"></div>
<div id="out-2"></div>
<script>
drawTiger();
</script>
</body>
</html>
mapbox-gl/closure-library/closure/goog/demos/graphics/tigerdata.js
+2841
View File
File diff suppressed because it is too large Load Diff