Adding Chrome, Safari and IE9 support
This commit is contained in:
Pablo Luna
@@ -2,11 +2,394 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
<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>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var basicTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(50, 50);
|
||||
group.setPosition(25, 50);
|
||||
group.setCoordSize(200, 200);
|
||||
group.setCoordOrigin(0, 0);
|
||||
workspace.appendChild(group);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(200, 200);
|
||||
elipse.setPosition(100, 100);
|
||||
group.appendChild(elipse);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(0, 0);
|
||||
line.setTo(200, 200);
|
||||
line.setStroke("blue");
|
||||
group.appendChild(line);
|
||||
|
||||
line = new web2d.Line();
|
||||
line.setFrom(200, 0);
|
||||
line.setTo(0, 200);
|
||||
line.setStroke("blue");
|
||||
group.appendChild(line);
|
||||
|
||||
workspace.addItAsChildTo($("groupBasicContainer"));
|
||||
|
||||
|
||||
var xDir = 1;
|
||||
var yDir = 1;
|
||||
var executer = function()
|
||||
{
|
||||
var y = group.getPosition().y + yDir;
|
||||
var x = group.getPosition().x + xDir;
|
||||
|
||||
if (x < 0)
|
||||
{
|
||||
xDir = 1;
|
||||
} else if (x > 50)
|
||||
{
|
||||
xDir = -1;
|
||||
}
|
||||
|
||||
if (y < 0)
|
||||
{
|
||||
yDir = 1;
|
||||
} else if (y > 50)
|
||||
{
|
||||
yDir = -1;
|
||||
}
|
||||
|
||||
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
|
||||
group.setPosition(x, y);
|
||||
};
|
||||
executer.periodical(100);
|
||||
};
|
||||
basicTest();
|
||||
|
||||
|
||||
var eventTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'};
|
||||
var group = new web2d.Group(groupAttributes);
|
||||
workspace.appendChild(group);
|
||||
|
||||
var elipseLeft = new web2d.Elipse();
|
||||
elipseLeft.setSize(200, 200)
|
||||
elipseLeft.setPosition(200, 0)
|
||||
group.appendChild(elipseLeft);
|
||||
|
||||
var elipseRight = new web2d.Elipse();
|
||||
elipseRight.setSize(200, 200)
|
||||
elipseRight.setPosition(0, 0)
|
||||
group.appendChild(elipseRight);
|
||||
|
||||
var listener = function(e) {
|
||||
alert("Click event on:" + this.getType())
|
||||
};
|
||||
group.addEventListener("click", listener);
|
||||
elipseLeft.addEventListener("click", listener);
|
||||
elipseRight.addEventListener("click", listener);
|
||||
|
||||
workspace.addItAsChildTo($("groupEventsContainer"));
|
||||
}
|
||||
eventTest();
|
||||
|
||||
|
||||
var eventTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(200, 200);
|
||||
|
||||
var groupOuter = new web2d.Group();
|
||||
groupOuter.setSize(50, 50)
|
||||
groupOuter.setPosition(25, 25);
|
||||
groupOuter.setCoordSize(100, 100);
|
||||
groupOuter.setCoordOrigin(0, 0)
|
||||
workspace.appendChild(groupOuter);
|
||||
|
||||
var elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setSize(200, 200);
|
||||
elipseOuter.setPosition(100, 100);
|
||||
elipseOuter.setFill("red");
|
||||
groupOuter.appendChild(elipseOuter);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(0, 0);
|
||||
line.setTo(200, 200);
|
||||
line.setStroke("red");
|
||||
groupOuter.appendChild(line);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(200, 0);
|
||||
line.setTo(0, 200);
|
||||
line.setStroke("red");
|
||||
groupOuter.appendChild(line);
|
||||
|
||||
var groupInner = new web2d.Group();
|
||||
groupInner.setSize(50, 50);
|
||||
groupInner.setPosition(25, 25);
|
||||
groupInner.setCoordSize(100, 100);
|
||||
groupInner.setCoordOrigin(0, 0);
|
||||
groupOuter.appendChild(groupInner);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(200, 200);
|
||||
elipse.setPosition(100, 100);
|
||||
groupInner.appendChild(elipse);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(0, 0);
|
||||
line.setTo(200, 200);
|
||||
line.setStroke("blue");
|
||||
groupInner.appendChild(line);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(200, 0);
|
||||
line.setTo(0, 200);
|
||||
line.setStroke("blue");
|
||||
groupInner.appendChild(line);
|
||||
|
||||
workspace.addItAsChildTo($("groupNestedContainer"));
|
||||
};
|
||||
eventTest();
|
||||
|
||||
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
|
||||
function groupSampleBuilder(width, height)
|
||||
{
|
||||
// Group with CoordSize(50,50);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
workspace.appendChild(elipseOuter);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(50, 50);
|
||||
group.setCoordSize(width, height);
|
||||
group.setPosition(25, 25);
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(50, 50);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
return workspace;
|
||||
}
|
||||
|
||||
var sample100x100 = groupSampleBuilder(100, 100);
|
||||
sample100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||
|
||||
var sample100x200 = groupSampleBuilder(100, 200);
|
||||
sample100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||
|
||||
var sample200x100 = groupSampleBuilder(200, 100);
|
||||
sample200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
};
|
||||
workspaceCoordSizeSample();
|
||||
|
||||
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
|
||||
function groupSampleBuilder(x, y)
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
workspace.appendChild(elipseOuter);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(50, 50);
|
||||
group.setCoordSize(100, 100);
|
||||
group.setCoordOrigin(x, y);
|
||||
group.setPosition(25, 25);
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(50, 50);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
return workspace;
|
||||
}
|
||||
;
|
||||
|
||||
var sample0x0 = groupSampleBuilder(0, 0);
|
||||
sample0x0.addItAsChildTo($("coordOriginExample0x0"));
|
||||
|
||||
var sample100x200 = groupSampleBuilder(0, 50);
|
||||
sample100x200.addItAsChildTo($("coordOriginExample0x50"));
|
||||
|
||||
var sample200x100 = groupSampleBuilder(50, 0);
|
||||
sample200x100.addItAsChildTo($("coordOriginExample50x0"));
|
||||
}
|
||||
workspaceCoordOriginSample();
|
||||
|
||||
|
||||
|
||||
var groupVisibilitySample = function()
|
||||
{
|
||||
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(100, 100);
|
||||
group.setPosition(0, 0);
|
||||
group.setCoordSize(100, 100);
|
||||
group.addEventListener("mouseover", function() {
|
||||
alert("Mouse Over Group");
|
||||
});
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
group.addEventListener("mouseover", function() {
|
||||
alert("Mouse Over elipseOuter");
|
||||
});
|
||||
group.appendChild(elipseOuter);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(25, 25);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
var isVisible = true;
|
||||
var executer = function()
|
||||
{
|
||||
isVisible = !isVisible;
|
||||
group.setVisibility(isVisible);
|
||||
};
|
||||
executer.periodical(100);
|
||||
workspace.addItAsChildTo($("visibilityExample"));
|
||||
|
||||
}
|
||||
groupVisibilitySample();
|
||||
|
||||
var groupVisibilitySample = function()
|
||||
{
|
||||
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(100, 100);
|
||||
group.setPosition(0, 0);
|
||||
group.setCoordSize(100, 100);
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
group.appendChild(elipseOuter);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(25, 25);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
var width = 10;
|
||||
var height = 10;
|
||||
var executer = function()
|
||||
{
|
||||
width = (width + 10) % 100;
|
||||
height = (height + 10) % 100;
|
||||
group.setCoordSize(width, height);
|
||||
};
|
||||
executer.periodical(100);
|
||||
workspace.addItAsChildTo($("scaleStrokeExample"));
|
||||
|
||||
}
|
||||
groupVisibilitySample();
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Group Render Tests.</h1>
|
||||
<table border="1">
|
||||
@@ -26,72 +409,7 @@
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var basicTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(50, 50);
|
||||
group.setPosition(25, 50);
|
||||
group.setCoordSize(200, 200);
|
||||
group.setCoordOrigin(0, 0);
|
||||
workspace.appendChild(group);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(200, 200);
|
||||
elipse.setPosition(100, 100);
|
||||
group.appendChild(elipse);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(0, 0);
|
||||
line.setTo(200, 200);
|
||||
line.setStroke("blue");
|
||||
group.appendChild(line);
|
||||
|
||||
line = new web2d.Line();
|
||||
line.setFrom(200, 0);
|
||||
line.setTo(0, 200);
|
||||
line.setStroke("blue");
|
||||
group.appendChild(line);
|
||||
|
||||
workspace.addItAsChildTo($("groupBasicContainer"));
|
||||
|
||||
|
||||
var xDir = 1;
|
||||
var yDir = 1;
|
||||
var executer = function()
|
||||
{
|
||||
var y = group.getPosition().y + yDir;
|
||||
var x = group.getPosition().x + xDir;
|
||||
|
||||
if (x < 0)
|
||||
{
|
||||
xDir = 1;
|
||||
} else if (x > 50)
|
||||
{
|
||||
xDir = -1;
|
||||
}
|
||||
|
||||
if (y < 0)
|
||||
{
|
||||
yDir = 1;
|
||||
} else if (y > 50)
|
||||
{
|
||||
yDir = -1;
|
||||
}
|
||||
|
||||
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
|
||||
group.setPosition(x, y);
|
||||
};
|
||||
executer.periodical(100);
|
||||
};
|
||||
basicTest();
|
||||
</script>
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -104,39 +422,6 @@
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var eventTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'};
|
||||
var group = new web2d.Group(groupAttributes);
|
||||
workspace.appendChild(group);
|
||||
|
||||
var elipseLeft = new web2d.Elipse();
|
||||
elipseLeft.setSize(200, 200)
|
||||
elipseLeft.setPosition(200, 0)
|
||||
group.appendChild(elipseLeft);
|
||||
|
||||
var elipseRight = new web2d.Elipse();
|
||||
elipseRight.setSize(200, 200)
|
||||
elipseRight.setPosition(0, 0)
|
||||
group.appendChild(elipseRight);
|
||||
|
||||
var listener = function(e) {
|
||||
alert("Click event on:" + this.getType())
|
||||
};
|
||||
group.addEventListener("click", listener);
|
||||
elipseLeft.addEventListener("click", listener);
|
||||
elipseRight.addEventListener("click", listener);
|
||||
|
||||
workspace.addItAsChildTo($("groupEventsContainer"));
|
||||
}
|
||||
eventTest();
|
||||
</script>
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -165,66 +450,6 @@
|
||||
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var eventTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(200, 200);
|
||||
|
||||
var groupOuter = new web2d.Group();
|
||||
groupOuter.setSize(50, 50)
|
||||
groupOuter.setPosition(25, 25);
|
||||
groupOuter.setCoordSize(100, 100);
|
||||
groupOuter.setCoordOrigin(0, 0)
|
||||
workspace.appendChild(groupOuter);
|
||||
|
||||
var elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setSize(200, 200);
|
||||
elipseOuter.setPosition(100, 100);
|
||||
elipseOuter.setFill("red");
|
||||
groupOuter.appendChild(elipseOuter);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(0, 0);
|
||||
line.setTo(200, 200);
|
||||
line.setStroke("red");
|
||||
groupOuter.appendChild(line);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(200, 0);
|
||||
line.setTo(0, 200);
|
||||
line.setStroke("red");
|
||||
groupOuter.appendChild(line);
|
||||
|
||||
var groupInner = new web2d.Group();
|
||||
groupInner.setSize(50, 50);
|
||||
groupInner.setPosition(25, 25);
|
||||
groupInner.setCoordSize(100, 100);
|
||||
groupInner.setCoordOrigin(0, 0);
|
||||
groupOuter.appendChild(groupInner);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(200, 200);
|
||||
elipse.setPosition(100, 100);
|
||||
groupInner.appendChild(elipse);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(0, 0);
|
||||
line.setTo(200, 200);
|
||||
line.setStroke("blue");
|
||||
groupInner.appendChild(line);
|
||||
|
||||
var line = new web2d.Line();
|
||||
line.setFrom(200, 0);
|
||||
line.setTo(0, 200);
|
||||
line.setStroke("blue");
|
||||
groupInner.appendChild(line);
|
||||
|
||||
workspace.addItAsChildTo($("groupNestedContainer"));
|
||||
};
|
||||
eventTest();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
@@ -255,49 +480,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
|
||||
function groupSampleBuilder(width, height)
|
||||
{
|
||||
// Group with CoordSize(50,50);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
workspace.appendChild(elipseOuter);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(50, 50);
|
||||
group.setCoordSize(width, height);
|
||||
group.setPosition(25, 25);
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(50, 50);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
return workspace;
|
||||
}
|
||||
|
||||
var sample100x100 = groupSampleBuilder(100, 100);
|
||||
sample100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||
|
||||
var sample100x200 = groupSampleBuilder(100, 200);
|
||||
sample100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||
|
||||
var sample200x100 = groupSampleBuilder(200, 100);
|
||||
sample200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
};
|
||||
workspaceCoordSizeSample();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -327,47 +509,7 @@
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
|
||||
function groupSampleBuilder(x, y)
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
workspace.appendChild(elipseOuter);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(50, 50);
|
||||
group.setCoordSize(100, 100);
|
||||
group.setCoordOrigin(x, y);
|
||||
group.setPosition(25, 25);
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(50, 50);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
return workspace;
|
||||
}
|
||||
;
|
||||
|
||||
var sample0x0 = groupSampleBuilder(0, 0);
|
||||
sample0x0.addItAsChildTo($("coordOriginExample0x0"));
|
||||
|
||||
var sample100x200 = groupSampleBuilder(0, 50);
|
||||
sample100x200.addItAsChildTo($("coordOriginExample0x50"));
|
||||
|
||||
var sample200x100 = groupSampleBuilder(50, 0);
|
||||
sample200x100.addItAsChildTo($("coordOriginExample50x0"));
|
||||
}
|
||||
workspaceCoordOriginSample();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
@@ -381,50 +523,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var groupVisibilitySample = function()
|
||||
{
|
||||
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(100, 100);
|
||||
group.setPosition(0, 0);
|
||||
group.setCoordSize(100, 100);
|
||||
group.addEventListener("mouseover", function() {
|
||||
alert("Mouse Over Group");
|
||||
});
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
group.addEventListener("mouseover", function() {
|
||||
alert("Mouse Over elipseOuter");
|
||||
});
|
||||
group.appendChild(elipseOuter);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(25, 25);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
var isVisible = true;
|
||||
var executer = function()
|
||||
{
|
||||
isVisible = !isVisible;
|
||||
group.setVisibility(isVisible);
|
||||
};
|
||||
executer.periodical(100);
|
||||
workspace.addItAsChildTo($("visibilityExample"));
|
||||
|
||||
}
|
||||
groupVisibilitySample();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
@@ -435,46 +533,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var groupVisibilitySample = function()
|
||||
{
|
||||
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
var group = new web2d.Group();
|
||||
group.setSize(100, 100);
|
||||
group.setPosition(0, 0);
|
||||
group.setCoordSize(100, 100);
|
||||
workspace.appendChild(group);
|
||||
|
||||
elipseOuter = new web2d.Elipse();
|
||||
elipseOuter.setPosition(50, 50);
|
||||
elipseOuter.setSize(50, 50);
|
||||
group.appendChild(elipseOuter);
|
||||
|
||||
elipseInner = new web2d.Elipse();
|
||||
elipseInner.setPosition(50, 50);
|
||||
elipseInner.setSize(25, 25);
|
||||
elipseInner.setFill("red");
|
||||
group.appendChild(elipseInner);
|
||||
|
||||
var width = 10;
|
||||
var height = 10;
|
||||
var executer = function()
|
||||
{
|
||||
width = (width + 10) % 100;
|
||||
height = (height + 10) % 100;
|
||||
group.setCoordSize(width, height);
|
||||
};
|
||||
executer.periodical(100);
|
||||
workspace.addItAsChildTo($("scaleStrokeExample"));
|
||||
|
||||
}
|
||||
groupVisibilitySample();
|
||||
</script>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user