blob: 7c049d60671e5323f0e8ec7a798ac98acc86737e (
plain) (
tree)
|
|
<!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>
|
