-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
165 lines (125 loc) · 4.19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!--
Using https://github.com/morganherlocker/cubic-spline
-->
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name=keywords content="spline, widget, javascript" />
<meta name=description content="This example of CanvasSpliner show how to use it" />
<meta property=og:title content="CanvasSpliner examples" />
<meta property=og:description content="This example of CanvasSpliner show how to use it" />
<title>CanvasSpliner</title>
<!-- <link rel="stylesheet" href="style.css" type="text/css" /> -->
<style>
body {
margin:0;
font-family: "Lucida Console", monospace;
font-size: 15px;
overflow-x: hidden;
}
code {
background-color: #ffdef5;
color: #822666;
padding: 0px 4px 0px 4px;
border-radius: 5px;
}
li {
margin-bottom: 5px;
list-style: none;
}
a {
text-decoration: none;
color: #01abf1;
transition: all 0.2s;
}
a:hover {
color: #9901f1;
}
#info {
padding-top: 0px;
position: absolute;
margin: auto;
left: 0;
right: 0;
/*bottom: 0;*/
top: 0;
width: 700px;
height: 500px;
text-align: center;
}
#parent {
width: 500px;
height: 500px;
margin-top: 50px;
margin-left: 100px;
margin-right: 100px;
}
</style>
<!--<script src="dist/CanvasSpliner.min.js"></script>-->
<script src="dist/CanvasSpliner.js"></script>
</head>
<body>
<div id="info">
<h1>CanvasSpliner</h1>
<p>
<ul>
<li>The first point is <code>xLocked</code>, <code>yLocked</code> and <code>safe</code></li>
<li>The last point is <code>xLocked</code> and <code>safe</code></li>
<li>Double click on a point to remove it (unless it is <code>safe</code>)</li>
<li>Double click anywhere else to add a new point</li>
<li>Grab a point to move it</li><br>
<li><a href="./examples/index.html" target="_blank">See a more advanced example</a></li>
<li><a href="https://github.com/jonathanlurie/canvasSpliner" target="_blank">Fork it on Github</a></li>
</ul>
</p>
<div id="parent"></div>
</div>
<script>
// "parent" : the parent DIV ID
// 500 : the width in pixel
// 500 : the height in pixel
// "monotonic" : the type of cubic spline, could be "natural"
var cs = new CanvasSpliner.CanvasSpliner("parent", 500, 500);
// also works when specifying directly the DOM object
//var cs = new CanvasSpliner.CanvasSpliner(document.getElementById( "parent" ), 500, 500);
/*
for each point we have:
x: its position on x axis
y: its position on y axis
xLocked: cannot be dragged along x axis when true
yLocked: cannot be dragged along y axis when true
safe: cannot be deleted when hovering and pressin "d"
*/
//cs.add( {x:0, y: 0 , xLocked: true, yLocked: true, safe: true} );
cs.add( {x:0.1, y: 0.4} );
cs.add( {x:0.3, y: 0.45} );
cs.add( {x:0.6, y: 0.8} );
cs.add( {x:1, y: 0.6 , xLocked: true, safe: true} );
// define the type of interpolation
//cs.setSplineType("monotonic")
//cs.setSplineType("natural")
// Define the step of the grid at the background
cs.setGridStep( 1/3 );
var interpolatedVal = cs.getValue( 0.33 )
console.log( interpolatedVal );
// defining some events (optional) ************************
// called while moving a point
cs.on("movePoint", function( csObj ){
console.log("moving...");
})
// called when releasing the mouse after having clicked on a point
cs.on("releasePoint", function( csObj ){
console.log("released point");
})
// called when a point is added
cs.on("pointAdded", function( csObj ){
console.log("new point!");
})
// called when a point is removed
cs.on("pointRemoved", function( csObj ){
console.log("point removed.");
})
</script>
<body>
</html>