projects / roojs1 / blob
? search:


895c98f87cb3ba54416787ef3c0ce3b755b541ac
[roojs1] / docs / src / Roo_bootstrap_BezierSignature.js.html
1 <html><head><title>/home/alan/gitlive/roojs1/Roo/bootstrap/BezierSignature.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
2  * @class Roo.bootstrap.BezierSignature
3  * @extends Roo.bootstrap.Component
4  * Bootstrap BezierSignature class
5  * This script refer to:
6  *    Title: Signature Pad
7  *    Author: szimek
8  *    Availability: https://github.com/szimek/signature_pad
9  *
10  * @constructor
11  * Create a new BezierSignature
12  * @param {Object} config The config object
13  */
14
15 </span><span class="jsdoc-var">Roo.bootstrap.BezierSignature </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
16     </span><span class="jsdoc-var">Roo.bootstrap.BezierSignature.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
17     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
18         </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
19     </span><span class="jsdoc-syntax">});
20 };
21
22 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.BezierSignature</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
23
24     </span><span class="jsdoc-var">curve_data</span><span class="jsdoc-syntax">: [],
25
26     </span><span class="jsdoc-var">is_empty</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
27
28     </span><span class="jsdoc-var">mouse_btn_down</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
29
30     </span><span class="jsdoc-comment">/**
31      * @cfg(int) canvas height
32      */
33     </span><span class="jsdoc-var">canvas_height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'200px'</span><span class="jsdoc-syntax">,
34
35     </span><span class="jsdoc-comment">/**
36      * @cfg(float or function) Radius of a single dot.
37      */
38     </span><span class="jsdoc-var">dot_size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
39
40     </span><span class="jsdoc-comment">/**
41      * @cfg(float) Minimum width of a line. Defaults to 0.5.
42      */
43     </span><span class="jsdoc-var">min_width</span><span class="jsdoc-syntax">: 0.5,
44
45     </span><span class="jsdoc-comment">/**
46      * @cfg(float) Maximum width of a line. Defaults to 2.5.
47      */
48     </span><span class="jsdoc-var">max_width</span><span class="jsdoc-syntax">: 2.5,
49
50     </span><span class="jsdoc-comment">/**
51      * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
52      */
53     </span><span class="jsdoc-var">throttle</span><span class="jsdoc-syntax">: 16,
54
55     </span><span class="jsdoc-comment">/**
56      * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
57      */
58     </span><span class="jsdoc-var">min_distance</span><span class="jsdoc-syntax">: 5,
59
60     </span><span class="jsdoc-comment">/**
61      * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to &quot;rgba(0,0,0,0)&quot; (transparent black). Use a non-transparent color e.g. &quot;rgb(255,255,255)&quot; (opaque white) if you'd like to save signatures as JPEG images.
62      */
63     </span><span class="jsdoc-var">bg_color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rgba(0, 0, 0, 0)'</span><span class="jsdoc-syntax">,
64
65     </span><span class="jsdoc-comment">/**
66      * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to &quot;black&quot;.
67      */
68     </span><span class="jsdoc-var">dot_color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'black'</span><span class="jsdoc-syntax">,
69
70     </span><span class="jsdoc-comment">/**
71      * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
72      */
73     </span><span class="jsdoc-var">velocity_filter_weight</span><span class="jsdoc-syntax">: 0.7,
74
75     </span><span class="jsdoc-comment">/**
76      * @cfg(function) Callback when stroke begin.
77      */
78     </span><span class="jsdoc-var">onBegin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
79
80     </span><span class="jsdoc-comment">/**
81      * @cfg(function) Callback when stroke end.
82      */
83     </span><span class="jsdoc-var">onEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
84
85     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
86     {
87         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-signature column'</span><span class="jsdoc-syntax">;
88
89         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
90             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
91         }
92
93         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">col_sizes </span><span class="jsdoc-syntax">= [
94             </span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">,
95             </span><span class="jsdoc-string">'md'</span><span class="jsdoc-syntax">,
96             </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,
97             </span><span class="jsdoc-string">'xs'
98         </span><span class="jsdoc-syntax">];
99
100         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">col_sizes.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
101             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col_sizes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]) {
102                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot; col-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">col_sizes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]+</span><span class="jsdoc-string">&quot;-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col_sizes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]];
103             }
104         }
105
106         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
107             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
108             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
109             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
110                 {
111                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
112                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-signature-body'</span><span class="jsdoc-syntax">,
113                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
114                         {
115                             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,
116                             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-signature-body-canvas'</span><span class="jsdoc-syntax">,
117                             </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.canvas_height</span><span class="jsdoc-syntax">,
118                             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.canvas_width
119                         </span><span class="jsdoc-syntax">}
120                     ]
121                 },
122                 {
123                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
124                     </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'file'</span><span class="jsdoc-syntax">,
125                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display: none'
126                 </span><span class="jsdoc-syntax">}
127             ]
128         };
129
130         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
131     },
132
133     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
134     {
135         </span><span class="jsdoc-var">Roo.bootstrap.BezierSignature.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
136
137         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">();
138
139         </span><span class="jsdoc-comment">// mouse &amp;&amp; touch event swapping...
140         </span><span class="jsdoc-var">canvas.dom.style.touchAction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
141         </span><span class="jsdoc-var">canvas.dom.style.msTouchAction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
142
143         </span><span class="jsdoc-var">this.mouse_btn_down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
144         </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
145         </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
146         </span><span class="jsdoc-var">Roo.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
147
148         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window.PointerEvent</span><span class="jsdoc-syntax">) {
149             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pointerdown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
150             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pointermove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
151             </span><span class="jsdoc-var">Roo.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pointerup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
152         }
153
154         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'ontouchstart' </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">) {
155             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleTouchStart</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
156             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchmove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleTouchMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
157             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleTouchEnd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
158         }
159
160         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
161
162         </span><span class="jsdoc-comment">// file input event
163         </span><span class="jsdoc-var">this.fileEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'change'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.uploadImage</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
164
165         </span><span class="jsdoc-var">this.clear</span><span class="jsdoc-syntax">();
166
167         </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
168     },
169
170     </span><span class="jsdoc-var">resize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
171
172         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
173         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
174         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img_data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ctx.getImageData</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">canvas.height</span><span class="jsdoc-syntax">);
175
176         </span><span class="jsdoc-comment">// setting canvas width will clean img data
177         </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= 0;
178
179         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.getComputedStyle </span><span class="jsdoc-syntax">?
180             </span><span class="jsdoc-var">getComputedStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.el.dom.currentStyle</span><span class="jsdoc-syntax">;
181
182         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padding_left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style.paddingLeft</span><span class="jsdoc-syntax">) || 0;
183         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padding_right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style.paddingRight</span><span class="jsdoc-syntax">) || 0;
184
185         </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.clientWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">padding_left </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">padding_right</span><span class="jsdoc-syntax">;
186
187         </span><span class="jsdoc-var">ctx.putImageData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img_data</span><span class="jsdoc-syntax">, 0, 0);
188     },
189
190     </span><span class="jsdoc-var">_handleMouseDown</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
191     {
192         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.which </span><span class="jsdoc-syntax">=== 1) {
193             </span><span class="jsdoc-var">this.mouse_btn_down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
194             </span><span class="jsdoc-var">this.strokeBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
195         }
196     },
197
198     </span><span class="jsdoc-var">_handleMouseMove</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
199     {
200         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mouse_btn_down</span><span class="jsdoc-syntax">) {
201             </span><span class="jsdoc-var">this.strokeMoveUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
202         }
203     },
204
205     </span><span class="jsdoc-var">_handleMouseUp</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
206     {
207         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.which </span><span class="jsdoc-syntax">=== 1 &amp;&amp; </span><span class="jsdoc-var">this.mouse_btn_down</span><span class="jsdoc-syntax">) {
208             </span><span class="jsdoc-var">this.mouse_btn_down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
209             </span><span class="jsdoc-var">this.strokeEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
210         }
211     },
212
213     </span><span class="jsdoc-var">_handleTouchStart</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
214
215         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
216         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.targetTouches.length </span><span class="jsdoc-syntax">=== 1) {
217             </span><span class="jsdoc-comment">// var touch = e.browserEvent.changedTouches[0];
218             // this.strokeBegin(touch);
219
220              </span><span class="jsdoc-var">this.strokeBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// assume e catching the correct xy...
221         </span><span class="jsdoc-syntax">}
222     },
223
224     </span><span class="jsdoc-var">_handleTouchMove</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
225         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
226         </span><span class="jsdoc-comment">// var touch = event.targetTouches[0];
227         // _this._strokeMoveUpdate(touch);
228         </span><span class="jsdoc-var">this.strokeMoveUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
229     },
230
231     </span><span class="jsdoc-var">_handleTouchEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
232         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wasCanvasTouched </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.target </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
233         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wasCanvasTouched</span><span class="jsdoc-syntax">) {
234             </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
235             </span><span class="jsdoc-comment">// var touch = event.changedTouches[0];
236             // _this._strokeEnd(touch);
237             </span><span class="jsdoc-var">this.strokeEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
238         }
239     },
240
241     </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
242         </span><span class="jsdoc-var">this._lastPoints </span><span class="jsdoc-syntax">= [];
243         </span><span class="jsdoc-var">this._lastVelocity </span><span class="jsdoc-syntax">= 0;
244         </span><span class="jsdoc-var">this._lastWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.min_width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.max_width</span><span class="jsdoc-syntax">) / 2;
245         </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dot_color</span><span class="jsdoc-syntax">;
246     },
247
248     </span><span class="jsdoc-var">strokeMoveUpdate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
249     {
250         </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
251
252         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.throttle</span><span class="jsdoc-syntax">) {
253             </span><span class="jsdoc-var">this.throttleStroke</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.throttle</span><span class="jsdoc-syntax">);
254         }
255         </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
256             </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
257         }
258     },
259
260     </span><span class="jsdoc-var">strokeBegin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
261     {
262         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPointGroup </span><span class="jsdoc-syntax">= {
263             </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dot_color</span><span class="jsdoc-syntax">,
264             </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: []
265         };
266
267         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.onBegin </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) {
268             </span><span class="jsdoc-var">this.onBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
269         }
270
271         </span><span class="jsdoc-var">this.curve_data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newPointGroup</span><span class="jsdoc-syntax">);
272         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
273         </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
274     },
275
276     </span><span class="jsdoc-var">strokeUpdate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
277     {
278         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rect </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.getBoundingClientRect</span><span class="jsdoc-syntax">();
279         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">point </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">this.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.xy</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">rect.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e.xy</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">rect.top</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">());
280         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastPointGroup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.curve_data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.curve_data.length </span><span class="jsdoc-syntax">- 1];
281         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPointGroup.points</span><span class="jsdoc-syntax">;
282         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPoints.length </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">lastPoints</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lastPoints.length </span><span class="jsdoc-syntax">- 1];
283         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isLastPointTooClose </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPoint
284             </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">point.distanceTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lastPoint</span><span class="jsdoc-syntax">) &lt;= </span><span class="jsdoc-var">this.min_distance
285             </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
286         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPointGroup.color</span><span class="jsdoc-syntax">;
287         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">lastPoint </span><span class="jsdoc-syntax">|| !(</span><span class="jsdoc-var">lastPoint </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">isLastPointTooClose</span><span class="jsdoc-syntax">)) {
288             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">curve </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addPoint</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">);
289             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">lastPoint</span><span class="jsdoc-syntax">) {
290                 </span><span class="jsdoc-var">this.drawDot</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">});
291             }
292             </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">) {
293                 </span><span class="jsdoc-var">this.drawCurve</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">});
294             }
295             </span><span class="jsdoc-var">lastPoints.push</span><span class="jsdoc-syntax">({
296                 </span><span class="jsdoc-var">time</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.time</span><span class="jsdoc-syntax">,
297                 </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.x</span><span class="jsdoc-syntax">,
298                 </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.y
299             </span><span class="jsdoc-syntax">});
300         }
301     },
302
303     </span><span class="jsdoc-var">strokeEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
304     {
305         </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
306         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.onEnd </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) {
307             </span><span class="jsdoc-var">this.onEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
308         }
309     },
310
311     </span><span class="jsdoc-var">addPoint</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">) {
312         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_lastPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._lastPoints</span><span class="jsdoc-syntax">;
313         </span><span class="jsdoc-var">_lastPoints.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">);
314         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints.length </span><span class="jsdoc-syntax">&gt; 2) {
315             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints.length </span><span class="jsdoc-syntax">=== 3) {
316                 </span><span class="jsdoc-var">_lastPoints.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[0]);
317             }
318             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widths </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calculateCurveWidths</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[2]);
319             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">curve </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.Bezier.fromPoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
320             </span><span class="jsdoc-var">_lastPoints.shift</span><span class="jsdoc-syntax">();
321             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">;
322         }
323         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
324     },
325
326     </span><span class="jsdoc-var">calculateCurveWidths</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">) {
327         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">velocity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.velocity_filter_weight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">endPoint.velocityFrom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">) +
328             (1 - </span><span class="jsdoc-var">this.velocity_filter_weight</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this._lastVelocity</span><span class="jsdoc-syntax">;
329
330         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.max_width </span><span class="jsdoc-syntax">/ (</span><span class="jsdoc-var">velocity </span><span class="jsdoc-syntax">+ 1), </span><span class="jsdoc-var">this.min_width</span><span class="jsdoc-syntax">);
331         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widths </span><span class="jsdoc-syntax">= {
332             </span><span class="jsdoc-var">end</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">newWidth</span><span class="jsdoc-syntax">,
333             </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this._lastWidth
334         </span><span class="jsdoc-syntax">};
335
336         </span><span class="jsdoc-var">this._lastVelocity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">velocity</span><span class="jsdoc-syntax">;
337         </span><span class="jsdoc-var">this._lastWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newWidth</span><span class="jsdoc-syntax">;
338         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">;
339     },
340
341     </span><span class="jsdoc-var">drawDot</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_a</span><span class="jsdoc-syntax">) {
342         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">point </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.point</span><span class="jsdoc-syntax">;
343         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
344         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.dot_size </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'function' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dot_size</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">this.dot_size</span><span class="jsdoc-syntax">;
345         </span><span class="jsdoc-var">ctx.beginPath</span><span class="jsdoc-syntax">();
346         </span><span class="jsdoc-var">this.drawCurveSegment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">point.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
347         </span><span class="jsdoc-var">ctx.closePath</span><span class="jsdoc-syntax">();
348         </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
349         </span><span class="jsdoc-var">ctx.fill</span><span class="jsdoc-syntax">();
350     },
351
352     </span><span class="jsdoc-var">drawCurve</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_a</span><span class="jsdoc-syntax">) {
353         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">curve </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.curve</span><span class="jsdoc-syntax">;
354         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
355         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widthDelta </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">curve.endWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">curve.startWidth</span><span class="jsdoc-syntax">;
356         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">drawSteps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">curve.length</span><span class="jsdoc-syntax">()) * 2;
357         </span><span class="jsdoc-var">ctx.beginPath</span><span class="jsdoc-syntax">();
358         </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
359         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">drawSteps</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
360         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">drawSteps</span><span class="jsdoc-syntax">;
361         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
362         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
363         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">= 1 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
364         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">u</span><span class="jsdoc-syntax">;
365         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">uuu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">u</span><span class="jsdoc-syntax">;
366         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">uuu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.startPoint.x</span><span class="jsdoc-syntax">;
367         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control1.x</span><span class="jsdoc-syntax">;
368         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control2.x</span><span class="jsdoc-syntax">;
369         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.endPoint.x</span><span class="jsdoc-syntax">;
370         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">uuu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.startPoint.y</span><span class="jsdoc-syntax">;
371         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control1.y</span><span class="jsdoc-syntax">;
372         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control2.y</span><span class="jsdoc-syntax">;
373         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.endPoint.y</span><span class="jsdoc-syntax">;
374         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">curve.startWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">widthDelta</span><span class="jsdoc-syntax">;
375         </span><span class="jsdoc-var">this.drawCurveSegment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
376         }
377         </span><span class="jsdoc-var">ctx.closePath</span><span class="jsdoc-syntax">();
378         </span><span class="jsdoc-var">ctx.fill</span><span class="jsdoc-syntax">();
379     },
380
381     </span><span class="jsdoc-var">drawCurveSegment</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">) {
382         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
383         </span><span class="jsdoc-var">ctx.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
384         </span><span class="jsdoc-var">ctx.arc</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, 0, 2 * </span><span class="jsdoc-var">Math.PI</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
385         </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
386     },
387
388     </span><span class="jsdoc-var">clear</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
389     {
390         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
391         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
392         </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bg_color</span><span class="jsdoc-syntax">;
393         </span><span class="jsdoc-var">ctx.clearRect</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">canvas.height</span><span class="jsdoc-syntax">);
394         </span><span class="jsdoc-var">ctx.fillRect</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">canvas.height</span><span class="jsdoc-syntax">);
395         </span><span class="jsdoc-var">this.curve_data </span><span class="jsdoc-syntax">= [];
396         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
397         </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
398     },
399
400     </span><span class="jsdoc-var">fileEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
401     {
402         </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
403     },
404
405     </span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
406     {
407         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
408     },
409
410     </span><span class="jsdoc-var">canvasElCtx</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
411     {
412         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.getContext</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'2d'</span><span class="jsdoc-syntax">);
413     },
414
415     </span><span class="jsdoc-var">getImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">)
416     {
417         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.is_empty</span><span class="jsdoc-syntax">) {
418             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
419         }
420
421         </span><span class="jsdoc-comment">// encryption ?
422         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.toDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'image/'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">, 1);
423     },
424
425     </span><span class="jsdoc-var">drawFromImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img_src</span><span class="jsdoc-syntax">)
426     {
427         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Image</span><span class="jsdoc-syntax">();
428
429         </span><span class="jsdoc-var">img.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
430             </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">, 0, 0);
431         }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
432
433         </span><span class="jsdoc-var">img.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">img_src</span><span class="jsdoc-syntax">;
434
435         </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
436     },
437
438     </span><span class="jsdoc-var">selectImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
439     {
440         </span><span class="jsdoc-var">this.fileEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.click</span><span class="jsdoc-syntax">();
441     },
442
443     </span><span class="jsdoc-var">uploadImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
444     {
445         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FileReader</span><span class="jsdoc-syntax">();
446
447         </span><span class="jsdoc-var">reader.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
448             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Image</span><span class="jsdoc-syntax">();
449             </span><span class="jsdoc-var">img.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
450                 </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
451                 </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">, 0, 0);
452             }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
453             </span><span class="jsdoc-var">img.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.target.result</span><span class="jsdoc-syntax">;
454         }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
455
456         </span><span class="jsdoc-var">reader.readAsDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.target.files</span><span class="jsdoc-syntax">[0]);
457     },
458
459     </span><span class="jsdoc-comment">// Bezier Point Constructor
460     </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
461         </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">time</span><span class="jsdoc-syntax">) {
462             </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
463             </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
464             </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">time </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
465         }
466         </span><span class="jsdoc-var">Point.prototype.distanceTo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">) {
467             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">start.x</span><span class="jsdoc-syntax">, 2) + </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">start.y</span><span class="jsdoc-syntax">, 2));
468         };
469         </span><span class="jsdoc-var">Point.prototype.equals </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">other</span><span class="jsdoc-syntax">) {
470             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.x </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.y </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.time</span><span class="jsdoc-syntax">;
471         };
472         </span><span class="jsdoc-var">Point.prototype.velocityFrom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">) {
473             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">start.time
474             </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.distanceTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">) / (</span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">start.time</span><span class="jsdoc-syntax">)
475             : 0;
476         };
477         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">;
478     }()),
479
480
481     </span><span class="jsdoc-comment">// Bezier Constructor
482     </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
483         </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">control2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">control1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">startWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">endWidth</span><span class="jsdoc-syntax">) {
484             </span><span class="jsdoc-var">this.startPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">;
485             </span><span class="jsdoc-var">this.control2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">control2</span><span class="jsdoc-syntax">;
486             </span><span class="jsdoc-var">this.control1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">control1</span><span class="jsdoc-syntax">;
487             </span><span class="jsdoc-var">this.endPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">;
488             </span><span class="jsdoc-var">this.startWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">startWidth</span><span class="jsdoc-syntax">;
489             </span><span class="jsdoc-var">this.endWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">endWidth</span><span class="jsdoc-syntax">;
490         }
491         </span><span class="jsdoc-var">Bezier.fromPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">) {
492             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calculateControlPoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[2], </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.c2</span><span class="jsdoc-syntax">;
493             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c3 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calculateControlPoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[2], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[3], </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.c1</span><span class="jsdoc-syntax">;
494             </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c3</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[2], </span><span class="jsdoc-var">widths.start</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">widths.end</span><span class="jsdoc-syntax">);
495         };
496         </span><span class="jsdoc-var">Bezier.calculateControlPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s3</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">) {
497             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dx1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s1.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s2.x</span><span class="jsdoc-syntax">;
498             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dy1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s1.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s2.y</span><span class="jsdoc-syntax">;
499             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dx2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s3.x</span><span class="jsdoc-syntax">;
500             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dy2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s3.y</span><span class="jsdoc-syntax">;
501             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m1 </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s1.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s2.x</span><span class="jsdoc-syntax">) / 2.0, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s1.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s2.y</span><span class="jsdoc-syntax">) / 2.0 };
502             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m2 </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s2.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s3.x</span><span class="jsdoc-syntax">) / 2.0, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s2.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s3.y</span><span class="jsdoc-syntax">) / 2.0 };
503             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dx1 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dx1 </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dy1 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dy1</span><span class="jsdoc-syntax">);
504             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dx2 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dx2 </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dy2 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dy2</span><span class="jsdoc-syntax">);
505             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dxm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m1.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">m2.x</span><span class="jsdoc-syntax">;
506             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dym </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m1.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">m2.y</span><span class="jsdoc-syntax">;
507             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">l2 </span><span class="jsdoc-syntax">/ (</span><span class="jsdoc-var">l1 </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">l2</span><span class="jsdoc-syntax">);
508             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cm </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">m2.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dxm </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">m2.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dym </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">};
509             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">cm.x</span><span class="jsdoc-syntax">;
510             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">cm.y</span><span class="jsdoc-syntax">;
511             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
512                 </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">scope.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m1.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">tx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m1.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">),
513                 </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">scope.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m2.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">tx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m2.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">)
514             };
515         };
516         </span><span class="jsdoc-var">Bezier.prototype.length </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
517             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">steps </span><span class="jsdoc-syntax">= 10;
518             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">= 0;
519             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">px</span><span class="jsdoc-syntax">;
520             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">py</span><span class="jsdoc-syntax">;
521             </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">steps</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
522                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">steps</span><span class="jsdoc-syntax">;
523                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startPoint.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control1.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control2.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.endPoint.x</span><span class="jsdoc-syntax">);
524                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startPoint.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control1.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control2.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.endPoint.y</span><span class="jsdoc-syntax">);
525                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt; 0) {
526                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xdiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cx </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">px</span><span class="jsdoc-syntax">;
527                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ydiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cy </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">py</span><span class="jsdoc-syntax">;
528                     </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xdiff </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">xdiff </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ydiff </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">ydiff</span><span class="jsdoc-syntax">);
529                 }
530                 </span><span class="jsdoc-var">px </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cx</span><span class="jsdoc-syntax">;
531                 </span><span class="jsdoc-var">py </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cy</span><span class="jsdoc-syntax">;
532             }
533             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">;
534         };
535         </span><span class="jsdoc-var">Bezier.prototype.point </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">end</span><span class="jsdoc-syntax">) {
536             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start </span><span class="jsdoc-syntax">* (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">))
537             + (3.0 * </span><span class="jsdoc-var">c1 </span><span class="jsdoc-syntax">* (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
538             + (3.0 * </span><span class="jsdoc-var">c2 </span><span class="jsdoc-syntax">* (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
539             + (</span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
540         };
541         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">;
542     }()),
543
544     </span><span class="jsdoc-var">throttleStroke</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">wait</span><span class="jsdoc-syntax">) {
545       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wait </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">void </span><span class="jsdoc-syntax">0) { </span><span class="jsdoc-var">wait </span><span class="jsdoc-syntax">= 250; }
546       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= 0;
547       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
548       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
549       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">;
550       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">;
551       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">later </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
552           </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
553           </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
554           </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">);
555           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
556               </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
557               </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= [];
558           }
559       };
560       </span><span class="jsdoc-keyword">return function </span><span class="jsdoc-var">wrapper</span><span class="jsdoc-syntax">() {
561           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= [];
562           </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">_i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">arguments.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">++) {
563               </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">];
564           }
565           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">now </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
566           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wait </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">now </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">previous</span><span class="jsdoc-syntax">);
567           </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
568           </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">;
569           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">&lt;= 0 || </span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">wait</span><span class="jsdoc-syntax">) {
570               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
571                   </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">);
572                   </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
573               }
574               </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">now</span><span class="jsdoc-syntax">;
575               </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">);
576               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
577                   </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
578                   </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= [];
579               }
580           }
581           </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
582               </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">later</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">remaining</span><span class="jsdoc-syntax">);
583           }
584           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
585       };
586   }
587
588 });
589
590
591
592  </span></code></body></html>
RooJS - Version 1