wisemapping-frontend/packages/web2d/test/playground/curvedLine.html

82 lines
2.1 KiB
HTML
Raw Normal View History

2021-07-16 16:41:58 +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">
2021-10-03 02:23:32 +02:00
2021-07-16 16:41:58 +02:00
<head>
2021-10-03 02:23:32 +02:00
<style>
th,
td {
border: 1px solid black;
}
</style>
2021-07-16 16:41:58 +02:00
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
2021-10-03 02:23:32 +02:00
</script>
2021-07-16 16:41:58 +02:00
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
2021-10-03 02:23:32 +02:00
var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
2021-07-16 16:41:58 +02:00
overflowWorkspace.setSize("400px", "400px");
var line1 = new web2d.CurvedLine();
line1.setStyle(web2d.CurvedLine.SIMPLE_LINE);
line1.setFrom(200, 200);
line1.setTo(100, 100);
line1.setSrcControlPoint(new web2d.Point(-100, 0));
line1.setDestControlPoint(new web2d.Point(100, 0));
2021-07-16 16:41:58 +02:00
overflowWorkspace.append(line1);
var line2 = new web2d.CurvedLine();
line2.setStyle(web2d.CurvedLine.NICE_LINE);
line2.setFrom(0, 0);
line2.setTo(150, 90);
line2.setSrcControlPoint(new web2d.Point(100, 0));
line2.setDestControlPoint(new web2d.Point(-100, 0));
2021-07-16 16:41:58 +02:00
overflowWorkspace.append(line2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>
</head>
<body onload="initialize();">
2021-10-03 02:23:32 +02:00
<h1>PolyLines Render Tests </h1>
2021-07-16 16:41:58 +02:00
2021-10-03 02:23:32 +02:00
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr>
<td>
Different types of PolyLines that can be used.
</td>
<td>
<div id="overflowExample" />
</td>
2021-07-16 16:41:58 +02:00
2021-10-03 02:23:32 +02:00
</tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
2021-07-16 16:41:58 +02:00
2021-10-03 02:23:32 +02:00
</tr>
</table>
2021-07-16 16:41:58 +02:00
</body>
2021-10-03 02:23:32 +02:00
</html>