tess2
Version:
GLU tesselator ported to Javascript, performs polygon boolean operations and triangulation
99 lines (92 loc) • 3.25 kB
HTML
<html>
<head>
<meta charset="utf-8">
<script src="../src/tess2.js"></script>
<script src="jquery.js"></script>
<style type="text/css" media="screen">
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 12px;
}
#control {
float: right;
width: 400px;
height: 100%;
background-color: #eee;
overflow: auto;
padding: 0;
margin: 0;
}
#content {
z-index: 0;
padding: 0;
margin: 0;
position: absolute;
top: 10px;
right: 410px;
left: 10px;
bottom: 10px;
}
#canvas {
height: 100%;
width: 100%;
}
.wrapper {
width: 100%;
margin-bottom: 1.5em;
padding: 0;
}
.wrapper textarea {
margin: 5px;
width: 380px;
}
.info {
color: #777;
}
</style>
<script src="test.js"></script>
</head>
<body>
<div id="control">
<form>
<div class="wrapper">
<label for="preset">Load preset data:</label>
<select id="preset"></select>
<input id="btnTriangulate" type="button" value="Triangulate!">
<br><span class="info">(<span id="triangles_size">0</span> triangles computed)</span>
</div>
<div class="wrapper">
<input id="draw_constraints" type="checkbox" value="drawConstraints" checked="checked">
<label for="draw_constraints">Draw constraints</label>
</div>
<div class="wrapper">
<label for="poly_contour">Contour of the polygon (any separator between coordinates):</label>
<textarea id="poly_contour" rows="7" cols="50"></textarea>
<span class="info">(<span id="contour_size">0</span> points parsed)</span>
</div>
<div class="wrapper">
<label for="poly_holes">Holes in the polygon (at least one blank line between each hole):</label>
<textarea id="poly_holes" rows="5" cols="50"></textarea>
<span class="info">(<span id="holes_size">0</span> holes parsed)</span>
</div>
<!-- <div class="wrapper">
<label for="poly_points">Steiner points (any separator between coordinates):</label>
<textarea id="poly_points" rows="5" cols="50"></textarea>
<span class="info">(<span id="points_size">0</span> points parsed)</span>
</div> -->
<div class="wrapper">
<a href="tests/SpecRunner.html">Link to automated tests</a>
</div>
</form>
</div>
<div id="content">
<canvas id="canvas">
<em>Your browser does not support HTML5 <canvas></em>. Please try again with a recent browser.
</canvas>
</div>
</body>
</html>