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>