<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bezier Tool</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var path;
var types = ['point', 'handleIn', 'handleOut'];
function findHandle(point) {
for (var i = 0, l = path.segments.length; i < l; i++) {
for (var j = 0; j < 3; j++) {
var type = types[j];
var segment = path.segments[i];
var segmentPoint = type == 'point'
? segment.point
: segment.point + segment[type];
var distance = (point - segmentPoint).length;
if (distance < 3) {
return {
type: type,
segment: segment
};
}
}
}
return null;
}
var currentSegment, mode, type;
function onMouseDown(event) {
if (currentSegment)
currentSegment.selected = false;
mode = type = currentSegment = null;
if (!path) {
path = new Path();
path.fillColor = new HsbColor(360 * Math.random(), 1, 1, 0.5);
}
var result = findHandle(event.point);
if (result) {
currentSegment = result.segment;
type = result.type;
if (path.segments.length > 1 && result.type == 'point'
&& result.segment.index == 0) {
mode = 'close';
path.closed = true;
path.selected = false;
path = null;
}
}
if (mode != 'close') {
mode = currentSegment ? 'move' : 'add';
if (!currentSegment)
currentSegment = path.add(event.point);
currentSegment.selected = true;
}
}
function onMouseDrag(event) {
if (mode == 'move' && type == 'point') {
currentSegment.point = event.point;
} else if (mode != 'close') {
var delta = event.delta.clone();
if (type == 'handleOut' || mode == 'add')
delta = -delta;
currentSegment.handleIn += delta;
currentSegment.handleOut -= delta;
}
}
</script>
</head>
<body>
<p>
An emulation of a vector pen tool.
Click and drag to add a points.<br/>
Drag segment handles and points to manipulate them.
Close the path to start a new one.
</p>
<canvas id="canvas" resize></canvas>
</body>
</html>