examples/form/dynamic.html

diff --git a/examples/form/dynamic.html b/examples/form/dynamic.html
index 4d98249..562dffc 100644 (file)
--- a/examples/form/dynamic.html
+++ b/examples/form/dynamic.html
@@ -113,7 +113,68 @@
 
     
     
-    
+    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100">
+        <rect id="r" width="300" height="100" fill="#ffa"/>
+        <line x1="0" y1="80" x2="300" y2="80" stroke="#666" stroke-width="1" stroke-dasharray="3" shape-rendering="crispEdges" pointer-events="none"/>
+        <path id="p" stroke="navy" stroke-width="2" fill="none" pointer-events="none"/>
+        <script>
+            var r = document.getElementById('r'),
+            p = document.getElementById('p'),
+            signaturePath = '',
+            isDown = false;
+        
+            function isTouchEvent(e) {
+                return e.type.match(/^touch/);
+            }
+        
+            function getCoords(e) {
+                if (isTouchEvent(e)) {
+                    return e.targetTouches[0].clientX + ',' + e.targetTouches[0].clientY;
+                }
+                return e.clientX + ',' + e.clientY;
+            }
+        
+            function down(e) {
+                signaturePath += 'M' + getCoords(e) + ' ';
+                p.setAttribute('d', signaturePath);
+                isDown = true;
+            
+                if (isTouchEvent(e)) e.preventDefault();
+            }
+        
+            function move(e) {
+                if (isDown) {
+                    signaturePath += 'L' + getCoords(e) + ' ';
+                    p.setAttribute('d', signaturePath);
+                }
+            
+                if (isTouchEvent(e)) e.preventDefault();
+            }
+        
+            function up(e) {
+                isDown = false; 
+            
+                if (isTouchEvent(e)) e.preventDefault();
+            }
+        
+            r.addEventListener('mousedown', down, false);
+            r.addEventListener('mousemove', move, false);
+            r.addEventListener('mouseup', up, false);
+            r.addEventListener('touchstart', down, false);
+            r.addEventListener('touchmove', move, false);
+            r.addEventListener('touchend', up, false);
+            r.addEventListener('mouseout', up, false);
+        
+            function clearSignature() {
+                signaturePath = '';
+                p.setAttribute('d', '');
+            }
+        
+            function getSignature() {
+                return signaturePath;
+            }
+        </script>
+    </svg>