2
$\begingroup$

So I have recently learned about Bezier Curves (quadratic & cubic) and have a thorough knowledge of how they work. In my graphics engine in DirectX I wanted to implement a Bezier Curve Tool exactly like the Pen Tool in Adobe Illustrator. I understand the basic computation of the curve but I am puzzled as to how I can get mouse interaction involved.

Basically I'd like to draw Bezier Curves with a Mouse.

enter image description here

Improve this question
$\endgroup$
7
  • 1
    $\begingroup$ I suspect that, like myself, many of us don't have Illustrator, so you'll have to be more specific in your description. Are you just clicking to define the end points of the each curve segment and then moving the end point(s) of the tangent associated with an end point? $\endgroup$
    – Simon F
    Commented Oct 14, 2016 at 8:19
  • $\begingroup$ It's really hard to explain what I mean but I think if you watch this video from 2:11 to 3:00 you'll understand exactly what I'm trying to say. youtu.be/0B_IQK7hMo0?t=2m8s $\endgroup$
    – Arjan Singh
    Commented Oct 14, 2016 at 9:53
  • $\begingroup$ How your program interacts with your software depends on your GUI framework. Surely your windowing library has some tools for implementing mouse clicks. That in essesnce is not a graphics problem altough drawing pick buffers might be. $\endgroup$
    – joojaa
    Commented Oct 14, 2016 at 10:16
  • $\begingroup$ Detecting Mouse Clicks isn't an issue but if you watch this video you'll understand what I'm trying to say youtu.be/0B_IQK7hMo0?t=2m8s watch from 2:11 to around 3:00. If you notice the technique in which he draws, when he still holds his mouse down after the click he can tune the curve just by moving the mouse. That is basically what I am trying to implement... $\endgroup$
    – Arjan Singh
    Commented Oct 14, 2016 at 10:23
  • $\begingroup$ I might be wrong, but I think you basically just add a control point at each extremity of your "pen tool" $\endgroup$
    – cmourglia
    Commented Oct 14, 2016 at 10:32

1 Answer 1

Reset to default
4
$\begingroup$

Instead of using cubic Bezier spline, you should use cubic Hermite spline. For cubic Hermite curve you specify the segment end points and tangents, which is what you then control in the tool. Hermite spline is almost the same as Bezier spline but with different $B$ matrix, so if you already understand Bezier, then understanding Hermite is a trivial step.

So in the Adobe Illustrator pen tool (which based on the video I take is the same as Adobe Photoshop pen tool that I have used) you keep adding more Hermite cubic spline segments to your spline. By default the Hermite start tangent matches (with opposite sign) the end tangent of the previous segment and in GUI they are linked together (changing one changes the other). So in that configuration the curve appears smooth. However, you can unlink the tangents to cause C1 discontinuity in the spline and control them separately. This is purely GUI work though and how you control the Hermite spline tangents & positions.

Improve this answer
$\endgroup$
2
  • $\begingroup$ So to clarify I create the Hermite spline and then the next spline will use the previous splines tangent as the start tangent + it will also use the previous point as the start point. $\endgroup$
    – Arjan Singh
    Commented Oct 14, 2016 at 14:02
  • $\begingroup$ Yes, exactly. Just the opposite sign (direction) for the start tangent just like in the AI pen tool $\endgroup$
    – JarkkoL
    Commented Oct 14, 2016 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.