-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathline_simplify.html
69 lines (56 loc) · 1.66 KB
/
line_simplify.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="app/lib/paper-full.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
var path;
var textItem = new PointText({
content: 'Click and drag to draw a line.',
point: new Point(20, 30),
fillColor: 'black',
});
function onMouseDown(event) {
// If we produced a path before, deselect it:
if (path) {
path.selected = false;
}
// Create a new path and set its stroke color to black:
path = new Path({
segments: [event.point],
strokeColor: 'black',
// Select the path, so we can see its segment points:
fullySelected: true
});
}
// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
path.add(event.point);
// Update the content of the text item to show how many
// segments it has:
textItem.content = 'Segment count: ' + path.segments.length;
}
// When the mouse is released, we simplify the path:
function onMouseUp(event) {
var segmentCount = path.segments.length;
var points = Array();
// When the mouse is released, simplify it:
path.simplify(10);
for(i=0; i<path._segments.length; i++)
{
points.push({'x' : path._segments[i]._point.x, 'y' : path._segments[i]._point.y});
}
console.log(points);
var pointsAsString = points.map(function(o){return o.x+","+o.y});
// Select the path, so we can see its segments:
path.fullySelected = true;
textItem.content = pointsAsString.join(' ; ');
}
</script>
</head>
<body>
<canvas id="myCanvas" resize style="background-color:#CCC;"></canvas>
</body>
</html>