mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -05:00
90 lines
3 KiB
HTML
90 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Bezier Tool</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<script type="text/javascript" src="../../dist/paper-full.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 = {
|
|
hue: 360 * Math.random(),
|
|
saturation: 1,
|
|
brightness: 1,
|
|
alpha: 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>
|