wisemapping-open-source/web2d/src/test/javascript/render/line.html

182 lines
8.3 KiB
HTML
Raw Normal View History

2009-06-07 20:59:43 +02:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
2010-11-20 23:43:54 +01:00
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {},
vml: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
2009-06-07 20:59:43 +02:00
<script type="text/javascript" src="utils.js"></script>
2010-11-20 23:43:54 +01:00
<script type="text/javascript">
function initialize(){
web2d.peer.Toolkit.init();
var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'};
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
var rect = new web2d.Rect();
rect.setSize(10, 10);
rect.setStroke(0);
rect.setPosition(250, 5);
strokeWidthWorkspace.appendChild(rect);
for (var i = 0; i <= 10; i++)
{
var line = new web2d.Line();
line.setFrom(5 + (i * 25), 5);
line.setTo(5 + (i * 25), 45);
line.setAttribute('strokeWidth', i + 1);
strokeWidthWorkspace.appendChild(line);
}
strokeWidthWorkspace.appendChild(rect);
strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample"));
var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
for (var i = 0; i < 10; i++)
{
var line = new web2d.Line();
line.setFrom(15 + (i * 25), 5);
line.setTo(3 + (i * 25), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeOpacity', 1 / (i + 1));
line.setAttribute('strokeColor', 'red');
strokeOpacityWorkspace.appendChild(line);
}
strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample"));
var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['solid','dot','dash','dashdot','longdash'];
for (var i = 0; i < styles.length; i++)
{
var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setAttribute('strokeStyle', styles[i]);
strokeStyleWorkspace.appendChild(line);
}
strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample"));
var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron'];
for (var i = 0; i < styles.length; i++)
{
var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setArrowStyle(styles[i]);
strokeArrowWorkspace.appendChild(line);
}
strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample"));
}
</script>
2009-06-07 20:59:43 +02:00
</head>
2010-11-20 23:43:54 +01:00
<body onload="initialize();">
2009-06-07 20:59:43 +02:00
<h1>Lines Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tr>
<td>
Lines.
</td>
<td>
<div id="strokeWidthSample"/>
</td>
</tr>
<tr>
<td>
Lines Opacity.
</td>
<td>
<div id="strokeOpacitySample"/>
</td>
</tr>
<tr>
<td>
Line Styles.
</td>
<td>
<div id="strokeStyleSample"/>
</td>
</tr>
<tr>
<td>
Line Arrows.
</td>
<td>
<div id="strokeArrowSample"/>
</td>
</tr>
</table>
</body>
</html>