Beiser curve, and interaction with the beiser curve with the mouse

By yebimeow
During this time, I felt a lot of pain .. Although a variety of games have a great deal of fun .. You have to learn more ..
I made a little thing and pasted it out .. The capabilities are limited.
Don't try to ask me for anythingCodeAnd so on .. I am only amateur. If you are serious about this post, you will lose ..
Do not try to receive points .. That's impossible ..

If you are not satisfied with your life, work, or sister...
If you don't want to pay for changes, you should be forced.
If you don't want to change, you should be forced.
If you don't want to change your life, you deserve it.
If you can't stand the contempt of others, give them a reason not to despise you first ..

In fact, this article has no technical content, similar to the "pen" tool in Photoshop ..
(I often use the tricks in the code. You can refer to them in the previous post ..

The first half is theory, which can be translated in a mathematical book. The second part is practice, which is actually very simple ..

Start of Text

Besell Curve
The béserz curve is an important parameter curve in computer graphics (2d, 3D called a surface ). In 1962, the bersel curve was published by French engineer Pierre béserz, who used the curve to design the car's main body.

Linear curve
For the numbers P0 and P1 at the specified point, the linear besell curve is just a straight line between two points. This line is shown below:

When the parameter T changes, the process is as follows:

T in the linear besell curve function goes through the curve described by B (t) from p0 to P1. For example, when T = 0.25, B (t) is a 1/4 point from the point p0 to the P1 path. Like a continuous T from 0 to 1, B (t) describes a straight line from p0 to P1.
Quadratic Curve
The path of the second beiser curve is traced by function B (t) of the given point P0, P1, and P2:

In order to construct a secondary besell curve, the mediation points q0 and Q1 can be used as the T from 0 to 1:
* The continuous point q0 from p0 to P1 describes a linear besell curve.
* A linear besell curve is described from Q1, a continuous point from P1 to P2.
* A quadratic besell curve is described from the continuous point B (t) between q0 and Q1.
The quadratic curve looks like this:

Cubic Curve
To construct a higher-order curve, more mediation points are required. For cubic curves, it can be constructed by the Mediation points q0, Q1, and Q2 described by the linear besell curve, and by the points R0 and R1 described by the quadratic curve.
P0, P1, P2, and P3 point on a plane or in a three-dimensional space, a cubic besell curve is defined. The curve starts from p0 to P1 and starts from p2 to P3. It generally does not pass through P1 or P2; these two points only provide direction information there. The spacing between P0 and P1 determines the "length" of the curve toward P2 before it is switched to P3 ".
The curve parameters are as follows:

It looks like this:

High-order Curve
You can use the following formula to represent a higher-order beiser curve:
Expressed by point P0, P1 ,... And the bersel curve determined by PN. There are:

For more information about the besell curve, you can read a variety of mathematical books. Come on.
Application
In almost all of the advanced image software, the cubic besell curve is used for "smooth curve" rendering. For example, "pen" in Photoshop, "besell tool" in coraldraw, and "paint" in fireworks ".

Implementation in programming
Computer plotting
To "Draw" the Bessel curve, we usually need to perform a lot of calculations and then draw it out, like this:

The drawn code can be found in various computer graphics books.
GDI +
Fortunately, GDI + has encapsulated the drawing code of the besell curve. If you want to draw the besell curve, you only need to call the graphics. drawbezr method:

This is a cubic besell curve, where four points are: Start Point, start point control point, end point, and end point control point. The result is as follows:

Interaction with the mouse
How can we implement the beiser curve that can be adjusted in Photoshop? Two methods:
* Enter a new parameter to generate a curve.
* Interactive Curve adjustment with the mouse
Obviously, the second type looks a lot better, so let's try it.
You want to achieve the following results:

This is a cubic besell curve, which should be interpreted as follows:

Therefore, we need to solve the following problems:
* Represents the anchor point and control point of the besell curve.
* Draw curves and control points/control handles
* Mouse Interaction
It doesn't look very difficult, so let's turn it into zero and break it apart.
Anchor
There are two anches for the three-way besell curve: the starting point and the ending point. Each anchor has two coordinates: its own coordinates and the control point coordinates. Therefore, you can use this class to describe:

Cubic besell Curve
The principle of the cubic curve has been mentioned before, so its structure should be like this:

Draw
To make it simple, use a basic Renderer. The Code is as follows:

Draw the curve, control point, and handle:


The result is as follows:

Mouse Interaction
The interaction with the mouse is actually like this:
* Press the mouse. If the point is placed on a control point, the point is selected. Otherwise, the point fails.
* Move the mouse. If a control point is selected, adjust the coordinates of the control point to the new coordinate. Otherwise, ignore
* Open the mouse and cancel any selection.
It seems that you only need to handle the three events: mousedown, mousemove, and mouseup. It's easy.
First get a global Tag:

Then process the mouse event:
Mousedown:

Mousemove:

Mouseup:

To make it simple, refresh is like this:

More efficient refresh should only process dirty areas.
Effect
Finally it looks like this.

That's simple.

expansion and optimization
to achieve the curve effect of Photoshop, multiple anchor points must be connected. The efficiency of the above method can also be improved.
what should I do?
do it on your own.
(end)