Adding Chrome, Safari and IE9 support
This commit is contained in:
Pablo Luna
@@ -2,7 +2,8 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
@@ -59,9 +60,197 @@
|
||||
<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 overflowWorkspace = new web2d.Workspace();
|
||||
overflowWorkspace.setSize("100px", "100px");
|
||||
var elipse1 = new web2d.Elipse();
|
||||
elipse1.setSize(200, 200);
|
||||
elipse1.setPosition(0, 0);
|
||||
overflowWorkspace.appendChild(elipse1);
|
||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||
|
||||
|
||||
var workspacePosition = function()
|
||||
{
|
||||
|
||||
var elipseAttr = {width:100,height:100,x:100,y:100};
|
||||
|
||||
var divElem = $("positionExample");
|
||||
var workPosition = new web2d.Workspace();
|
||||
workPosition.setSize("100px", "100px");
|
||||
elipse = new web2d.Elipse(elipseAttr);
|
||||
workPosition.appendChild(elipse);
|
||||
workPosition.addItAsChildTo(divElem);
|
||||
|
||||
var x = 100;
|
||||
var executer = function()
|
||||
{
|
||||
x = (x + 10) % 100;
|
||||
divElem.style.left = x + "px";
|
||||
};
|
||||
executer.periodical(100);
|
||||
|
||||
};
|
||||
workspacePosition();
|
||||
|
||||
// Draw a reference grid.
|
||||
var container = document.getElementById("sizeExampleContainer");
|
||||
var grid = new Grid(container, 35, 12);
|
||||
grid.setPosition("0px", "0px")
|
||||
grid.render();
|
||||
|
||||
// Define a workspace using pixels and inchs.
|
||||
var workspacePixel = new web2d.Workspace();
|
||||
workspacePixel.setSize("100px", "100px");
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(100, 100);
|
||||
|
||||
workspacePixel.appendChild(elipse);
|
||||
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
|
||||
|
||||
var workspaceInchs = new web2d.Workspace();
|
||||
workspaceInchs.setSize("1in", "1in");
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(100, 100);
|
||||
|
||||
workspaceInchs.appendChild(elipse);
|
||||
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
|
||||
|
||||
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
// Workspace with CoordSize(100,100);
|
||||
var coordSizeSampleBuilder = function(width, height)
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(width, height);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(50, 50);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
return workspace;
|
||||
};
|
||||
|
||||
var workspace100x100 = coordSizeSampleBuilder(100, 100);
|
||||
workspace100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||
|
||||
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
||||
workspace100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||
|
||||
var workspace200x100 = coordSizeSampleBuilder(200, 100);
|
||||
workspace200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
|
||||
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
||||
dynamicWorkspace.addItAsChildTo($("coordsizeExampleDynamic"));
|
||||
|
||||
var size = 100;
|
||||
var executer = function()
|
||||
{
|
||||
size = (size + 1) % 100;
|
||||
if (size < 30)
|
||||
{
|
||||
size = 30;
|
||||
}
|
||||
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
executer.periodical(100);
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
|
||||
workspaceCoordSizeSample();
|
||||
|
||||
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
|
||||
var coordOriginSampleBuilder = function(x, y)
|
||||
{
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
workspace.setCoordOrigin(x, y);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(50, 50);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
return workspace;
|
||||
};
|
||||
|
||||
var workspace0x0 = coordOriginSampleBuilder(0, 0);
|
||||
workspace0x0.addItAsChildTo($("coordorigin0x0"));
|
||||
|
||||
var workspace0x50 = coordOriginSampleBuilder(0, 50);
|
||||
workspace0x50.addItAsChildTo($("coordorigin0x50"));
|
||||
|
||||
var workspace50x0 = coordOriginSampleBuilder(50, 0);
|
||||
workspace50x0.addItAsChildTo($("coordorigin50x0"));
|
||||
|
||||
// Workspace animation changing the coordsize from (30,30) to (100,100)
|
||||
var dynamicWorkspace = coordOriginSampleBuilder(100, 100);
|
||||
dynamicWorkspace.addItAsChildTo($("coordoriginExampleDynamic"));
|
||||
|
||||
var x = 50;
|
||||
var y = 50;
|
||||
executer = function() {
|
||||
x = (x + 1) % 50;
|
||||
y = (y + 1) % 50;
|
||||
|
||||
dynamicWorkspace.setCoordOrigin(x, y);
|
||||
};
|
||||
executer.periodical(100);
|
||||
};
|
||||
workspaceCoordOriginSample();
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Workspace Render Tests </h1>
|
||||
|
||||
@@ -82,19 +271,6 @@
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var overflowWorkspace = new web2d.Workspace();
|
||||
overflowWorkspace.setSize("100px", "100px");
|
||||
var elipse1 = new web2d.Elipse();
|
||||
elipse1.setSize(200, 200);
|
||||
elipse1.setPosition(0, 0);
|
||||
overflowWorkspace.appendChild(elipse1);
|
||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -105,32 +281,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var workspacePosition = function()
|
||||
{
|
||||
|
||||
var elipseAttr = {width:100,height:100,x:100,y:100};
|
||||
|
||||
var divElem = $("positionExample");
|
||||
var workPosition = new web2d.Workspace();
|
||||
workPosition.setSize("100px", "100px");
|
||||
elipse = new web2d.Elipse(elipseAttr);
|
||||
workPosition.appendChild(elipse);
|
||||
workPosition.addItAsChildTo(divElem);
|
||||
|
||||
var x = 100;
|
||||
var executer = function()
|
||||
{
|
||||
x = (x + 10) % 100;
|
||||
divElem.style.left = x + "px";
|
||||
};
|
||||
executer.periodical(100);
|
||||
|
||||
};
|
||||
workspacePosition();
|
||||
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -146,34 +296,6 @@
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
// Draw a reference grid.
|
||||
var container = document.getElementById("sizeExampleContainer");
|
||||
var grid = new Grid(container, 35, 12);
|
||||
grid.setPosition("0px", "0px")
|
||||
grid.render();
|
||||
|
||||
// Define a workspace using pixels and inchs.
|
||||
var workspacePixel = new web2d.Workspace();
|
||||
workspacePixel.setSize("100px", "100px");
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(100, 100);
|
||||
|
||||
workspacePixel.appendChild(elipse);
|
||||
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
|
||||
|
||||
var workspaceInchs = new web2d.Workspace();
|
||||
workspaceInchs.setSize("1in", "1in");
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(100, 100);
|
||||
|
||||
workspaceInchs.appendChild(elipse);
|
||||
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
|
||||
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -208,68 +330,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
// Workspace with CoordSize(100,100);
|
||||
var coordSizeSampleBuilder = function(width, height)
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(width, height);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(50, 50);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
return workspace;
|
||||
};
|
||||
|
||||
var workspace100x100 = coordSizeSampleBuilder(100, 100);
|
||||
workspace100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||
|
||||
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
||||
workspace100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||
|
||||
var workspace200x100 = coordSizeSampleBuilder(200, 100);
|
||||
workspace200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
|
||||
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
||||
dynamicWorkspace.addItAsChildTo($("coordsizeExampleDynamic"));
|
||||
|
||||
var size = 100;
|
||||
var executer = function()
|
||||
{
|
||||
size = (size + 1) % 100;
|
||||
if (size < 30)
|
||||
{
|
||||
size = 30;
|
||||
}
|
||||
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
executer.periodical(100);
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
|
||||
workspaceCoordSizeSample();
|
||||
</script>
|
||||
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -304,71 +364,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
|
||||
var coordOriginSampleBuilder = function(x, y)
|
||||
{
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
workspace.setCoordOrigin(x, y);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 0);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(50, 50);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
return workspace;
|
||||
};
|
||||
|
||||
var workspace0x0 = coordOriginSampleBuilder(0, 0);
|
||||
workspace0x0.addItAsChildTo($("coordorigin0x0"));
|
||||
|
||||
var workspace0x50 = coordOriginSampleBuilder(0, 50);
|
||||
workspace0x50.addItAsChildTo($("coordorigin0x50"));
|
||||
|
||||
var workspace50x0 = coordOriginSampleBuilder(50, 0);
|
||||
workspace50x0.addItAsChildTo($("coordorigin50x0"));
|
||||
|
||||
// Workspace animation changing the coordsize from (30,30) to (100,100)
|
||||
var dynamicWorkspace = coordOriginSampleBuilder(100, 100);
|
||||
dynamicWorkspace.addItAsChildTo($("coordoriginExampleDynamic"));
|
||||
|
||||
var x = 50;
|
||||
var y = 50;
|
||||
executer = function() {
|
||||
x = (x + 1) % 50;
|
||||
y = (y + 1) % 50;
|
||||
|
||||
dynamicWorkspace.setCoordOrigin(x, y);
|
||||
};
|
||||
executer.periodical(100);
|
||||
};
|
||||
workspaceCoordOriginSample();
|
||||
</script>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user