cardinal-spline-3d
Version:
Smooth curve through points with tension and resolution options.
818 lines (313 loc) • 12.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>cardinal-spline-js Global</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<a class="brand" href="index.html">cardinal-spline-js</a>
<ul class="nav">
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="global.html#curve">curve</a>
</li>
<li>
<a href="global.html#getCurvePoints">getCurvePoints</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="main">
<h1 class="page-title">Global</h1>
<section>
<header>
<h2>
</h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="curve"><span class="type-signature"></span>curve<span class="signature">(ctx, points, <span class="optional">tension</span>, <span class="optional">numOfSeg</span>, <span class="optional">close</span>)</span><span class="type-signature"> → {Float32Array}</span></h4>
</dt>
<dd>
<div class="description">
<p>Draws a cardinal spline through given point array. Points must be arranged<br>as: [x1, y1, x2, y2, ..., xn, yn]. It adds the points to the current path.</p>
<p>There must be a minimum of two points in the input array but the function<br>is only useful where there are three points or more.</p>
<p>The method continues previous path of the context. If you don't want that<br>then you need to use moveTo() with the first point from the input array.</p>
<p>The points for the cardinal spline are returned as a new array.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>ctx</code></td>
<td class="type">
<span class="param-type"><a href="CanvasRenderingContext2D.html">CanvasRenderingContext2D</a></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>context to use</p></td>
</tr>
<tr>
<td class="name"><code>points</code></td>
<td class="type">
<span class="param-type">Array</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>point array</p></td>
</tr>
<tr>
<td class="name"><code>tension</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0.5
</td>
<td class="description last"><p>tension. Typically between [0.0, 1.0] but can be exceeded</p></td>
</tr>
<tr>
<td class="name"><code>numOfSeg</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
25
</td>
<td class="description last"><p>number of segments between two points (line resolution)</p></td>
</tr>
<tr>
<td class="name"><code>close</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Close the ends making the line continuous</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>New array with the calculated points that was added to the path</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Float32Array</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getCurvePoints"><span class="type-signature"></span>getCurvePoints<span class="signature">(points, <span class="optional">tension</span>, <span class="optional">numOfSeg</span>, <span class="optional">close</span>)</span><span class="type-signature"> → {Float32Array}</span></h4>
</dt>
<dd>
<div class="description">
<p>Calculates an array containing points representing a cardinal spline through given point array.<br>Points must be arranged as: [x1, y1, x2, y2, ..., xn, yn].</p>
<p>There must be a minimum of two points in the input array but the function<br>is only useful where there are three points or more.</p>
<p>The points for the cardinal spline are returned as a new array.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>points</code></td>
<td class="type">
<span class="param-type">Array</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>point array</p></td>
</tr>
<tr>
<td class="name"><code>tension</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0.5
</td>
<td class="description last"><p>tension. Typically between [0.0, 1.0] but can be exceeded</p></td>
</tr>
<tr>
<td class="name"><code>numOfSeg</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
25
</td>
<td class="description last"><p>number of segments between two points (line resolution)</p></td>
</tr>
<tr>
<td class="name"><code>close</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Close the ends making the line continuous</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>New array with the calculated points that was added to the path</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Float32Array</span>
</dd>
</dl>
</dd>
</dl>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<p><b><a href='https://github.com/epistemex/'>Epistemex at GitHub</a></b></p>
<br />
<span class="copyright">
Copyright © 2013-2016 Epistemex
</span>
<br />
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a>
on Fri Jul 15th 2016 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>
<div class="span3">
<div id="toc"></div>
</div>
<br clear="both">
</div>
</div>
<!--<script src="scripts/sunlight.js"></script>-->
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : "100px"
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
// $( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" );
$( ".tutorial-section pre, .readme-section pre" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
lang = "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : false,
showMenu : true,
enableDoclinks : true
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
</body>
</html>