Wing takes you for a spin. Custom View Series (2) Simple imitation QQ unread message removal effect

The previous article describes the simple application of Bezier curves 360 memory cleanup effect

This article brings a two Bezier curve to the application: fake QQ unread message removal effect.

Reprint Please specify source: http://blog.csdn.net/wingichoy/article/details/50503630

The usual, first:

QQ Unread message removal is very cool, in fact, is using two Bezier curve, we follow the idea, first to draw two circle, and two Bezier curve, Auxiliary point for the center of the Y coordinate half. We'll move the circle below, called Mmovecircle.

Such a painting, it is very simple and clear, right. As long as the drag to change the auxiliary point of the Y, and the radius of the fixed circle , you can come out like the effect.

So rewrite ontouchevent.

@Override Public    Boolean ontouchevent (Motionevent event) {        switch (event.getaction ()) {            case Motionevent.action_move:                Mmovecircley = Event.gety ();//                msupy = Mcircley;                if (Mmovecircley < lasty) {                    isUp = false;                } else {                    isUp = true;                }                Lasty = Mmovecircley;                Invalidate ();                break;            Case MOTIONEVENT.ACTION_UP:                if ((Mmovecircley-mcircley) >mmovecircleradius*3) {                    log.e ("Wing", "over");                    Iscandraw = false;                    Invalidate ();                } else {                    log.e ("Wing", "no more than");}        }        return true;    }

Here Action_move records the last move and the value of this move to indicate whether it is going up or down, changing the y-coordinate of a marker and letting Mmovecircley change to touch.

Action_up mainly records the range of dots leaving, and if this range is exceeded, the message reminder is removed.

Draw Bezier Curves in OnDraw

  Left line                Path.moveto (Mcirclex-mcircleradius + MPAINTSTROKEWIDTH/2, Mcircley);                Path.quadto (Mcirclex, msupy, Mcirclex-mmovecircleradius + MPAINTSTROKEWIDTH/2, Mmovecircley);                Canvas.drawpath (path, p);                The right line                Path.moveto (Mcirclex + MCIRCLERADIUS-MPAINTSTROKEWIDTH/2, Mcircley);                Path.quadto (Mcirclex, msupy, Mcirclex + MMOVECIRCLERADIUS-MPAINTSTROKEWIDTH/2, Mmovecircley);                Canvas.drawpath (path, p);

This will draw two Bezier curves, but it's hollow.

So we can imagine how we could get him closed. Do you remember the way to draw polygons ... LineTo directly between the two Bezier curves, then close;

Path.moveto (Mcirclex-mcircleradius + MPAINTSTROKEWIDTH/2, Mcircley);                Path.quadto (Mcirclex, msupy, Mcirclex-mmovecircleradius + MPAINTSTROKEWIDTH/2, Mmovecircley);                Path.lineto (Mcirclex + Mmovecircleradius, Mmovecircley);                Path.quadto (Mcirclex, msupy, Mcirclex + Mcircleradius, Mcircley);                Path.lineto (Mcirclex-mcircleradius, Mcircley);                Path.close ();                Canvas.drawpath (path, p);

In fact, we draw this effect, and then in the two solid circle painting, brush style set to fill,

Close the brush, dynamically change the radius, draw the circle.

        P.setstyle (Paint.Style.FILL);

                if (isUp) {                    canvas.drawcircle (Mcirclex, Mcircley, Mcircleradius--, p);                    Canvas.drawcircle (Mcirclex, Mmovecircley, Mmovecircleradius, p);                } else {                    canvas.drawcircle (Mcirclex, Mcircley, mcircleradius++, p);                    Canvas.drawcircle (Mcirclex, Mmovecircley, Mmovecircleradius, p);                }

Get the following effect.

Finally, to determine whether or not to exceed a certain drop-down area, if more than the dot to go with the start and then disappear when the hand release.

 if ((Mmovecircley-mcircley) <mmovecircleradius*3) {log.e ("wing", msupy-mcircley+ "");                Path PATH = new Path ();                Left line Path.moveto (Mcirclex-mcircleradius + MPAINTSTROKEWIDTH/2, Mcircley);                Path.quadto (Mcirclex, msupy, Mcirclex-mmovecircleradius + MPAINTSTROKEWIDTH/2, Mmovecircley);                Path.lineto (Mcirclex + Mmovecircleradius, Mmovecircley);                Path.quadto (Mcirclex, msupy, Mcirclex + Mcircleradius, Mcircley);                Path.lineto (Mcirclex-mcircleradius, Mcircley);                Path.close ();                Canvas.drawpath (path, p); Right Line//Path.moveto (Mcirclex + MCIRCLERADIUS-MPAINTSTROKEWIDTH/2, Mcircley);//Path.qua DTo (Mcirclex, msupy, Mcirclex + MMOVECIRCLERADIUS-MPAINTSTROKEWIDTH/2, Mmovecircley);//Canvas.drawpath                (path, p); P.setstyle (Paint.Style.FILL);//Canvas.drawcircLe (Mcirclex, Mcircley, Mcircleradius, p);                    if (isUp) {canvas.drawcircle (Mcirclex, Mcircley, Mcircleradius--, p);                Canvas.drawcircle (Mcirclex, Mmovecircley, Mmovecircleradius, p);                    } else {canvas.drawcircle (Mcirclex, Mcircley, mcircleradius++, p);                Canvas.drawcircle (Mcirclex, Mmovecircley, Mmovecircleradius, p);            }//Canvas.drawpoint (MSUPX, Msupy, p);                } else {P.setstyle (Paint.Style.FILL); Canvas.drawcircle (Mcirclex, Mmovecircley, Mmovecircleradius, p);//Canvas.drawcircle (Mcirclex, MMoveCircleY            , Mmovecircleradius, p); }

Finally, there is a complicated problem, the user can drag 360 degrees, this time to calculate the coordinates of the tangent point according to the Circle, and then recalculate the coordinates of the auxiliary points. More cumbersome, here will not forget. #其实我是不会 # The purpose of this article, to understand the application of Bezier curve I think it has been achieved, if the reader is interested, can be self-fulfilling. #其实我是不会 #

------------------------------------------------------------------------------to solve the article---------------------------------------- -------------------------------------------------------------

Back home and studied a 360-degree dynamic change, finally figured out how to forget. such as (ignoring so ugly and want to vomit the oil of the neutral pen):

In fact, the problem we are facing is to calculate the tangent point coordinates of the circle. In other words, the angle of seeking ∠1.

The figure shows that ∠1 =∠2∠2 =∠3 due to equivalence substitution can be ∠3 =∠1

by graph: tan∠3 = (Mcirlcey-mmovecircley)/(Mmovecirclex-mcirclex) that is ∠1 = arctan (Mcirlcey-mmovecircley)/(MMOVECIRCLEX-MCIRC LeX

The coordinates of the upper-right point are calculated as:

X:mmovecirclex-mmovecircleradius * sin∠1

Y:mmovecircley-mmovecircleradius * cos∠1

The coordinates of the other three tangent points are calculated as above. To get the coordinates of the four points, just change the end point of the path and the coordinates of the auxiliary points. Because it is too complicated, you do not need the code to achieve. If you are interested, you can implement it yourself. #其实就是懒 #

Next: Wing take you to the Custom View series (3) imitate the pull-down eyes

This project address: Click Open link for attention seeking comment for Star

Wing takes you for a spin. Custom View Series (2) Simple imitation QQ unread message removal effect