@flatten-js/polygon-offset
Version:
Polygon equidistant offset
107 lines (72 loc) • 4.51 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Home - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#offset">offset</a></span></li>
</nav>
<div id="main">
<section class="readme">
<article><p><a href="https://badge.fury.io/js/flatten-offset"><img src="https://badge.fury.io/js/flatten-offset.svg" alt="npm version"></a>
<a href="https://travis-ci.org/alexbol99/flatten-offset"><img src="https://travis-ci.org/alexbol99/flatten-offset.svg?branch=master" alt="Build Status"></a></p>
<h1>Offset polygon</h1><p>This package implements algorithm of equidistant offset of polygon. It relies on the <a href="https://github.com/alexbol99/flatten-js">FlattenJS</a>
library and its polygon model, which is multi polygon comprised from a number of islands and holes,
see <a href="https://beta.observablehq.com/@alexbol99/flattenjs-tutorials-polygons">this</a> interactive notebook for more details.</p>
<p>Algorithm is based on the idea of morphological offset, when each edge of the polygon is mapped to its offset,
and then <a href="https://github.com/alexbol99/flatten-boolean-op">boolean operation</a> performed between original contour and offset edges.
When offset value is positive, offset edges are united with original contour, when negative - they are
subtracted from original contour.</p>
<h2>Disclaimer</h2><p>Still under testing! Don't use in production!</p>
<h2>Installation</h2><pre class="prettyprint source"><code>npm install --save flatten-offset </code></pre><h2>Usage</h2><p>The package expose single method <em>offset</em>, which is added to Flatten.Polygon prototype.
We can use it in this way:</p>
<pre class="prettyprint source lang-javascript"><code> let offsetPolygon = polygon.offset(offset_value)</code></pre><p>Instance of FlattenJS library is added as a property to the Offset class.
There is no need to install FlattenJS package separately.</p>
<p>Example:</p>
<pre class="prettyprint source lang-javascript"><code> let Offset = require('flatten-offset');
let Flatten = Offset.Flatten;
let {segment, point, Polygon} = Flatten;
// Create polygon
let shapes = [
segment(point(200,100), point(200,300)),
segment(point(200,300), point(440,300)),
segment(point(440,300), point(300,200)),
segment(point(300,200), point(440,150)),
segment(point(440,150), point(500,150)),
segment(point(500,150), point(640,200)),
segment(point(640,200), point(500,300)),
segment(point(500,300), point(740,300)),
segment(point(740,300), point(740,100)),
segment(point(740,100), point(200,100))
];
let polygon = new Polygon();
polygon.addFace(shapes);
// Apply polygon offset
let offsetPolygon = polygon.offset(20);</code></pre><p>See <a href="https://beta.observablehq.com/@alexbol99/offset-polygon-test/2">Offset Polygon</a> interactive notebook
to explore this algorithm in work.</p></article>
</section>
</div>
<br class="clear">
<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Mon Apr 01 2019 23:13:34 GMT+0300 (Israel Daylight Time) using the Minami theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>