Android使用貝塞爾曲線仿QQ聊天消息氣泡拖拽效果
更新時間：2019年01月27日 11:05:09 作者：小悅月CG
這篇文章主要為大家詳細(xì)介紹了Android使用貝塞爾曲線仿QQ聊天消息氣泡拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android仿QQ聊天消息氣泡拖拽效果展示的具體代碼，供大家參考，具體內(nèi)容如下
先畫圓，都會吧。代碼如下：
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);
}
}
效果
拖拽的另個一圓就不畫了，效果的實(shí)現(xiàn)主要是計算兩個點(diǎn)之間的拖拽區(qū)域，如下圖：
求出區(qū)域之后，使用貝塞爾線畫出效果就可以了，代碼：
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);//錨點(diǎn)直接取偏移量的一半
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);
//通過畫布繪制多點(diǎn)形成的圖形
canvas.drawCircle(mX1, mY1, mRadius, mGesturePaint);
if (mBezier) {
canvas.drawPath(mPath, mGesturePaint);
canvas.drawCircle(mX2, mY2, mRadius, mGesturePaint);
}
}
}
效果圖：
拖拽效果只要在onTouchEvent里動態(tài)改變拖動點(diǎn)的坐標(biāo)重繪就可以實(shí)現(xiàn)了，代碼：
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);//錨點(diǎn)直接取偏移量的一半
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);
//通過畫布繪制多點(diǎn)形成的圖形
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;
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Android DataBinding的官方雙向綁定示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
android自定義toast(widget開發(fā))示例
這篇文章主要介紹了android自定義toast(widget開發(fā))示例,需要的朋友可以參考下2014-03-03
淺談Android AsyncTask內(nèi)存安全的一種使用方式
這篇文章主要介紹了淺談Android AsyncTask內(nèi)存安全的一種使用方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
基于Android引入IjkPlayer無法播放mkv格式視頻的解決方法
下面小編就為大家分享一篇基于Android引入IjkPlayer無法播放mkv格式視頻的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Android音頻開發(fā)之音頻采集的實(shí)現(xiàn)示例
本篇文章主要介紹了Android音頻開發(fā)之音頻采集的實(shí)現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了Android仿新浪微博個人信息界面及其他效果設(shè)計,如正則表達(dá)式如何匹配相應(yīng)表情字段，處理微博發(fā)出時間距現(xiàn)在時刻的時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Android 帶箭頭的指引tipLayout實(shí)現(xiàn)示例代碼
本篇文章主要介紹了Android 帶箭頭的指引tipLayout實(shí)現(xiàn)示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Android 側(cè)滑抽屜菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 側(cè)滑抽屜菜單的實(shí)現(xiàn)代碼,本文通過實(shí)例圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
Android編程實(shí)現(xiàn)自定義toast示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)自定義toast,結(jié)合簡單實(shí)例形式分析了自定義布局toast核心實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2017-01-01
kotlin實(shí)現(xiàn)強(qiáng)制下線功能
這篇文章主要為大家詳細(xì)介紹了kotlin實(shí)現(xiàn)強(qiáng)制下線功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06