第一,貝塞爾曲線
第二,Path的使用,附錄一篇文章
path可以理解爲路徑,它的主要作用是繪製直線,曲線,或者其它的一些幾何圖形。也可以用於繪製文字。聯想canvas.draw()方法,path也是類似的功能。只是canvas比較簡單,path繪製出來的圖形會更加的複雜。比如我們要繪製五角星,用canvas就很困難了,但是path實現起來卻可以很簡單。
看下代碼,繪製兩個簡單的圓
package com.example.beisaier;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
/**
* @author writing
* @time 2019/12/18 12:34
* @note
*/
public class PathView extends View {
private Path path1;
private Path path2;
private Paint paint;
public PathView(Context context) {
super(context);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
intit();
}
private void intit() {
path1 = new Path();
path2 = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(4);
paint.setStyle(Paint.Style.STROKE);
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* Path.Direction
* Path.Direction.CCW 逆時針
* Path.Direction.CW 順時針
*/
path1.addCircle(200,200,150, Path.Direction.CCW);
path1.addCircle(300,300,150, Path.Direction.CW);
canvas.drawPath(path1,paint);
canvas.drawPath(path2,paint);
}
}
效果圖
繪製0.x圓
package com.example.beisaier;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
/**
* @author writing
* @time 2019/12/18 12:34
* @note
*/
public class PathView extends View {
private Path path1;
private Path path2;
private Path path3;
private Paint paint;
public PathView(Context context) {
super(context);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
intit();
}
private void intit() {
path1 = new Path();
path2 = new Path();
path3 = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(4);
paint.setStyle(Paint.Style.STROKE);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* Path.Direction
* Path.Direction.CCW 逆時針
* Path.Direction.CW 順時針
*/
//半圓
path1.addArc(200,200,500,500,0,90);
path2.addArc(200,600,500,900,0,-90);
canvas.drawPath(path1,paint);
canvas.drawPath(path2,paint);
paint.setStyle(Paint.Style.FILL);
path3.addArc(200,900,500,1200,0,-90);
canvas.drawPath(path3,paint);
}
}
package com.example.beisaier;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
/**
* @author writing
* @time 2019/12/18 12:34
* @note
*/
public class PathView extends View {
private Path path1;
private Path path2;
private Path path3;
private Paint paint;
public PathView(Context context) {
super(context);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
intit();
}
private void intit() {
path1 = new Path();
path2 = new Path();
path3 = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(4);
paint.setStyle(Paint.Style.STROKE);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* Path.Direction
* Path.Direction.CCW 逆時針
* Path.Direction.CW 順時針
*/
//0.x橢圓,橢圓的一部分
path1.arcTo(200, 200, 300, 300, 0, 90, true);
//橢圓
path1.addOval(300, 300, 400, 450, Path.Direction.CW);
//矩形
path1.addRect(100, 400, 300, 500, Path.Direction.CW);
//圓角矩形
path1.addRoundRect(100, 600, 300, 700, 20, 40, Path.Direction.CW);
canvas.drawPath(path1, paint);
}
}
繪製更加複雜的圖案
package com.example.beisaier;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
/**
* @author writing
* @time 2019/12/18 12:34
* @note
*/
public class PathView extends View {
private Path path1;
private Path path2;
private Paint paint;
public PathView(Context context) {
super(context);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
intit();
}
public PathView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
intit();
}
private void intit() {
path1 = new Path();
path2 = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(4);
paint.setStyle(Paint.Style.STROKE);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* Path.Direction繪製方向
* Path.Direction.CCW 逆時針
* Path.Direction.CW 順時針
*/
path1.addCircle(200, 200, 100, Path.Direction.CW); //繪製圓
path2.addCircle(300, 300, 100, Path.Direction.CW);
/**
* Path.op對兩個Path進行布爾運算(即取交集、並集等操作)
* Path.Op.DIFFERENCE 減去path1中path1與path2都存在的部分;
* path1 = (path1 - path1 ∩ path2)
* Path.Op.INTERSECT 保留path1與path2共同的部分;
* path1 = path1 ∩ path2
* Path.Op.UNION 取path1與path2的並集;
* path1 = path1 ∪ path2
* Path.Op.REVERSE_DIFFERENCE 與DIFFERENCE剛好相反;
* path1 = path2 - (path1 ∩ path2)
* Path.Op.XOR 與INTERSECT剛好相反;
* path1 = (path1 ∪ path2) - (path1 ∩ path2)
*/
//五種情況
// path1.op(path2,Path.Op.DIFFERENCE);
// path1.op(path2,Path.Op.INTERSECT);
// path1.op(path2,Path.Op.UNION);
// path1.op(path2,Path.Op.XOR);
// path1.op(path2,Path.Op.REVERSE_DIFFERENCE);
canvas.drawPath(path1, paint);
canvas.drawPath(path2, paint);
}
}
path的其它一些API
mPath1.moveTo(100, 100);//將路徑的繪製位置定在(x,y)的位置
/**
* 在前一個點的基礎上開始繪製,如果前面一個點是(x,y),
* rMoveTo(dx,dy)相當於moveTo(x+dx,y+dy),如果前面沒有調用moveTo,
* 相當於從(dx,dy)開始繪製
*/
mPath1.rMoveTo(100, 100);
不帶r的方法是基於原點的座標系(偏移量), rXxx方法是基於當前點座標系(偏移量)
關於帶r的方法與不帶r方法的區別,詳細請看這篇文章
第三使用Path繪製貝塞爾曲線
path只可以繪製2、3階貝塞爾曲線。
繪製2階貝塞爾曲線
path1.moveTo(100,100);
path1.quadTo(400,200,10,500);
canvas.drawPath(path1,paint);
繪製3階貝塞爾曲線
mPath1.moveTo(100, 100);
mPath1.cubicTo(400, 200,10, 500,300, 700);
canvas.drawPath(mPath1, mPaint);
第四繪製n階貝塞爾曲線
package com.example.beisaier;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import androidx.annotation.Nullable;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/**
* @author writing
* @time 2019/12/20 14:44
* @note
*/
public class BezierView extends View {
private Paint mPaint;
private Paint mLinePointPaint;
private Path mPath;
private List<PointF> mControlPoints;
public BezierView(Context context) {
super(context);
init();
}
public BezierView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public BezierView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
//繪製貝塞爾曲線的畫筆
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLACK);
//繪製點的畫筆
mLinePointPaint = new Paint();
mLinePointPaint.setAntiAlias(true);
mLinePointPaint.setStrokeWidth(10);
mLinePointPaint.setStyle(Paint.Style.STROKE);
mLinePointPaint.setColor(Color.RED);
//貝塞爾曲線路徑
mPath = new Path();
//控制點集合(包含數據點)
mControlPoints = new ArrayList<>();
//隨機生成控制點,我們這裏繪製的是四階貝塞爾曲線,
// 如果大家想繪製更高階的貝塞爾曲線,修改循環的次數就可以
Random random = new Random();
for (int i = 0; i < 5; i++) {
//產生200-1000的隨機數
int x = random.nextInt(800) + 200;
int y = random.nextInt(800) + 200;
Log.i("zhang_xin", "隨機數x:" + x + ",隨機數y:" + y);
PointF pointF = new PointF(x, y);
mControlPoints.add(pointF);
}
//如果這裏大家不想用隨機數生成點,可以自己創建點
// PointF pointF0 = new PointF(200, 200);
// PointF pointF1 = new PointF(400, 500);
// PointF pointF2 = new PointF(600, 650);
// PointF pointF3 = new PointF(800, 500);
// PointF pointF4 = new PointF(1000, 150);
// mControlPoints.add(pointF0);
// mControlPoints.add(pointF1);
// mControlPoints.add(pointF2);
// mControlPoints.add(pointF3);
// mControlPoints.add(pointF4);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪製起始點、終止點、控制點以及各點的連線
int size = mControlPoints.size();
PointF pointF;
for (int i = 0; i < size; i++) {
pointF = mControlPoints.get(i);
if (i > 0) {
mLinePointPaint.setColor(Color.GREEN);
canvas.drawLine(mControlPoints.get(i - 1).x, mControlPoints.get(i - 1).y, pointF.x, pointF.y, mLinePointPaint);
}
//起點終點換顏色
if (i == 0) {
mLinePointPaint.setColor(Color.BLUE);
} else if (i == size - 1) {
mLinePointPaint.setColor(Color.BLUE);
}
canvas.drawCircle(pointF.x, pointF.y, 20, mLinePointPaint);
}
//曲線連接
buildBezierPoints();
canvas.drawPath(mPath,mPaint);
}
private void buildBezierPoints() {
mPath.reset();
ArrayList<PointF> pointFS = new ArrayList<>();
int order = mControlPoints.size()-1;//貝塞爾的階數
//份數,表示一條曲線繪製多少個點,我們這裏設置爲1000
float delta = 1.0f / 1000;
//for循環,求出每一個點
for (float t = 0; t<=1;t=t+delta) {
//bezier點集
PointF pointF = new PointF(deCastelJau(order, 0, t, true), deCastelJau(order, 0, t, false));//計算在曲線上點位置
pointFS.add(pointF);
if (pointFS.size() == 1) {
//如果是起點就移動到起點
mPath.moveTo(pointFS.get(0).x, pointFS.get(0).y);
} else {
//不是起點就連接起來
mPath.lineTo(pointF.x, pointF.y);
}
}
}
/**
* p(i,j) = (1-t) * p(i-1,j) + t * p(i-1,j+1);
*
* @param i 階數
* @param j 控制點
* @param t 時間,比值
* @param calculateX 計算哪個座標值 true=x
* @return
*/
private float deCastelJau(int i, int j, float t, boolean calculateX) {
if (i == 1) {
//一階曲線
return calculateX ? (1 - t) * mControlPoints.get(j).x + t * mControlPoints.get(j + 1).x :
(1 - t) * mControlPoints.get(j).y + t * mControlPoints.get(j + 1).y;
} else {
//遞歸降階
return (1 - t) * deCastelJau(i - 1, j, t, calculateX) + t * deCastelJau(i - 1, j + 1, t, calculateX);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
init();
invalidate();
}
return super.onTouchEvent(event);
}
}
繪製仿QQ氣泡
package com.dn_alan.myapplication;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.PointFEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Rect;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
/**
* QQ氣泡效果
*/
public class DragBubbleView extends View {
/**
* 氣泡默認狀態--靜止
*/
private final int BUBBLE_STATE_DEFAUL = 0;
/**
* 氣泡相連
*/
private final int BUBBLE_STATE_CONNECT = 1;
/**
* 氣泡分離
*/
private final int BUBBLE_STATE_APART = 2;
/**
* 氣泡消失
*/
private final int BUBBLE_STATE_DISMISS = 3;
/**
* 氣泡半徑
*/
private float mBubbleRadius;
/**
* 氣泡顏色
*/
private int mBubbleColor;
/**
* 氣泡消息文字
*/
private String mTextStr;
/**
* 氣泡消息文字顏色
*/
private int mTextColor;
/**
* 氣泡消息文字大小
*/
private float mTextSize;
/**
* 不動氣泡的半徑
*/
private float mBubStillRadius;
/**
* 可動氣泡的半徑
*/
private float mBubMoveableRadius;
/**
* 不動氣泡的圓心
*/
private PointF mBubStillCenter;
/**
* 可動氣泡的圓心
*/
private PointF mBubMoveableCenter;
/**
* 氣泡的畫筆
*/
private Paint mBubblePaint;
/**
* 貝塞爾曲線path
*/
private Path mBezierPath;
private Paint mTextPaint;
//文本繪製區域
private Rect mTextRect;
private Paint mBurstPaint;
//爆炸繪製區域
private Rect mBurstRect;
/**
* 氣泡狀態標誌
*/
private int mBubbleState = BUBBLE_STATE_DEFAUL;
/**
* 兩氣泡圓心距離
*/
private float mDist;
/**
* 氣泡相連狀態最大圓心距離
*/
private float mMaxDist;
/**
* 手指觸摸偏移量
*/
private final float MOVE_OFFSET;
/**
* 氣泡爆炸的bitmap數組
*/
private Bitmap[] mBurstBitmapsArray;
/**
* 是否在執行氣泡爆炸動畫
*/
private boolean mIsBurstAnimStart = false;
/**
* 當前氣泡爆炸圖片index
*/
private int mCurDrawableIndex;
/**
* 氣泡爆炸的圖片id數組
*/
private int[] mBurstDrawablesArray = {R.drawable.burst_1, R.drawable.burst_2
, R.drawable.burst_3, R.drawable.burst_4, R.drawable.burst_5};
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public DragBubbleView(Context context) {
this(context,null);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public DragBubbleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public DragBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr,0
);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public DragBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
//獲取 XML layout中的屬性值
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.DragBubbleView,defStyleAttr,0);
mBubbleRadius = array.getDimension(R.styleable.DragBubbleView_bubble_radius,mBubbleRadius);
mBubbleColor = array.getColor(R.styleable.DragBubbleView_bubble_color, Color.RED);
mTextStr = array.getString(R.styleable.DragBubbleView_bubble_text);
mTextSize = array.getDimension(R.styleable.DragBubbleView_bubble_textSize,mTextSize);
mTextColor = array.getColor(R.styleable.DragBubbleView_bubble_textColor, Color.WHITE);
//回收TypedArray
array.recycle();
mBubStillRadius = mBubbleRadius;
mBubMoveableRadius = mBubStillRadius;
mMaxDist = 8 * mBubbleRadius;
MOVE_OFFSET = mMaxDist / 4;
//抗鋸齒
mBubblePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBubblePaint.setColor(mBubbleColor);
mBubblePaint.setStyle(Paint.Style.FILL);
mBezierPath = new Path();
//文本畫筆
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextRect = new Rect();
//爆炸畫筆
mBurstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBurstPaint.setFilterBitmap(true);
mBurstRect = new Rect();
mBurstBitmapsArray = new Bitmap[mBurstDrawablesArray.length];
for (int i = 0; i < mBurstDrawablesArray.length; i++) {
//將氣泡爆炸的drawable轉爲bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), mBurstDrawablesArray[i]);
mBurstBitmapsArray[i] = bitmap;
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
initView(w,h);
}
/**
* 初始化氣泡位置
* @param w
* @param h
*/
private void initView(int w, int h) {
//設置兩氣泡圓心初始座標
if(mBubStillCenter == null){
mBubStillCenter = new PointF(w / 2,h / 2);
}else{
mBubStillCenter.set(w / 2,h / 2);
}
if(mBubMoveableCenter == null){
mBubMoveableCenter = new PointF(w / 2,h / 2);
}else{
mBubMoveableCenter.set(w / 2,h / 2);
}
mBubbleState = BUBBLE_STATE_DEFAUL;
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
{
if(mBubbleState != BUBBLE_STATE_DISMISS){
// 將所提供的參數求平方和後開平方根的結果。
mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x,
event.getY() - mBubStillCenter.y);
if(mDist < mBubbleRadius + MOVE_OFFSET){
// 加上MOVE_OFFSET是爲了方便拖拽
mBubbleState = BUBBLE_STATE_CONNECT;
}else{
mBubbleState = BUBBLE_STATE_DEFAUL;
}
}
}
break;
case MotionEvent.ACTION_MOVE:
{
if(mBubbleState != BUBBLE_STATE_DEFAUL){
mBubMoveableCenter.x = event.getX();
mBubMoveableCenter.y = event.getY();
mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x,
event.getY() - mBubStillCenter.y);
if(mBubbleState == BUBBLE_STATE_CONNECT){
// 減去MOVE_OFFSET是爲了讓不動氣泡半徑到一個較小值時就直接消失
// 或者說是進入分離狀態
if(mDist < mMaxDist - MOVE_OFFSET){
mBubStillRadius = mBubbleRadius - mDist / 8;
}else{
mBubbleState = BUBBLE_STATE_APART;
}
}
invalidate();
}
}
break;
case MotionEvent.ACTION_UP:
{
if(mBubbleState == BUBBLE_STATE_CONNECT){
startBubbleRestAnim();
}else if(mBubbleState == BUBBLE_STATE_APART){
if(mDist < 2 * mBubbleRadius){
startBubbleRestAnim();
}else{
startBubbleBurstAnim();
}
}
}
break;
}
return true;
}
private void startBubbleBurstAnim() {
//氣泡改爲消失狀態
mBubbleState = BUBBLE_STATE_DISMISS;
mIsBurstAnimStart = true;
//做一個int型屬性動畫,從0~mBurstDrawablesArray.length結束
ValueAnimator anim = ValueAnimator.ofInt(0, mBurstDrawablesArray.length);
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(500);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//設置當前繪製的爆炸圖片index
mCurDrawableIndex = (int) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//修改動畫執行標誌
mIsBurstAnimStart = false;
}
});
anim.start();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void startBubbleRestAnim() {
ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),
new PointF(mBubMoveableCenter.x,mBubMoveableCenter.y),
new PointF(mBubStillCenter.x,mBubStillCenter.y));
anim.setDuration(200);
anim.setInterpolator(new OvershootInterpolator(5f));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBubMoveableCenter = (PointF) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mBubbleState = BUBBLE_STATE_DEFAUL;
}
});
anim.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 1、畫靜止狀態
// 2、畫相連狀態
// 3、畫分離狀態
// 4、畫消失狀態---爆炸動畫
// 1、畫拖拽的氣泡 和 文字,只要不是消失狀態都要繪製帶文字的圓
if(mBubbleState != BUBBLE_STATE_DISMISS){
//靜止狀態下移動的小圓(沒有文字的那個小圓圈)
canvas.drawCircle(mBubMoveableCenter.x,mBubMoveableCenter.y,
mBubMoveableRadius,mBubblePaint);
mTextPaint.getTextBounds(mTextStr,0,mTextStr.length(),mTextRect);
canvas.drawText(mTextStr,mBubMoveableCenter.x - mTextRect.width() / 2,
mBubMoveableCenter.y + mTextRect.height() / 2,mTextPaint);
}
// 2、畫相連的氣泡狀態
if(mBubbleState == BUBBLE_STATE_CONNECT)
{
// 1、畫靜止氣泡
canvas.drawCircle(mBubStillCenter.x,mBubStillCenter.y,
mBubStillRadius,mBubblePaint);
// 2、畫相連曲線
// 計算控制點座標,兩個圓心的中點
int iAnchorX = (int) ((mBubStillCenter.x + mBubMoveableCenter.x) / 2);
int iAnchorY = (int) ((mBubStillCenter.y + mBubMoveableCenter.y) / 2);
// O1E/O1O2
float cosTheta = (mBubMoveableCenter.x - mBubStillCenter.x) / mDist;
// O2E/O1O2
float sinTheta = (mBubMoveableCenter.y - mBubStillCenter.y) / mDist;
//求出ABCD四個點的座標
float iBubStillStartX = mBubStillCenter.x - mBubStillRadius * sinTheta;
float iBubStillStartY = mBubStillCenter.y + mBubStillRadius * cosTheta;
float iBubStillEndX = mBubStillCenter.x + mBubStillRadius * sinTheta;
float iBubStillEndY = mBubStillCenter.y - mBubStillRadius * cosTheta;
float iBubMoveableStartX = mBubMoveableCenter.x + mBubMoveableRadius * sinTheta;
float iBubMoveableStartY = mBubMoveableCenter.y - mBubMoveableRadius * cosTheta;
float iBubMoveableEndX = mBubMoveableCenter.x - mBubMoveableRadius * sinTheta;
float iBubMoveableEndY = mBubMoveableCenter.y + mBubMoveableRadius * cosTheta;
mBezierPath.reset();//清除Path中的內容, reset不保留內部數據結構(重置路徑)
// 畫上半弧
mBezierPath.moveTo(iBubStillStartX,iBubStillStartY);//將路徑的繪製位置定在(x,y)的位置
mBezierPath.quadTo(iAnchorX,iAnchorY,iBubMoveableEndX,iBubMoveableEndY);//二階貝塞爾曲線
// 畫下半弧
mBezierPath.lineTo(iBubMoveableStartX,iBubMoveableStartY);//結束點或者下一次繪製直線路徑的開始點
mBezierPath.quadTo(iAnchorX,iAnchorY,iBubStillEndX,iBubStillEndY);//二階貝塞爾曲線
//連接第一個點連接到最後一個點,形成一個閉合區域
mBezierPath.close();
canvas.drawPath(mBezierPath,mBubblePaint);
}
// 3、畫消失狀態---爆炸動畫
if(mIsBurstAnimStart){
mBurstRect.set((int)(mBubMoveableCenter.x - mBubMoveableRadius),
(int)(mBubMoveableCenter.y - mBubMoveableRadius),
(int)(mBubMoveableCenter.x + mBubMoveableRadius),
(int)(mBubMoveableCenter.y + mBubMoveableRadius));
canvas.drawBitmap(mBurstBitmapsArray[mCurDrawableIndex],null,
mBurstRect,mBubblePaint);
}
}
public void reset() {
initView(getWidth(),getHeight());
invalidate();
}
}
package com.dn_alan.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
private DragBubbleView dragBubbleView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// //qq氣泡
setContentView(R.layout.activity_main);
dragBubbleView = findViewById(R.id.drag_buddle_view);
}
public void reset(View view) {
dragBubbleView.reset();
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#666666">
<!--android:clipChildren="false"-->
<com.dn_alan.myapplication.DragBubbleView
android:id="@+id/drag_buddle_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:bubble_text="30"
app:bubble_textColor="#ffffff"
app:bubble_textSize="12dp"
app:bubble_radius="12dp"
app:bubble_color="#ff0000"
/>
<Button
android:id="@+id/reset_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="reset"
android:layout_alignParentBottom="true"
android:layout_margin="20dp"
android:textColor="#666666"
android:text="還原" />
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="DragBubbleView">
<attr name="bubble_radius" format="dimension"/>
<attr name="bubble_color" format="color"/>
<attr name="bubble_text" format="string"/>
<attr name="bubble_textSize" format="dimension"/>
<attr name="bubble_textColor" format="color"/>
</declare-styleable>
</resources>
看下效果