Search code examples
c#winformsalgorithmbeziercurve

Curve making UI that imitates that of Powerpoint and Photoshop in C#

I've been working on a program in C# that involves image editing and animating.

I discovered that I need an interface that allows my users to draw curves.

I decided that the system that Photoshop and Powerpoint use is pretty intuitive.

I searched around, and discovered many things about this curve system, including that it is called a bezier curve, and how points define them.

However, though they all described how the points define the curve, none of them described the defining system that Powerpoint and Photoshop use, with two line segments that resemble tangent lines.

Intuitively, I think that somehow those segments are used to calculate the points that define the curve, but I am completely oblivious to how.

In short, I am trying to allow my user to draw a bezier curve in a similar manner that Photoshop and Powerpoint do, using two line segments having an endpoint at a given point which define a "tangent," the length and orientation of these segments both affecting the curve.

Solution 
  • this.CreateGraphics().DrawBezier(Pens.Black, 0, 0, 20, 80, 80, 20, 100, 100);

    this in this case is a form, and I called that in an override of the OnPaint event.

    You can draw a bezier to an image as well, and then view it:

    var bitmap = new Bitmap(100, 100);

Graphics.FromImage(bitmap).DrawBezier(Pens.Black, 0, 0, 20, 80, 80, 20, 100, 100);

this._pictureBox.Image = bitmap;

    The result in my example is:

    Example