vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-09-20 03:00:08 +02:00
Code Issues Packages Projects Releases Wiki Activity
8578914dc1
wisemapping-open-source/web2d/src/test/javascript/render/shapes.html

357 lines
14 KiB
HTML
Raw Normal View History

WiseMapping
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>
<script type="text/javascript">
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
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>
<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');
parent.appendChild(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dot', 'black');
parent.appendChild(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dash', 'black');
parent.appendChild(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'longdash', 'black');
parent.appendChild(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.appendChild(rect);
}
// 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);
workspace.addItAsChildTo($("strokeStyle"));
// Workspace with modified scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(5000, 1000);
workspace.setCoordOrigin(0, 0);
builder(workspace, 10, 1);
workspace.addItAsChildTo($("strokeStyleGroup"));
// Workspace with default scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 5);
workspace.addItAsChildTo($("strokeStyleWidth"));
};
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});
workspace.appendChild(rect);
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);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.appendChild(rect);
workspace.addItAsChildTo($("strokeOpacity"));
};
strokeOpacityTest();
WiseMapping
2009-06-07 20:59:43 +02:00
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
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});
workspace.appendChild(rect);
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);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.appendChild(rect);
workspace.addItAsChildTo($("fillOpacity"));
};
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});
workspace.appendChild(rect);
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);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.appendChild(rect);
workspace.addItAsChildTo($("opacity"));
};
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);
workspace.appendChild(rect);
rect.addEventListener("mouseover", function() {
alert("Mouse Over");
});
var isVisible = true;
var executer = function()
{
isVisible = !isVisible;
rect.setVisibility(isVisible);
};
executer.periodical(100);
workspace.addItAsChildTo($("visibility"));
};
visibilityTest();
}
</script>
</head>
WiseMapping
2009-06-07 20:59:43 +02:00
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<body onload="initialize();">
WiseMapping
2009-06-07 20:59:43 +02:00
<h1>Element properties Tests </h1>
<table border="1">
<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>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<div id="strokeWidth"></div>
WiseMapping
2009-06-07 20:59:43 +02:00
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Stroke Opacity.
</td>
<td>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<div id="strokeOpacity"></div>
WiseMapping
2009-06-07 20:59:43 +02:00
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Fill Opacity.
</td>
<td>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<div id="fillOpacity"></div>
WiseMapping
2009-06-07 20:59:43 +02:00
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Opacity.
</td>
<td>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<div id="opacity"></div>
WiseMapping
2009-06-07 20:59:43 +02:00
</td>
</tr>
<tr>
<td>
Visibility.
</td>
<td>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<div id="visibility"></div>
WiseMapping
2009-06-07 20:59:43 +02:00
</td>
</tr>
</table>
</body>
</html>
Reference in New Issue Copy Permalink