tess2
Version:
GLU tesselator ported to Javascript, performs polygon boolean operations and triangulation
138 lines (126 loc) • 5 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: 10px;
margin: 0;
}
#content {
z-index: 0;
padding: 0;
margin: 0;
position: absolute;
top: 0px;
right: 420px;
left: 0px;
bottom: 0px;
}
#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>
<h2>Tess2.js demo</h2>
<div class="wrapper">
<label for="preset">Load preset data:</label>
<select id="preset"></select>
</div>
<div class="wrapper">
<input id="draw_input_polys" type="checkbox" value="drawInputPolys" checked="checked">
<label for="draw_input_polys">Draw input polygons</label>
<br/>
<input id="draw_bounds" type="checkbox" value="drawBounds" checked="checked">
<label for="draw_bounds">Draw bounds</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_contours">Contours (at least one blank line between each hole):</label>
<textarea id="poly_contours" rows="5" cols="50"></textarea>
<span class="info">(<span id="contours_size">0</span> contours and <span id="contours_points">0</span> points parsed)</span>
<input id="btnTriangulate" type="button" value="Update">
</div>
<div class="wrapper">
<label for="winding_rule">Winding rule:</label>
<select id="winding_rule">
<option value="odd">WINDING_ODD</option>
<option value="nonzero">WINDING_NONZERO</option>
<option value="positive">WINDING_POSITIVE</option>
<option value="negative">WINDING_NEGATIVE</option>
<option value="absgeqtwo">WINDING_ABS_GEQ_TWO</option>
</select>
<br/>
<label for="element_type">Element type:</label>
<select id="element_type">
<option value="polygons">POLYGONS</option>
<option value="connected_polygons">CONNECTED_POLYGONS</option>
<option value="boundary_contours">BOUNDARY_CONTOURS</option>
</select>
<br/>
<label for="polygon_size">Polygon size:</label>
<select id="polygon_size">
<option value="3">3</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="10">10</option>
<option value="16">16</option>
</select>
<br/>
</div>
<div class="wrapper">
<br><span class="info"><span id="triangles_size">0</span> triangles computed.</span>
<br><span class="info">Build in <span id="tess_time">0</span> ms</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>