在拉斐尔画一半Bezier路径

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.

Answer 2

The middle point can be calculated, not aware of any functionality in Raphael that will cut the bezier in half for you.

From the looks of those commands, it's standard SVG markup (see the SVG spec to understand it better: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands )

M=> MoveTo the absolute position 55,24 S=> Smooth Curve to the absolute 55,247 55,248

Smooth curve can be rewritten as a standard CurveTo or C if you want, S is only the shorthand for it and the curveto / C you can easily calculate the center point.

Answer 3

Splitting a bezier curve in half is just a bit of math, nothing too hard. You might be helped by the path extensions for raphaël , and it should be pretty simple to add a method there to do the splitting.

The "just a bit of math" part could eg use De Castelau's algorithm for splitting the curve at any given point.