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 * This script refer to:
5 * Availability: https://github.com/szimek/signature_pad
9 * @class Roo.bootstrap.BezierSignature
10 * @extends Roo.bootstrap.Component
11 * Bootstrap BezierSignature class
14 * Create a new BezierSignature
15 * @param {Object} config The config object
18 </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">){
19 </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">);
20 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
21 </span><span class="jsdoc-string">"resize" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
22 </span><span class="jsdoc-syntax">});
25 </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">, {
27 </span><span class="jsdoc-var">curve_data</span><span class="jsdoc-syntax">: [],
29 </span><span class="jsdoc-var">is_empty</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
31 </span><span class="jsdoc-var">mouse_btn_down</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
33 </span><span class="jsdoc-comment">/**
34 * @cfg(int) canvas height
36 </span><span class="jsdoc-var">canvas_height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'200px'</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-comment">/**
39 * @cfg(float or function) Radius of a single dot.
41 </span><span class="jsdoc-var">dot_size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
43 </span><span class="jsdoc-comment">/**
44 * @cfg(float) Minimum width of a line. Defaults to 0.5.
46 </span><span class="jsdoc-var">min_width</span><span class="jsdoc-syntax">: 0.5,
48 </span><span class="jsdoc-comment">/**
49 * @cfg(float) Maximum width of a line. Defaults to 2.5.
51 </span><span class="jsdoc-var">max_width</span><span class="jsdoc-syntax">: 2.5,
53 </span><span class="jsdoc-comment">/**
54 * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
56 </span><span class="jsdoc-var">throttle</span><span class="jsdoc-syntax">: 16,
58 </span><span class="jsdoc-comment">/**
59 * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
61 </span><span class="jsdoc-var">min_distance</span><span class="jsdoc-syntax">: 5,
63 </span><span class="jsdoc-comment">/**
64 * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
66 </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">,
68 </span><span class="jsdoc-comment">/**
69 * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
71 </span><span class="jsdoc-var">dot_color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'black'</span><span class="jsdoc-syntax">,
73 </span><span class="jsdoc-comment">/**
74 * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
76 </span><span class="jsdoc-var">velocity_filter_weight</span><span class="jsdoc-syntax">: 0.7,
78 </span><span class="jsdoc-comment">/**
79 * @cfg(function) Callback when stroke begin.
81 </span><span class="jsdoc-var">onBegin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
83 </span><span class="jsdoc-comment">/**
84 * @cfg(function) Callback when stroke end.
86 </span><span class="jsdoc-var">onEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
88 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
90 </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">;
92 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
93 </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">;
96 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">col_sizes </span><span class="jsdoc-syntax">= [
97 </span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">,
98 </span><span class="jsdoc-string">'md'</span><span class="jsdoc-syntax">,
99 </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,
100 </span><span class="jsdoc-string">'xs'
101 </span><span class="jsdoc-syntax">];
103 </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">< </span><span class="jsdoc-var">col_sizes.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
104 </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">]]) {
105 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">" col-"</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">"-"</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">]];
109 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
110 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
111 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
112 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
114 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
115 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-signature-body'</span><span class="jsdoc-syntax">,
116 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
118 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,
119 </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">,
120 </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.canvas_height</span><span class="jsdoc-syntax">,
121 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.canvas_width
122 </span><span class="jsdoc-syntax">}
126 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
127 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'file'</span><span class="jsdoc-syntax">,
128 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display: none'
129 </span><span class="jsdoc-syntax">}
133 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
136 </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
138 </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">);
140 </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">();
142 </span><span class="jsdoc-comment">// mouse && touch event swapping...
143 </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">;
144 </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">;
146 </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">;
147 </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">);
148 </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">);
149 </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">);
151 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window.PointerEvent</span><span class="jsdoc-syntax">) {
152 </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">);
153 </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">);
154 </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">);
157 </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">) {
158 </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">);
159 </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">);
160 </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">);
163 </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">);
165 </span><span class="jsdoc-comment">// file input event
166 </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">);
168 </span><span class="jsdoc-var">this.clear</span><span class="jsdoc-syntax">();
170 </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
173 </span><span class="jsdoc-var">resize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
175 </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">;
176 </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">();
177 </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">);
179 </span><span class="jsdoc-comment">// setting canvas width will clean img data
180 </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= 0;
182 </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">?
183 </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">;
185 </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;
186 </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;
188 </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">;
190 </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);
193 </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">)
195 </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) {
196 </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">;
197 </span><span class="jsdoc-var">this.strokeBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
201 </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">)
203 </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">) {
204 </span><span class="jsdoc-var">this.strokeMoveUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
208 </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">)
210 </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 && </span><span class="jsdoc-var">this.mouse_btn_down</span><span class="jsdoc-syntax">) {
211 </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">;
212 </span><span class="jsdoc-var">this.strokeEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
216 </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">) {
218 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
219 </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) {
220 </span><span class="jsdoc-comment">// var touch = e.browserEvent.changedTouches[0];
221 // this.strokeBegin(touch);
223 </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...
224 </span><span class="jsdoc-syntax">}
227 </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">) {
228 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
229 </span><span class="jsdoc-comment">// var touch = event.targetTouches[0];
230 // _this._strokeMoveUpdate(touch);
231 </span><span class="jsdoc-var">this.strokeMoveUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
234 </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">) {
235 </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">;
236 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wasCanvasTouched</span><span class="jsdoc-syntax">) {
237 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
238 </span><span class="jsdoc-comment">// var touch = event.changedTouches[0];
239 // _this._strokeEnd(touch);
240 </span><span class="jsdoc-var">this.strokeEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
244 </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
245 </span><span class="jsdoc-var">this._lastPoints </span><span class="jsdoc-syntax">= [];
246 </span><span class="jsdoc-var">this._lastVelocity </span><span class="jsdoc-syntax">= 0;
247 </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;
248 </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">;
251 </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">)
253 </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
255 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.throttle</span><span class="jsdoc-syntax">) {
256 </span><span class="jsdoc-var">this.throttle</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">);
258 </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
259 </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
263 </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">)
265 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPointGroup </span><span class="jsdoc-syntax">= {
266 </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dot_color</span><span class="jsdoc-syntax">,
267 </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: []
270 </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">) {
271 </span><span class="jsdoc-var">this.onBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
274 </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">);
275 </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
276 </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
279 </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">)
281 </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">();
282 </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">());
283 </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];
284 </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">;
285 </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">> 0 && </span><span class="jsdoc-var">lastPoints</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lastPoints.length </span><span class="jsdoc-syntax">- 1];
286 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isLastPointTooClose </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPoint
287 </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">) <= </span><span class="jsdoc-var">this.min_distance
288 </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
289 </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">;
290 </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">&& </span><span class="jsdoc-var">isLastPointTooClose</span><span class="jsdoc-syntax">)) {
291 </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">);
292 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">lastPoint</span><span class="jsdoc-syntax">) {
293 </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">});
295 </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">) {
296 </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">});
298 </span><span class="jsdoc-var">lastPoints.push</span><span class="jsdoc-syntax">({
299 </span><span class="jsdoc-var">time</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.time</span><span class="jsdoc-syntax">,
300 </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.x</span><span class="jsdoc-syntax">,
301 </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.y
302 </span><span class="jsdoc-syntax">});
306 </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">)
308 </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
309 </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">) {
310 </span><span class="jsdoc-var">this.onEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
314 </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">) {
315 </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">;
316 </span><span class="jsdoc-var">_lastPoints.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">);
317 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints.length </span><span class="jsdoc-syntax">> 2) {
318 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints.length </span><span class="jsdoc-syntax">=== 3) {
319 </span><span class="jsdoc-var">_lastPoints.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[0]);
321 </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]);
322 </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">);
323 </span><span class="jsdoc-var">_lastPoints.shift</span><span class="jsdoc-syntax">();
324 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">;
326 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
329 </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">) {
330 </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">) +
331 (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">;
333 </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">);
334 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widths </span><span class="jsdoc-syntax">= {
335 </span><span class="jsdoc-var">end</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">newWidth</span><span class="jsdoc-syntax">,
336 </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this._lastWidth
337 </span><span class="jsdoc-syntax">};
339 </span><span class="jsdoc-var">this._lastVelocity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">velocity</span><span class="jsdoc-syntax">;
340 </span><span class="jsdoc-var">this._lastWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newWidth</span><span class="jsdoc-syntax">;
341 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">;
344 </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">) {
345 </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">;
346 </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">();
347 </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">;
348 </span><span class="jsdoc-var">ctx.beginPath</span><span class="jsdoc-syntax">();
349 </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">);
350 </span><span class="jsdoc-var">ctx.closePath</span><span class="jsdoc-syntax">();
351 </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
352 </span><span class="jsdoc-var">ctx.fill</span><span class="jsdoc-syntax">();
355 </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">) {
356 </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">;
357 </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">();
358 </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">;
359 </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;
360 </span><span class="jsdoc-var">ctx.beginPath</span><span class="jsdoc-syntax">();
361 </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
362 </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">< </span><span class="jsdoc-var">drawSteps</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
363 </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">;
364 </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">;
365 </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">;
366 </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">;
367 </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">;
368 </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">;
369 </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">;
370 </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">;
371 </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">;
372 </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">;
373 </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">;
374 </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">;
375 </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">;
376 </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">;
377 </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">;
378 </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">);
380 </span><span class="jsdoc-var">ctx.closePath</span><span class="jsdoc-syntax">();
381 </span><span class="jsdoc-var">ctx.fill</span><span class="jsdoc-syntax">();
384 </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">) {
385 </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">();
386 </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">);
387 </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">);
388 </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
391 </span><span class="jsdoc-var">clear</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
393 </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">();
394 </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">;
395 </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">;
396 </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">);
397 </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">);
398 </span><span class="jsdoc-var">this.curve_data </span><span class="jsdoc-syntax">= [];
399 </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
400 </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
403 </span><span class="jsdoc-var">fileEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
405 </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">();
408 </span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
410 </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">();
413 </span><span class="jsdoc-var">canvasElCtx</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
415 </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">);
418 </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">)
420 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.is_empty</span><span class="jsdoc-syntax">) {
421 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
424 </span><span class="jsdoc-comment">// encryption ?
425 </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);
428 </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">)
430 </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">();
432 </span><span class="jsdoc-var">img.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
433 </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);
434 }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
436 </span><span class="jsdoc-var">img.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">img_src</span><span class="jsdoc-syntax">;
438 </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
441 </span><span class="jsdoc-var">selectImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
443 </span><span class="jsdoc-var">this.fileEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.click</span><span class="jsdoc-syntax">();
446 </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">)
448 </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">();
450 </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">){
451 </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">();
452 </span><span class="jsdoc-var">img.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
453 </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
454 </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);
455 }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
456 </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">;
457 }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
459 </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]);
462 </span><span class="jsdoc-comment">// Bezier Point Constructor
463 </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
464 </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">) {
465 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
466 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
467 </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">();
469 </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">) {
470 </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));
472 </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">) {
473 </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">&& </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.y </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.time</span><span class="jsdoc-syntax">;
475 </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">) {
476 </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
477 </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">)
480 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">;
484 </span><span class="jsdoc-comment">// Bezier Constructor
485 </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
486 </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">) {
487 </span><span class="jsdoc-var">this.startPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">;
488 </span><span class="jsdoc-var">this.control2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">control2</span><span class="jsdoc-syntax">;
489 </span><span class="jsdoc-var">this.control1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">control1</span><span class="jsdoc-syntax">;
490 </span><span class="jsdoc-var">this.endPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">;
491 </span><span class="jsdoc-var">this.startWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">startWidth</span><span class="jsdoc-syntax">;
492 </span><span class="jsdoc-var">this.endWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">endWidth</span><span class="jsdoc-syntax">;
494 </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">) {
495 </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">;
496 </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">;
497 </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">);
499 </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">) {
500 </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">;
501 </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">;
502 </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">;
503 </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">;
504 </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 };
505 </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 };
506 </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">);
507 </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">);
508 </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">;
509 </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">;
510 </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">);
511 </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">};
512 </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">;
513 </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">;
514 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
515 </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">),
516 </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">)
519 </span><span class="jsdoc-var">Bezier.prototype.length </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
520 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">steps </span><span class="jsdoc-syntax">= 10;
521 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">= 0;
522 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">px</span><span class="jsdoc-syntax">;
523 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">py</span><span class="jsdoc-syntax">;
524 </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"><= </span><span class="jsdoc-var">steps</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
525 </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">;
526 </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">);
527 </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">);
528 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">> 0) {
529 </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">;
530 </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">;
531 </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">);
533 </span><span class="jsdoc-var">px </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cx</span><span class="jsdoc-syntax">;
534 </span><span class="jsdoc-var">py </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cy</span><span class="jsdoc-syntax">;
536 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">;
538 </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">) {
539 </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">))
540 + (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">)
541 + (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">)
542 + (</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">);
544 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">;
547 </span><span class="jsdoc-var">throttle</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">) {
548 </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; }
549 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= 0;
550 </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">;
551 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
552 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">;
553 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">;
554 </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">() {
555 </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
556 </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
557 </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">);
558 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
559 </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
560 </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= [];
563 </span><span class="jsdoc-keyword">return function </span><span class="jsdoc-var">wrapper</span><span class="jsdoc-syntax">() {
564 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= [];
565 </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">< </span><span class="jsdoc-var">arguments.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">++) {
566 </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">];
568 </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">();
569 </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">);
570 </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
571 </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">;
572 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax"><= 0 || </span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">> </span><span class="jsdoc-var">wait</span><span class="jsdoc-syntax">) {
573 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
574 </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">);
575 </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
577 </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">now</span><span class="jsdoc-syntax">;
578 </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">);
579 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
580 </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
581 </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= [];
584 </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
585 </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">);
587 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
595 </span></code></body></html>