diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/graphics/modifyelements.html')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/graphics/modifyelements.html | 195 |
1 files changed, 0 insertions, 195 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/graphics/modifyelements.html b/contexts/data/lib/closure-library/closure/goog/demos/graphics/modifyelements.html deleted file mode 100644 index 1d21c58..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/graphics/modifyelements.html +++ /dev/null @@ -1,195 +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>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> |