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>
|
2012-04-02 00:41:19 +02:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
web2d = {
|
|
|
|
|
peer: {}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
web2d.peer =
|
|
|
|
|
{
|
|
|
|
|
svg: {}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
web2d.peer.utils = {};
|
|
|
|
|
</script>
|
|
|
|
|
|
2014-02-17 14:11:58 +01:00
|
|
|
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
|
2014-03-05 00:47:23 +01:00
|
|
|
<script type="text/javascript" src="../jquery-2.1.0.js"></script>
|
|
|
|
|
|
2012-04-02 00:41:19 +02:00
|
|
|
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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/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/Line.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/Group.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/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/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/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="utils.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
function initialize() {
|
|
|
|
|
web2d.peer.Toolkit.init();
|
|
|
|
|
|
|
|
|
|
var strokeStyleTest = function () {
|
|
|
|
|
function builder(parent, scale, strokeWidth) {
|
|
|
|
|
var rectSize = scale * 80;
|
|
|
|
|
var yPosition = 10 * scale;
|
|
|
|
|
|
|
|
|
|
var xPosition = 10 * scale;
|
|
|
|
|
var rect = new web2d.Rect();
|
|
|
|
|
rect.setSize(rectSize, rectSize);
|
|
|
|
|
rect.setPosition(xPosition, yPosition);
|
|
|
|
|
rect.setFill('yellow');
|
|
|
|
|
rect.setStroke(1, 'solid', 'black');
|
2014-03-05 00:47:23 +01:00
|
|
|
parent.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
xPosition = xPosition + 90 * scale;
|
|
|
|
|
rect = new web2d.Rect();
|
|
|
|
|
rect.setSize(rectSize, rectSize);
|
|
|
|
|
rect.setPosition(xPosition, yPosition);
|
|
|
|
|
rect.setFill('yellow');
|
|
|
|
|
rect.setStroke(strokeWidth, 'dot', 'black');
|
2014-03-05 00:47:23 +01:00
|
|
|
parent.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
xPosition = xPosition + 90 * scale;
|
|
|
|
|
rect = new web2d.Rect();
|
|
|
|
|
rect.setSize(rectSize, rectSize);
|
|
|
|
|
rect.setPosition(xPosition, yPosition);
|
|
|
|
|
rect.setFill('yellow');
|
|
|
|
|
rect.setStroke(strokeWidth, 'dash', 'black');
|
2014-03-05 00:47:23 +01:00
|
|
|
parent.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
xPosition = xPosition + 90 * scale;
|
|
|
|
|
rect = new web2d.Rect();
|
|
|
|
|
rect.setSize(rectSize, rectSize);
|
|
|
|
|
rect.setPosition(xPosition, yPosition);
|
|
|
|
|
rect.setFill('yellow');
|
|
|
|
|
rect.setStroke(strokeWidth, 'longdash', 'black');
|
2014-03-05 00:47:23 +01:00
|
|
|
parent.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
xPosition = xPosition + 90 * scale;
|
|
|
|
|
rect = new web2d.Rect();
|
|
|
|
|
rect.setSize(rectSize, rectSize);
|
|
|
|
|
rect.setPosition(xPosition, yPosition);
|
|
|
|
|
rect.setFill('yellow');
|
|
|
|
|
rect.setStroke(strokeWidth, 'dashdot', 'black');
|
2014-03-05 00:47:23 +01:00
|
|
|
parent.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Workspace with default scale ...
|
|
|
|
|
var workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(500, 100);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
builder(workspace, 1, 1);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#strokeStyle'));
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
// Workspace with modified scale ...
|
|
|
|
|
workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(5000, 1000);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
builder(workspace, 10, 1);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#strokeStyleGroup'));
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
// Workspace with default scale ...
|
|
|
|
|
workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(500, 100);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
builder(workspace, 1, 5);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#strokeStyleWidth'));
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
strokeStyleTest();
|
|
|
|
|
|
|
|
|
|
var strokeOpacityTest = function () {
|
|
|
|
|
var workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(500, 100);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
|
|
|
|
|
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
|
|
|
|
strokeColor:'black',strokeStyle:'solid',strokeWidth:1});
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(20, 20);
|
|
|
|
|
rect.setAttribute("strokeOpacity", 1);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(120, 20);
|
|
|
|
|
rect.setAttribute("strokeOpacity", 0.5);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(220, 20);
|
|
|
|
|
rect.setAttribute("strokeOpacity", 0.3);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(320, 20);
|
|
|
|
|
rect.setAttribute("strokeOpacity", 0);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#strokeOpacity'));
|
2012-04-02 00:41:19 +02:00
|
|
|
};
|
|
|
|
|
strokeOpacityTest();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var fillOpacityTest = function () {
|
|
|
|
|
var workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(500, 100);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
|
|
|
|
|
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
|
|
|
|
strokeColor:'black',strokeStyle:'solid',strokeWidth:4});
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(20, 20);
|
|
|
|
|
rect.setAttribute("fillOpacity", 1);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(120, 20);
|
|
|
|
|
rect.setAttribute("fillOpacity", 0.5);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(220, 20);
|
|
|
|
|
rect.setAttribute("fillOpacity", 0.3);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(320, 20);
|
|
|
|
|
rect.setAttribute("fillOpacity", 0);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#fillOpacity'));
|
2012-04-02 00:41:19 +02:00
|
|
|
};
|
|
|
|
|
fillOpacityTest();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var opacityTest = function () {
|
|
|
|
|
var workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(500, 100);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
|
|
|
|
|
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
|
|
|
|
strokeColor:'black',strokeStyle:'solid',strokeWidth:4});
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(20, 20);
|
|
|
|
|
rect.setOpacity(0.8);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(120, 20);
|
|
|
|
|
rect.setOpacity(0.5);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(220, 20);
|
|
|
|
|
rect.setOpacity(0.3);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
|
|
|
|
rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(320, 20);
|
|
|
|
|
rect.setOpacity(0);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#opacity'));
|
2012-04-02 00:41:19 +02:00
|
|
|
};
|
|
|
|
|
opacityTest();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var visibilityTest = function () {
|
|
|
|
|
var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'});
|
|
|
|
|
workspace.setSize("500px", "100px");
|
|
|
|
|
workspace.setCoordSize(500, 100);
|
|
|
|
|
workspace.setCoordOrigin(0, 0);
|
|
|
|
|
|
|
|
|
|
var rectAttributes = {width:60,height:60,fillColor:'green',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
|
|
|
var rect = new web2d.Rect(0, rectAttributes);
|
|
|
|
|
rect.setPosition(120, 20);
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.append(rect);
|
2012-04-02 00:41:19 +02:00
|
|
|
rect.addEvent("mouseover", function() {
|
|
|
|
|
alert("Mouse Over");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var isVisible = true;
|
|
|
|
|
var executer = function() {
|
|
|
|
|
isVisible = !isVisible;
|
|
|
|
|
rect.setVisibility(isVisible);
|
2010-11-20 23:43:54 +01:00
|
|
|
};
|
2012-04-02 00:41:19 +02:00
|
|
|
executer.periodical(100);
|
2010-11-20 23:43:54 +01:00
|
|
|
|
2014-03-05 00:47:23 +01:00
|
|
|
workspace.addItAsChildTo($('#visibility'));
|
2012-04-02 00:41:19 +02:00
|
|
|
};
|
|
|
|
|
visibilityTest();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2010-11-20 23:43:54 +01:00
|
|
|
</head>
|
2009-06-07 20:59:43 +02:00
|
|
|
|
2010-11-20 23:43:54 +01:00
|
|
|
<body onload="initialize();">
|
2009-06-07 20:59:43 +02:00
|
|
|
|
|
|
|
|
<h1>Element properties Tests </h1>
|
|
|
|
|
|
|
|
|
|
<table border="1">
|
2012-04-02 00:41:19 +02:00
|
|
|
<colgroup style="width:80%;">
|
|
|
|
|
<col style="width:10%"/>
|
|
|
|
|
<col style="width:90%"/>
|
|
|
|
|
</colgroup>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Stroke Styles.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div>
|
|
|
|
|
<div id="strokeStyle"></div>
|
|
|
|
|
<div id="strokeStyleGroup"></div>
|
|
|
|
|
<div id="strokeStyleWidth"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Stroke Width.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="strokeWidth"></div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
<!-- ************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Stroke Opacity.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="strokeOpacity"></div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
<!-- ************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Fill Opacity.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="fillOpacity"></div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
<!-- ************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Opacity.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="opacity"></div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Visibility.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="visibility"></div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
2009-06-07 20:59:43 +02:00
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
