Path详解
一阶贝塞尔曲线,表示的是一条直线
or(效果等效,一个绝对位置一个相对位置)
贝塞尔曲线
多阶贝塞尔曲线
package com.netease.canvas_bezier;
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.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Random;
public class BezierView extends View {
private Paint mPaint;
private Paint mLinePointPaint;
private Path mPath;
private List<PointF> mControlPoints;//控制点集合(包含数据点)
public BezierView(Context context) {
super(context);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(4);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.RED);
mLinePointPaint = new Paint();
mLinePointPaint.setAntiAlias(true);
mLinePointPaint.setStrokeWidth(4);
mLinePointPaint.setStyle(Paint.Style.STROKE);
mLinePointPaint.setColor(Color.GRAY);
mPath = new Path();
mControlPoints = new ArrayList<>();
init();
}
private void init() {
mControlPoints.clear();
Random random = new Random();
for (int i = 0; i < 9; i++) {
int x = random.nextInt(800) + 200;
int y = random.nextInt(800) + 200;
PointF pointF = new PointF(x, y);
mControlPoints.add(pointF);
}
}
@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.GRAY);
//控制点连线
canvas.drawLine(mControlPoints.get(i - 1).x, mControlPoints.get(i - 1).y, pointF.x, pointF.y, mLinePointPaint);
}
//起点、终点换颜色
if (i == 0) {
mLinePointPaint.setColor(Color.RED);
} else if (i == size - 1) {
mLinePointPaint.setColor(Color.BLUE);
}
canvas.drawCircle(pointF.x, pointF.y, 10, mLinePointPaint);
}
//曲线连接
// buildBezierPoints();
calculate();
canvas.drawPath(mPath, mPaint);
}
private ArrayList<PointF> calculate() {
mPath.reset();
//控制点个数(number-1阶)
int number = mControlPoints.size();
//小于2阶省略
if (number < 2) {
return null;
}
ArrayList<PointF> points = new ArrayList<>();
//计算杨辉三角
int[] mi = new int[number];
mi[0] = mi[1] = 1;//第二层(一阶常数项)
for (int i = 3; i <= number; i++) {
//得到上一层的数据
int[] t = new int[i - 1];
for (int j = 0; j < t.length; j++) {
t[j] = mi[j];
}
//计算当前行的数据
mi[0] = mi[i - 1] = 1;
for (int j = 0; j < i - 2; j++) {
mi[j + 1] = t[j] + t[j + 1];
}
}
//计算坐标点
for (int i = 0; i < 1000; i++) {
float t = (float) i / 1000;
//分别计算x,y坐标
//计算各项和(𝑛¦𝑖) 𝑃_𝑖 〖(1−𝑡)〗^(𝑛−i) 𝑡^𝑖
PointF pointF = new PointF();
for (int j = 0; j < number; j++) {
pointF.x += mi[j] * mControlPoints.get(j).x * Math.pow(1 - t, number - 1 - j) * Math.pow(t, j);
pointF.y += mi[j] * mControlPoints.get(j).y * Math.pow(1 - t, number - 1 - j) * Math.pow(t, j);
}
points.add(pointF);
//0 moveTo
if (i == 0) {
mPath.moveTo(pointF.x, pointF.y);
} else {
mPath.lineTo(pointF.x, pointF.y);
}
}
return points;
}
private ArrayList<PointF> buildBezierPoints() {
mPath.reset();
ArrayList<PointF> points = new ArrayList<>();
int order = mControlPoints.size() - 1;//阶数
//份数
float delta = 1.0f / 1000;
for (float t = 0; t <= 1; t += delta) {
//bezier点集
PointF pointF = new PointF(deCastelJau(order, 0, t, true), deCastelJau(order, 0, t, false));//计算在曲线上色位置
points.add(pointF);
if (points.size() == 1) {
mPath.moveTo(points.get(0).x, points.get(0).y);
} else {
mPath.lineTo(pointF.x, pointF.y);
}
}
return points;
}
/**
* 通用计算公式
*
* @param positions 贝塞尔曲线控制点坐标
* @param precision 精度,需要计算的该条贝塞尔曲线上的点的数目
* @return 该条贝塞尔曲线上的点(二维坐标)
*/
public float[][] calculate(float[][] positions, int precision) {
//维度,坐标轴数(二维坐标,三维坐标...)
int dimension = positions[0].length;
//贝塞尔曲线控制点数(number-1阶数)
int number = positions.length;
//控制点数不小于 2 ,至少为二维坐标系
if (number < 2 || dimension < 2)
return null;
float[][] result = new float[precision][dimension];
//计算杨辉三角
int[] mi = new int[number];
mi[0] = mi[1] = 1;//第二层(一阶时常数项)
for (int i = 3; i <= number; i++) {
//得到上一层的数据
int[] t = new int[i - 1];
for (int j = 0; j < t.length; j++) {
t[j] = mi[j];
}
//计算当前行的数据
mi[0] = mi[i - 1] = 1;
for (int j = 0; j < i - 2; j++) {
mi[j + 1] = t[j] + t[j + 1];
}
}
//计算坐标点
for (int i = 0; i < precision; i++) {
float t = (float) i / precision;
//分别计算各轴上的坐标
for (int j = 0; j < dimension; j++) {
//计算各项和(𝑛¦𝑖) 𝑃_𝑖 〖(1−𝑡)〗^(𝑛−i) 𝑡^𝑖
float temp = 0.0f;
for (int k = 0; k < number; k++) {
temp += mi[k] * positions[k][j] * Math.pow(1 - t, number - 1 - k) * Math.pow(t, k);
}
result[i][j] = temp;
}
}
return result;
}
/**
* 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.netease.canvas.bezier;
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.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
/**
* QQ气泡效果
*/
public class DragBubbleView extends View {
/**
* 气泡默认状态--静止
*/
private final int BUBBLE_STATE_DEFAULT = 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 mBubFixedRadius;
/**
* 可动气泡的半径
*/
private float mBubMovableRadius;
/**
* 不动气泡的圆心
*/
private PointF mBubFixedCenter;
/**
* 可动气泡的圆心
*/
private PointF mBubMovableCenter;
/**
* 气泡的画笔
*/
private Paint mBubblePaint;
/**
* 贝塞尔曲线path
*/
private Path mBezierPath;
private Paint mTextPaint;
//文本绘制区域
private Rect mTextRect;
private Paint mBurstPaint;
//爆炸绘制区域
private Rect mBurstRect;
/**
* 气泡状态标志
*/
private int mBubbleState = BUBBLE_STATE_DEFAULT;
/**
* 两气泡圆心距离
*/
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.mipmap.burst_1, R.mipmap.burst_2, R.mipmap.burst_3, R.mipmap.burst_4, R.mipmap.burst_5};
public DragBubbleView(Context context) {
this(context, null);
}
public DragBubbleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public DragBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public DragBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
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);
array.recycle();
//两个圆半径大小一致
mBubFixedRadius = mBubbleRadius;
mBubMovableRadius = mBubFixedRadius;
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);
init(w, h);
}
private void init(int w, int h) {
mBubbleState = BUBBLE_STATE_DEFAULT;
//设置固定气泡圆心初始坐标
if (mBubFixedCenter == null) {
mBubFixedCenter = new PointF(w / 2, h / 2);
} else {
mBubFixedCenter.set(w / 2, h / 2);
}
//设置可动气泡圆心初始坐标
if (mBubMovableCenter == null) {
mBubMovableCenter = new PointF(w / 2, h / 2);
} else {
mBubMovableCenter.set(w / 2, h / 2);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1. 连接情况绘制贝塞尔曲线 2.绘制圆背景以及文本 3.另外端点绘制一个圆
//1. 静止状态 2,连接状态 3,分离状态 4,消失
if (mBubbleState == BUBBLE_STATE_CONNECT) {
//绘制静止的气泡
canvas.drawCircle(mBubFixedCenter.x, mBubFixedCenter.y, mBubFixedRadius, mBubblePaint);
//计算控制点的坐标
int iAnchorX = (int) ((mBubMovableCenter.x + mBubFixedCenter.x) / 2);
int iAnchorY = (int) ((mBubMovableCenter.y + mBubFixedCenter.y) / 2);
float sinTheta = (mBubMovableCenter.y - mBubFixedCenter.y) / mDist;
float cosTheta = (mBubMovableCenter.x - mBubFixedCenter.x) / mDist;
//D
float iBubFixedStartX = mBubFixedCenter.x - mBubFixedRadius * sinTheta;
float iBubFixedStartY = mBubFixedCenter.y + mBubFixedRadius * cosTheta;
//C
float iBubMovableEndX = mBubMovableCenter.x - mBubMovableRadius * sinTheta;
float iBubMovableEndY = mBubMovableCenter.y + mBubMovableRadius * cosTheta;
//A
float iBubFixedEndX = mBubFixedCenter.x + mBubFixedRadius * sinTheta;
float iBubFixedEndY = mBubFixedCenter.y - mBubFixedRadius * cosTheta;
//B
float iBubMovableStartX = mBubMovableCenter.x + mBubMovableRadius * sinTheta;
float iBubMovableStartY = mBubMovableCenter.y - mBubMovableRadius * cosTheta;
mBezierPath.reset();
mBezierPath.moveTo(iBubFixedStartX, iBubFixedStartY);
mBezierPath.quadTo(iAnchorX, iAnchorY, iBubMovableEndX, iBubMovableEndY);
mBezierPath.lineTo(iBubMovableStartX, iBubMovableStartY);
mBezierPath.quadTo(iAnchorX, iAnchorY, iBubFixedEndX, iBubFixedEndY);
mBezierPath.close();
canvas.drawPath(mBezierPath, mBubblePaint);
}
//静止,连接,分离状态都需要绘制圆背景以及文本
if (mBubbleState != BUBBLE_STATE_DISMISS) {
canvas.drawCircle(mBubMovableCenter.x, mBubMovableCenter.y, mBubMovableRadius, mBubblePaint);
mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect);
canvas.drawText(mTextStr, mBubMovableCenter.x - mTextRect.width() / 2, mBubMovableCenter.y + mTextRect.height() / 2, mTextPaint);
}
// 认为是消失状态,执行爆炸动画
if (mBubbleState == BUBBLE_STATE_DISMISS && mCurDrawableIndex < mBurstBitmapsArray.length) {
mBurstRect.set(
(int) (mBubMovableCenter.x - mBubMovableRadius),
(int) (mBubMovableCenter.y - mBubMovableRadius),
(int) (mBubMovableCenter.x + mBubMovableRadius),
(int) (mBubMovableCenter.y + mBubMovableRadius));
canvas.drawBitmap(mBurstBitmapsArray[mCurDrawableIndex], null, mBurstRect, mBubblePaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (mBubbleState != BUBBLE_STATE_DISMISS) {
mDist = (float) Math.hypot(event.getX() - mBubFixedCenter.x, event.getY() - mBubFixedCenter.y);
if (mDist < mBubbleRadius + MOVE_OFFSET) {
//加上MOVE_OFFSET是为了方便拖拽
mBubbleState = BUBBLE_STATE_CONNECT;
} else {
mBubbleState = BUBBLE_STATE_DEFAULT;
}
}
break;
case MotionEvent.ACTION_MOVE:
if (mBubbleState != BUBBLE_STATE_DEFAULT) {
mDist = (float) Math.hypot(event.getX() - mBubFixedCenter.x, event.getY() - mBubFixedCenter.y);
mBubMovableCenter.x = event.getX();
mBubMovableCenter.y = event.getY();
if (mBubbleState == BUBBLE_STATE_CONNECT) {
if (mDist < mMaxDist - MOVE_OFFSET) {
mBubFixedRadius = 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 startBubbleRestAnim() {
ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),
new PointF(mBubMovableCenter.x, mBubMovableCenter.y),
new PointF(mBubFixedCenter.x, mBubFixedCenter.y));
anim.setDuration(200);
anim.setInterpolator(new OvershootInterpolator(5f));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBubMovableCenter = (PointF) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mBubbleState = BUBBLE_STATE_DEFAULT;
}
});
anim.start();
}
/**
* 爆炸动画
*/
private void startBubbleBurstAnim() {
//将气泡改成消失状态
mBubbleState = BUBBLE_STATE_DISMISS;
ValueAnimator animator = ValueAnimator.ofInt(0, mBurstBitmapsArray.length);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(500);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurDrawableIndex = (int) animation.getAnimatedValue();
invalidate();
}
});
animator.start();
}
public void init(){
init(getWidth(), getHeight());
invalidate();
}
}