Last active
August 29, 2015 14:10
-
-
Save martyboggs/9b76fef19cf75c1f54ab to your computer and use it in GitHub Desktop.
supports point too now!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Moving Path Handles</title> | |
| <script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script> | |
| <script type="text/paperscript" canvas="canvas"> | |
| var handle; | |
| // Create a circle shaped path at the center of the view, | |
| // with a radius of 100: | |
| var path = new Path.Circle(view.center, 100); | |
| path.strokeColor = 'black'; | |
| // Fully select the path, so we can see its handles: | |
| path.fullySelected = true; | |
| function onMouseDown(event) { | |
| handle = null; | |
| // Do a hit test on path for handles: | |
| var hitResult = path.hitTest(event.point, { handles: true }); | |
| if (hitResult) { | |
| if (hitResult.type === 'handle-in') { | |
| handle = hitResult.segment.handleIn; | |
| } else if (hitResult.type === 'handle-out') { | |
| handle = hitResult.segment.handleOut; | |
| } else if (hitResult.type === 'segment') { | |
| handle = hitResult.segment.point; | |
| } | |
| } | |
| } | |
| function onMouseDrag(event) { | |
| // If we hit a handle before, move it: | |
| if (handle) { | |
| handle.x += event.delta.x; | |
| handle.y += event.delta.y; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body style="margin:0;overflow:hidden"> | |
| <canvas id="canvas" resize></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment