Question

Let’s say I have a cubic Bezier path as follows (formatted for use with the Raphael path function):

M55 246S55 247 55 248

Just an example. This was taken from my drawing application, where I use the cursor to draw a line when the user holds the mouse button down, kind of like a pencil or marker. I’m using jquery’s mousemove event to draw the line between two points every time the user moves the mouse. There is another (the reference point) that is taken before the line is drawn, so that the Bezier curve can be created.

Here’s my question: is it possible to make Raphael only draw half of a given path? I’m aware of the getSubpath() function, but if my understanding of Bezier curves is correct, it would be rather difficult to calculate the second argument. The problem with the animate function is that it creates double lines (that is, it creates the curved line that I want, and the boxy line around it which should not be shown, possibly because the mouse is being moved faster than the animation can handle).

Of course, if my approach itself is flawed in some way (or my understanding of the possible solutions), I’d like to hear it. Any help would be appreciated.

Answer 1

It is a bit messy, but maybe this will answer it:

line[line.length] = paper.path(drawPath); //drawPath being the fill line length 

//get a subpath, being half the length of your bezier curve
subPath = line[line.length - 1].getSubpath(0, line[line.length - 1].getTotalLength()/2);

//remove the full-length bezier curve
line[line.length - 1].remove();

//Draw your new line
line[line.length - 1] = paper.path(subpath);

Honestly, this this is quite inefficient. But, I can’t think of a better way to go about it. You can’t just grab the tangent and divide by half, since a bezier curve will be longer the length of a tangent line (as a crow flies). This means that you must process the line via rapheal and then get a subPath of half the length.