wing带你玩转自定义view系列（2） 简单模仿qq未读消息去除效果

上一篇介绍了贝塞尔曲线的简单应用 [仿360内存清理效果](http://blog.csdn.net/wingichoy/article/details/50500479) 这一篇带来一个  两条贝塞尔曲线的应用 ： 仿qq未读消息去除效果。 转载请注明出处：http://blog.csdn.net/wingichoy/article/details/50503630 老规矩，先上效果图：  qq的未读消息去除很炫酷，其实就是用了两条贝塞尔曲线，我们按思路来，先来画两个圆，及两条贝塞尔曲线，辅助点为圆心y坐标的一半。我们把下面移动的圆，叫做mMoveCircle.  这样一画，就很简单明了了对不对。只要在拖动的时候 去改变辅助点的Y，和固定圆的半径， 就可以出来如效果图的效果。 那么重写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","超过"); isCanDraw = false; invalidate(); }else { Log.e("wing","没超过"); } } return true; } ~~~ 这里Action_move记录了最后一次移动和这次移动的值，来代表是往上滑还是往下滑,改变一个标记为，并且让mMoveCircleY改变为触摸的y坐标。 ACTION_UP主要记录 圆点离开的范围，如果超过这个范围，则代表消息提醒去除掉。 在ondraw里绘制贝塞尔曲线 ~~~ //左边的线 path.moveTo(mCircleX - mCircleRadius + mPaintStrokeWidth / 2, mCircleY); path.quadTo(mCircleX , mSupY, mCircleX - mMoveCircleRadius + mPaintStrokeWidth / 2, mMoveCircleY); canvas.drawPath(path, p); //右边的线 path.moveTo(mCircleX + mCircleRadius - mPaintStrokeWidth / 2, mCircleY); path.quadTo(mCircleX, mSupY, mCircleX + mMoveCircleRadius - mPaintStrokeWidth / 2, mMoveCircleY); canvas.drawPath(path, p); ~~~ 这样可以画成两条贝塞尔曲线，但是是空心的  那么我们想象办法，如何才能让他封闭呢。还记得绘制多边形的办法吗。。直接在两条贝塞尔曲线之间lineto就可以了，然后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); ~~~ 其实我们绘制的是这个效果，然后在把两个实心圆画上去，画笔style设置为fill 即可、  封闭画笔，动态改变半径，绘制圆。 ~~~ 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); } ~~~ 得到如下效果。  最后，来判断是否超过一定下拉区域，如果超过 则圆点跟着手一起走 然后在手松开的时候消失。 ~~~ if ((mMoveCircleY-mCircleY)<mMoveCircleRadius*3) { Log.e("wing",mSupY-mCircleY+""); Path path = new Path(); //左边的线 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); //右边的线 // path.moveTo(mCircleX + mCircleRadius - mPaintStrokeWidth / 2, mCircleY); // path.quadTo(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); } ~~~ 最后遗留一个复杂的问题， 用户可以360度拖动，这时候要根据圆 来计算切点的坐标，再来重新计算辅助点的坐标。比较繁琐，这里就不算了。 #其实我是不会#本篇的目的，了解贝塞尔曲线的应用我想已经达到了，读者若感兴趣，可以自行实现。#其实我是不会# ------------------------------------------------------------------------------解决篇----------------------------------------------------------------------------------------------------- 回到家又研究了一下360度动态转变的，终于想通怎么算了。如下图（无视那么丑 还有想吐槽下中性笔的油）：  其实我们要面临的问题就是计算出 圆的切点坐标。  换言之就是求 ∠1 的角度。 由图可知 ∠1 = ∠2     ∠2  = ∠3  由于等价代换可得 ∠3 = ∠1 由图得：tan∠3 = (mCirlceY - mMoveCircleY)/(mMoveCircleX-mCircleX)  即∠1 = arctan (mCirlceY - mMoveCircleY)/(mMoveCircleX-mCircleX 则可计算右上点的坐标为： x: mMoveCircleX - mMoveCircleRadius * sin∠1 y: mMoveCircleY - mMoveCircleRadius * cos∠1 其他三个切线点的坐标计算方法如上。得到四个点的坐标，只需要改变path的起终点 和 辅助点的坐标即可。由于过于繁杂，就不用代码给各位实现了。大家如果感兴趣，可以自行实现。#其实就是懒#  下一篇：[wing带你玩转自定义view系列（3）模仿微信下拉眼睛](http://blog.csdn.net/wingichoy/article/details/50503858) 本项目地址:[点击打开链接](https://github.com/githubwing/QQMessage)   求关注 求评论  求star