mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
86 lines
No EOL
2.2 KiB
HTML
86 lines
No EOL
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Example</title>
|
|
<script type="text/javascript">var root = '../../'</script>
|
|
<script type="text/javascript" src="../../src/load.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) {
|
|
mode = type = currentSegment = null;
|
|
|
|
if (!path) {
|
|
path = new Path();
|
|
path.selected = true;
|
|
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);
|
|
}
|
|
}
|
|
|
|
function onMouseDrag(event) {
|
|
if (mode == 'move') {
|
|
if (type == 'point') {
|
|
currentSegment.point = event.point;
|
|
} else {
|
|
var delta = event.delta.clone();
|
|
if (type == 'handleOut')
|
|
delta = -delta;
|
|
currentSegment.handleIn += delta;
|
|
currentSegment.handleOut -= delta;
|
|
}
|
|
} else if (mode == 'add') {
|
|
var delta = event.point - event.downPoint;
|
|
currentSegment.handleOut = delta;
|
|
currentSegment.handleIn = -delta;
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
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.
|
|
<canvas id='canvas' width=1024 height=768></canvas>
|
|
</body> |