source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/GradientStop.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 5.2 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>GradientStop</title>
6<base target="class-frame">
7<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
8<script src="../assets/js/paper.js"></script>
9<script src="../assets/js/jquery.js"></script>
10<script src="../assets/js/codemirror.js"></script>
11<script src="../assets/js/docs.js"></script>
12</head>
13<body class="reference">
14<div class="reference-class">
15<h1>GradientStop</h1>
16
17<p>The GradientStop object.</p>
18
19</div>
20
21<!-- ============================== constructors ========================= -->
22<div class="reference-members"><h2>Constructors</h2>
23
24
25<div id="gradientstop" class="member">
26<div class="member-link">
27<a name="gradientstop" href="#gradientstop"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
28</div>
29<div class="member-description hidden">
30<div class="member-text">
31<p>Creates a GradientStop object.</p>
32
33<ul><b>Parameters:</b>
34
35<li>
36<tt>color:</tt>
37<a href="../classes/Color.html"><tt>Color</tt></a>
38&mdash;&nbsp;the color of the stop
39&mdash;&nbsp;optional, default: <tt>new Color(0, 0, 0)</tt>
40</li>
41
42<li>
43<tt>rampPoint:</tt>
44<tt>Number</tt>
45&mdash;&nbsp;the position of the stop on the gradient
46 ramp as a value between 0 and 1.
47&mdash;&nbsp;optional, default: <tt>0</tt>
48</li>
49
50</ul>
51
52
53
54
55</div>
56</div>
57</div>
58
59</div>
60
61
62
63
64
65 <div class="reference-members"><h2>Properties</h2>
66
67
68<div id="ramppoint" class="member">
69<div class="member-link">
70<a name="ramppoint" href="#ramppoint"><tt><b>rampPoint</b></tt></a>
71</div>
72<div class="member-description hidden">
73
74<div class="member-text">
75 <p>The ramp-point of the gradient stop as a value between <tt>0</tt> and
76<tt>1</tt>.</p>
77
78
79 <ul><b>Type:</b>
80 <li>
81 <tt>Number</tt>
82 </li>
83 </ul>
84
85 <p>
86<b>Example</b> &mdash; Animating a gradient's ramp points:
87</p>
88
89<div class="paperscript split">
90
91<div class="buttons">
92<div class="button run">Run</div>
93</div>
94
95<script type="text/paperscript" canvas="canvas-0">
96// Create a circle shaped path at the center of the view,
97// using 40% of the height of the view as its radius
98// and fill it with a radial gradient color:
99var path = new Path.Circle({
100 center: view.center,
101 radius: view.bounds.height * 0.4
102});
103
104path.fillColor = {
105 gradient: {
106 stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
107 radial: true
108 },
109 origin: path.position,
110 destination: path.bounds.rightCenter
111};
112
113var gradient = path.fillColor.gradient;
114
115// This function is called each frame of the animation:
116function onFrame(event) {
117 var blackStop = gradient.stops[2];
118 // Animate the rampPoint between 0.7 and 0.9:
119 blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
120
121 // Animate the rampPoint between 0.2 and 0.4
122 var redStop = gradient.stops[1];
123 redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
124}
125</script>
126<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
127</div>
128
129
130</div>
131
132</div>
133</div>
134
135
136<div id="color" class="member">
137<div class="member-link">
138<a name="color" href="#color"><tt><b>color</b></tt></a>
139</div>
140<div class="member-description hidden">
141
142<div class="member-text">
143 <p>The color of the gradient stop.</p>
144
145
146 <ul><b>Type:</b>
147 <li>
148 <a href="../classes/Color.html"><tt>Color</tt></a>
149 </li>
150 </ul>
151
152 <p>
153<b>Example</b> &mdash; Animating a gradient's ramp points:
154</p>
155
156<div class="paperscript split">
157
158<div class="buttons">
159<div class="button run">Run</div>
160</div>
161
162<script type="text/paperscript" canvas="canvas-1">
163// Create a circle shaped path at the center of the view,
164// using 40% of the height of the view as its radius
165// and fill it with a radial gradient color:
166var path = new Path.Circle({
167 center: view.center,
168 radius: view.bounds.height * 0.4
169});
170
171path.fillColor = {
172 gradient: {
173 stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
174 radial: true
175 },
176 origin: path.position,
177 destination: path.bounds.rightCenter
178};
179
180var redStop = path.fillColor.gradient.stops[1];
181var blackStop = path.fillColor.gradient.stops[2];
182
183// This function is called each frame of the animation:
184function onFrame(event) {
185 // Animate the rampPoint between 0.7 and 0.9:
186 blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
187
188 // Animate the rampPoint between 0.2 and 0.4
189 redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
190}
191</script>
192<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
193</div>
194
195
196</div>
197
198</div>
199</div>
200
201 </div>
202
203
204
205<!-- ============================== methods ================================ -->
206 <div class="reference-members"><h2>Methods</h2>
207
208
209<div id="clone" class="member">
210<div class="member-link">
211<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
212</div>
213<div class="member-description hidden">
214<div class="member-text">
215
216
217
218 <ul><b>Returns:</b>
219
220 <li>
221<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient-stop
222</li>
223
224 </ul>
225
226
227
228</div>
229</div>
230</div>
231
232 </div>
233
234
235
236
237<!-- =========================== copyright notice ========================= -->
238<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
239<div class="content-end"></div>
240
241</body>
Note: See TracBrowser for help on using the repository browser.