Mercurial > hg > xsplines
view splines.html @ 6:d3a25d39a6e2
implement closed x-splines
author | Jordi Gutiérrez Hermoso <jordi@ecometrica.com> |
---|---|
date | Sun, 26 Aug 2018 10:49:31 -0400 |
parents | a9ffd0bcc292 |
children |
line wrap: on
line source
<!DOCTYPE html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="d3.slider.css" /> <title>Spline Editor</title> <style> body { font: 13px sans-serif; position: relative; width: 960px; height: 500px; padding-left: 100px; padding-top: 100px; } form { bottom: 10px; left: 10px; } rect { fill: none; pointer-events: all; } circle, .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } .xspline { fill: none; stroke: red; stroke-width: 1.5px; } circle { fill: #fff; fill-opacity: .2; cursor: move; } .selected { fill: #ff7f0e; fill-opacity: 1; stroke: #ff7f0e; } #splines { border: 1px black solid; } </style> <script src="d3.v3.min.js"></script> <script src="d3.slider.js"></script> </head> <body> <form> <input name="approximateButton" type="button" value="Approximate all" onclick="approximate_all()" /> <input name="sharplyInterpolateButton" type="button" value="Sharply interpolate all" onclick="sharply_interpolate_all()" /> <input name="interpolateButton" type="button" value="Interpolate all" onclick="interpolate_all()" /> <input name="toggleClosed" type="button" value="Toggle open/closed spline" onclick="toggle_closed()" /> <label for="interpolate">SVG spline type:</label> <select id="interpolate"></select><br> </form> <div id="splines"></div> <div id="slider"></div> <script src="splines.js"></script> </body>