Android path draws Bezier curve to realize QQ drag bubble

In the past two days, I learned to draw Bezier curve using path, and then I made a small bubble similar to QQ unread messages. The effect diagram is as follows:

The final effect picture realizes the whole process step by step.

Basic principles

In fact, path is used to draw the quadratic Bezier curve of three points to complete the enchanting curve. Then the corresponding circle is drawn continuously according to the touch point, and the radius of the original fixed circle is changed according to the change of distance. Finally, it is the realization of return or burst after letting go.

Path introduction:

As the name suggests, it means a path. There are many methods in path. The relevant methods mainly used in this design are

Getting started with path:

Remember not to use new path or paint in the OnDraw method!

Path

Specific split:

In fact, the whole process is to draw the closed path of two Bezier conics, and then add two circles on it.

The closed path can draw a quadratic Bezier curve from the upper left point to the lower left point, connect the lower left point to the lower right point, and the lower right point quadratic Bezier curve to the upper right point. Finally, close it!!

Determination of relevant coordinates

This is one of the difficulties this time, because it involves a sin, cos, Tan, etc. in mathematics. In fact, I forgot it, and then I made up my mind. I don't talk much nonsense,

Why do you want to draw it yourself? Because you know that there are two sets of corner mark system in the process of 360 rotation. If you use one set to draw, draw the situation that the curves overlap in the process of rotation!

The problem has been thrown out. Next, let's look at the code implementation directly!

Angle determination

According to the posted schematic diagram, we can use the starting center coordinates and the dragged center coordinates to obtain the specific radian according to the arctangent function.

OK, startx and Y here are the coordinates during the movement. Angle is the corresponding radian (angle) obtained.

Related path drawing

As mentioned earlier, there are two sets of coordinate systems in the process of rotation. At the beginning, I was very confused about how to determine this coordinate system. Later, I suddenly realized that it is actually equivalent to positive proportional growth in the first three quadrants, negative proportional growth in the second and fourth quadrants.

flag = (startY - CIRCLEY ) * (startX- CIRCLEX ) <= 0; // Add a flag to judge which coordinate system to use.

The most important thing is to draw the relevant path!

The code here is to Java the relevant mathematical formulas on the picture!

Here, in fact, the main work is almost finished!

Next, set paint as the filling effect, and finally draw two more circles

You can draw the desired effect!

I have to talk about the processing of ontouch again!

Deal with the pit distributed by the event!

Measurement and layout

It's basically passable, but our layout hasn't been handled yet, math_ Parent cannot be used in specific projects! If it is found that the measurement mode is not accurate, the required width and height shall be calculated manually.

Then, when the layout changes, obtain the relevant coordinates and determine the initial center coordinates:

Then you can configure it in the list file as follows:

After that, there will be another problem, which is wrap_ After content, the area that the view can draw is only as large as itself, and it can't be seen after dragging! What about this pit? In fact, it's very simple. Add the attribute of Android: clipchildren = "false" to the parent layout! This pit is solved!!

Determination of relevant status

We don't want it to drag indefinitely, that is, there is a maximum distance to drag, and the return and burst after letting go. Accordingly, several statuses need to be determined:

After you have determined these, you need to make relevant judgments when moving:

The updatepath () method has been seen in part before, and this time it is complete. What is done here is to change the relevant state according to the drag distance, and modify the radius size of the original circle according to the percentage. There is also the previously introduced determination of relevant radians!

When you finally let go:

Automatically return to the valueanimator used here,

Finally, let's take a look at the complete OnDraw method!

Here, the finished product comes out!!

Summary:

1. Determine the coordinates of the default circle; 2. According to the situation of move, obtain the latest coordinates in real time, update the relevant status and draw the relevant path according to the moving distance (determine the angle). Exceed the upper limit, no longer draw path. 3. When you let go, you can either return the animation with path, return directly without path, or burst directly according to the relevant status!

The above is an example of drawing Bezier curve with Android path. We will continue to supplement relevant articles in the future. Thank you for your support for this site!