Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

本文实例为大家分享了android仿qq聊天消息气泡拖拽效果展示的具体代码，供大家参考，具体内容如下

先画圆，都会吧。代码如下：

public class bezier extends view {
 private final paint mgesturepaint = new paint();
 private final path mpath = new path();
 private float mx1 = 100, my1 = 150;
 private float mx2 = 300, my2 = 150;
 private boolean mbezier = true;
 private int mradius = 30;
 
 public bezier(context context, attributeset attrs) {
 super(context, attrs);
 mgesturepaint.setantialias(true);
 mgesturepaint.setstyle(paint.style.fill_and_stroke);
 mgesturepaint.setstrokewidth(5);
 mgesturepaint.setcolor(color.red);
 }
 
 @override
 protected void ondraw(canvas canvas) {
 // todo auto-generated method stub
 super.ondraw(canvas);
 canvas.drawcircle(mx1, mx2, mradius, mgesturepaint);
 }
 
}

效果

拖拽的另个一圆就不画了，效果的实现主要是计算两个点之间的拖拽区域，如下图：

求出区域之后，使用贝塞尔线画出效果就可以了，代码：

public class bezier extends view {
 private final paint mgesturepaint = new paint();
 private final path mpath = new path();
 private float mx1 = 100, my1 = 150;
 private float mx2 = 300, my2 = 150;
 private boolean mbezier = true;
 private int mradius = 30;
 
 public bezier(context context, attributeset attrs) {
 super(context, attrs);
 mgesturepaint.setantialias(true);
 mgesturepaint.setstyle(paint.style.fill_and_stroke);
 mgesturepaint.setstrokewidth(5);
 mgesturepaint.setcolor(color.red);
 setbezier();
 }
 
 private void setbezier() {
 float offsetx = (float) (mradius * math.sin(math.atan((my2 - my1) / (mx2 - mx1))));
 float offsety = (float) (mradius * math.cos(math.atan((my2 - my1) / (mx2 - mx1))));
 float x1 = mx1 - offsetx;
 float y1 = my1 + offsety;
 
 float x2 = mx2 - offsetx;
 float y2 = my2 + offsety;
 
 float x3 = mx2 + offsetx;
 float y3 = my2 - offsety;
 
 float x4 = mx1 + offsetx;
 float y4 = my1 - offsety;
 
 mpath.reset();
 mpath.moveto(x1, y1);
 mpath.quadto((mx1 + mx2) / 2, (my1 + my2) / 2, x2, y2);//锚点直接取偏移量的一半
 mpath.lineto(x3, y3);
 mpath.quadto((mx1 + mx2) / 2, (my1 + my2) / 2, x4, y4);
 mpath.lineto(x1, y1);
 }
 
 @override
 protected void ondraw(canvas canvas) {
 // todo auto-generated method stub
 super.ondraw(canvas);
 //通过画布绘制多点形成的图形
 canvas.drawcircle(mx1, my1, mradius, mgesturepaint);
 if (mbezier) {
 canvas.drawpath(mpath, mgesturepaint);
 canvas.drawcircle(mx2, my2, mradius, mgesturepaint);
 }
 }
}

效果图：

拖拽效果只要在ontouchevent里动态改变拖动点的坐标重绘就可以实现了，代码：

public class bezier extends view {
 private final paint mgesturepaint = new paint();
 private final path mpath = new path();
 private float mx1 = 100, my1 = 150;
 private float mx2 = 300, my2 = 150;
 private boolean mbezier = true;
 private int mradius = 30;
 
 public bezier(context context, attributeset attrs) {
 super(context, attrs);
 mgesturepaint.setantialias(true);
 mgesturepaint.setstyle(paint.style.fill_and_stroke);
 mgesturepaint.setstrokewidth(5);
 mgesturepaint.setcolor(color.red);
 setbezier();
 }
 
 private void setbezier() {
 float offsetx = (float) (mradius * math.sin(math.atan((my2 - my1) / (mx2 - mx1))));
 float offsety = (float) (mradius * math.cos(math.atan((my2 - my1) / (mx2 - mx1))));
 float x1 = mx1 - offsetx;
 float y1 = my1 + offsety;
 
 float x2 = mx2 - offsetx;
 float y2 = my2 + offsety;
 
 float x3 = mx2 + offsetx;
 float y3 = my2 - offsety;
 
 float x4 = mx1 + offsetx;
 float y4 = my1 - offsety;
 
 mpath.reset();
 mpath.moveto(x1, y1);
 mpath.quadto((mx1 + mx2) / 2, (my1 + my2) / 2, x2, y2);//锚点直接取偏移量的一半
 mpath.lineto(x3, y3);
 mpath.quadto((mx1 + mx2) / 2, (my1 + my2) / 2, x4, y4);
 mpath.lineto(x1, y1);
 }
 
 @override
 protected void ondraw(canvas canvas) {
 // todo auto-generated method stub
 super.ondraw(canvas);
 //通过画布绘制多点形成的图形
 canvas.drawcircle(mx1, my1, mradius, mgesturepaint);
 if (mbezier) {
 canvas.drawpath(mpath, mgesturepaint);
 canvas.drawcircle(mx2, my2, mradius, mgesturepaint);
 }
 }
 
 @override
 public boolean ontouchevent(motionevent event) {
 mx2 = event.getx();
 my2 = event.gety();
 switch (event.getaction()) {
 case motionevent.action_down:
 mbezier = true;
 setbezier();
 break;
 case motionevent.action_move:
 mbezier = true;
 setbezier();
 break;
 case motionevent.action_up:
 mbezier = false;
 break;
 
 }
 invalidate();
 return true;
 }
 
}

源码：android仿qq聊天消息气泡拖拽效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。