accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
197 lines (176 loc) • 6.22 kB
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');
goog.require('goog.graphics.Font');
</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>