mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
f43abe2f32
Noticed that curveto and quadratic bezier curveto can be differentiated by format of the handleIn/handleOut variables in each segment (we think) If either handleIn.x and handleOut.x = 0 OR handleIn.y and handleOut.y = 0, then that means the curve is a simple curveTo tag in SVG. If handleIn.x = -handleOut.x AND handleIn.y = -handleOut.y, then you have a quadriatic Bezier Curveto in SVG (using the Q tag). We *HOPE* and think that that curveTo(through, to) (a method creating an arc that passes through the "through" point and ends at the "to" point) simply creates 2 segments, each with a handleIn and Out, which can be read and put into SVG seperately, making our lives a lot easier. Created more SVG test files. Made RGBConverter more efficient with another method to help reduce copied lines of code.
89 lines
No EOL
2.3 KiB
HTML
89 lines
No EOL
2.3 KiB
HTML
<!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/javascript" src="../../src/svg/ExportSVG.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;
|
|
var svg = new ExportSVG();
|
|
var svgout = svg.exportPath(path);
|
|
console.log(svgout);
|
|
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> |