| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <title>Bezier Tool</title>
|
|---|
| 6 | <link rel="stylesheet" href="../css/style.css">
|
|---|
| 7 | <script type="text/javascript" src="../../dist/paper.js"></script>
|
|---|
| 8 | <script type="text/paperscript" canvas="canvas">
|
|---|
| 9 | var path;
|
|---|
| 10 | var types = ['point', 'handleIn', 'handleOut'];
|
|---|
| 11 | function findHandle(point) {
|
|---|
| 12 | for (var i = 0, l = path.segments.length; i < l; i++) {
|
|---|
| 13 | for (var j = 0; j < 3; j++) {
|
|---|
| 14 | var type = types[j];
|
|---|
| 15 | var segment = path.segments[i];
|
|---|
| 16 | var segmentPoint = type == 'point'
|
|---|
| 17 | ? segment.point
|
|---|
| 18 | : segment.point + segment[type];
|
|---|
| 19 | var distance = (point - segmentPoint).length;
|
|---|
| 20 | if (distance < 3) {
|
|---|
| 21 | return {
|
|---|
| 22 | type: type,
|
|---|
| 23 | segment: segment
|
|---|
| 24 | };
|
|---|
| 25 | }
|
|---|
| 26 | }
|
|---|
| 27 | }
|
|---|
| 28 | return null;
|
|---|
| 29 | }
|
|---|
| 30 |
|
|---|
| 31 | var currentSegment, mode, type;
|
|---|
| 32 | function onMouseDown(event) {
|
|---|
| 33 | if (currentSegment)
|
|---|
| 34 | currentSegment.selected = false;
|
|---|
| 35 | mode = type = currentSegment = null;
|
|---|
| 36 |
|
|---|
| 37 | if (!path) {
|
|---|
| 38 | path = new Path();
|
|---|
| 39 | path.fillColor = {
|
|---|
| 40 | hue: 360 * Math.random(),
|
|---|
| 41 | saturation: 1,
|
|---|
| 42 | brightness: 1,
|
|---|
| 43 | alpha: 0.5
|
|---|
| 44 | };
|
|---|
| 45 | }
|
|---|
| 46 |
|
|---|
| 47 | var result = findHandle(event.point);
|
|---|
| 48 | if (result) {
|
|---|
| 49 | currentSegment = result.segment;
|
|---|
| 50 | type = result.type;
|
|---|
| 51 | if (path.segments.length > 1 && result.type == 'point'
|
|---|
| 52 | && result.segment.index == 0) {
|
|---|
| 53 | mode = 'close';
|
|---|
| 54 | path.closed = true;
|
|---|
| 55 | path.selected = false;
|
|---|
| 56 | path = null;
|
|---|
| 57 | }
|
|---|
| 58 | }
|
|---|
| 59 |
|
|---|
| 60 | if (mode != 'close') {
|
|---|
| 61 | mode = currentSegment ? 'move' : 'add';
|
|---|
| 62 | if (!currentSegment)
|
|---|
| 63 | currentSegment = path.add(event.point);
|
|---|
| 64 | currentSegment.selected = true;
|
|---|
| 65 | }
|
|---|
| 66 | }
|
|---|
| 67 |
|
|---|
| 68 | function onMouseDrag(event) {
|
|---|
| 69 | if (mode == 'move' && type == 'point') {
|
|---|
| 70 | currentSegment.point = event.point;
|
|---|
| 71 | } else if (mode != 'close') {
|
|---|
| 72 | var delta = event.delta.clone();
|
|---|
| 73 | if (type == 'handleOut' || mode == 'add')
|
|---|
| 74 | delta = -delta;
|
|---|
| 75 | currentSegment.handleIn += delta;
|
|---|
| 76 | currentSegment.handleOut -= delta;
|
|---|
| 77 | }
|
|---|
| 78 | }
|
|---|
| 79 | </script>
|
|---|
| 80 | </head>
|
|---|
| 81 | <body>
|
|---|
| 82 | <p>
|
|---|
| 83 | An emulation of a vector pen tool.
|
|---|
| 84 | Click and drag to add a points.<br/>
|
|---|
| 85 | Drag segment handles and points to manipulate them.
|
|---|
| 86 | Close the path to start a new one.
|
|---|
| 87 | </p>
|
|---|
| 88 | <canvas id="canvas" resize></canvas>
|
|---|
| 89 | </body>
|
|---|
| 90 | </html> |
|---|
