Interactive editing of bezier curve once drawn

Sycren

unread,

Jul 30, 2011, 7:21:54 AM7/30/11

to Paper.js

Say we have a bezier curve with 4 points (2 anchor and 2 handles)
would it be possible to click on a handle and move it as if
interactively editing the curve?

If this was possible, then you could create graphs similar to those
used for colour compositing in photo applications. Would it be easy to
read off the graph, like at x coordinate, y is .... ?

Jonathan Puckey

unread,

Aug 4, 2011, 5:34:20 AM8/4/11

to pap...@googlegroups.com

I made a little example for you that shows off hit testing for handles and moving them:
http://bl.ocks.org/1124831

Sycren

unread,

Aug 6, 2011, 9:27:48 AM8/6/11

to Paper.js

Thank you, that works really well. Sorry for all these questions.

Would it be possible to turn a layer of objects into a raster? Say if
I wanted to find the colour of a pixel in a specific layer?

Sycren

unread,

Aug 11, 2011, 8:42:03 PM8/11/11

to Paper.js

Thanks for the example. Here is code for a graph to change all points
and handles:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Path Handles</title>
<script type="text/javascript" src="lib/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path();

path.segments = [];
path.add(view.bounds.bottomLeft);
path.add(view.center);
path.add(view.bounds.topRight);
path.smooth();

//path.selected;

path.strokeColor = 'black';
path.strokeWidth = 5;

// Fully select the path, so we can see its handles:
path.fullySelected = true;

var hitOptions = {
segments: true,
handles: true,
stroke: true,
fill: true,
tolerance: 5
};

var segment, path, handle;
var movePath = false;
function onMouseDown(event) {
segment = path = handle = null;
var hitResult = project.hitTest(event.point, hitOptions);

if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}

if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
} else if (hitResult.type == 'stroke') {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
else if (hitResult.type == 'handle-in') {
handle = hitResult.segment.handleIn;
}
else if (hitResult.type == 'handle-out') {
handle = hitResult.segment.handleOut;
}
}
movePath = hitResult.type == 'fill';
if (movePath)
project.activeLayer.addChild(hitResult.item);

path.fullySelected = true;
}

function onMouseDrag(event) {
if (segment) {
segment.point = event.point;
path.smooth();
}

if (handle) {
handle.x += event.delta.x;
handle.y += event.delta.y;
}

if (movePath)
path.position += event.delta;
}
</script>
</head>
<body style="margin:0;overflow:hidden">
<canvas id="canvas" resize></canvas>
</body>
</html>

On Aug 4, 10:34 am, Jonathan Puckey <m...@jonathanpuckey.com> wrote:

Sycren

unread,

Aug 11, 2011, 8:43:18 PM8/11/11

to Paper.js

Forgot to say, would it be possible to have a constructor for the size
of the handles. I have looked on github but cannot find where you
describe this.

Reply all

Reply to author

Forward