原标题：贝塞尔曲线之爱心点赞代码全解析！| CSDN 博文精选

作者 | 威威喵

责编 | 屠敏

出品 | CSDN 博客

直接步入正题，我们要实现的是一个 Android 客户端应用里面的一种点赞效果，比如你点一下那个爱心型的图片，就会产生一个小爱心，而且会以曲线的方式进行上升，直到它消失为止。

文字描述只能是这样的了，我们直接来看动态图吧，效果更直观。

本案例是由我自己写的，因为之前对这个贝塞尔曲线有一点点了解，还有无意间看到了这个效果，觉得挺赞的，就顺便写了一下demo，并且学习了一些关于贝塞尔曲线的相关知识。

首先，要看懂本案例的代码，你需要具备 Android 自定义 View 的基本知识，并且你还有了解一些关于贝塞尔曲线的公式和算法。不过没关系，我们并不需要对贝塞尔深刻了解，只要会基本的根据公式，套用代码就好了。

来看一下贝塞尔曲线的一些相关知识，我也是从大佬的博客中学习得来的。我们来看看什么是贝塞尔曲线？

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

更形象的就直接来看动态图吧。

一阶贝塞尔曲线公式：由 P0 至 P1 的连续点， 描述的一条线段

二阶贝塞尔曲线公式：曲线的切线 P0-P1、P1-P2 组成的运动轨迹

三阶贝塞尔曲线公式：

从上面的动态图，可以很直观的看到曲线的计算公式和它的路径形成的规律。而我们要实现的效果，运用的就是三阶贝塞尔曲线的公式。首先，需要确定曲线的路径的话，就必须先确定它的点位置。我以是这样的方式来确定点位置的，如下图：

我使用的就是这三个点，两边都可以，随机的选择一边。这样的话，我们的曲线就在屏幕内，它的形成大致和我们上面的动态图有点类似。那么看代码：

privatePoint[] setPoint1(){

Point[] points = newPoint[]{

newPoint(mLoveX, mLoveY),

newPoint(0, mCanvasHeight / 2),

newPoint(mCanvasWidth + 20, -mLoveWidth - 10),

};

returnpoints;

}

privatePoint[] setPoint2(){

Point[] points = newPoint[]{

newPoint(mLoveX, mLoveY),

newPoint(mCanvasWidth, mCanvasHeight / 2),

newPoint(-mLoveWidth - 20, -mLoveWidth - 10),

};

returnpoints;

}

上面代码是初始化两种点的坐标，mLoveX，mLoveY 表示我们的爱心起始的位置。第一个集合点，对应图中的蓝线，第二个集合点，就对应橙色了。

接下来是重点部分，也就是把贝塞尔曲线公式转化为代码的形式，根据动态图中有一个 t 值，它的区间是 [0,1] 的，这个也很形象，t 从 0 变到 1 时，意味着曲线已经绘制完了。看代码：

/**

* 根据点得到曲线的路径上的点，k 是变化趋势

*/

privatePoint deCasteljau(Point[] points, floatk){

final intn = points.length;

for(inti = 1; i <= n; i++)

for(intj = 0; j < n - i; j++) {

points[j].x = (int) ((1- k) * points[j].x + k * points[j + 1].x);

points[j].y = (int) ((1- k) * points[j].y + k * points[j + 1].y);

}

returnpoints[0];

}

刚刚我们定义的两种点的集合，就可以将它传入了，这样根据 k 值的变化，就可以得到对应位置曲线上的点坐标。接下来，我们的任务就是开启一个子线程去跟新 k 值，将 k 值有 0 加到 1，然后返回的每个 point 对象，就是整条曲线的坐标散点。执行子线程获取点的代码：

mLoveThread = newThread(newRunnable {

@Override

publicvoidrun{

while(k < 1) {

k += 0.01;

Point point = deCasteljau(mPoints, k);

mLoveX = point.x;

mLoveY = point.y;

if(mLoveY <= -mLoveWidth || mLoveY >= mCanvasHeight) {

k = 1;

}

if(mLoveX <= -mLoveWidth || mLoveX >= mCanvasWidth) {

k = 1;

}

postInvalidate;//异步刷新

try{

Thread.sleep(80);

} catch(InterruptedException e) {

e.printStackTrace;

}

}

}

});

通过上面代码，我们就可以获取爱心图片的 x，y 坐标值了，然后再通过 onDraw 里面将它进行绘制就搞定啦。

@Override

protectedvoidonDraw(Canvas canvas){

super.onDraw(canvas);

mCanvasWidth = canvas.getWidth;

mCanvasHeight = canvas.getHeight;

mLoveBitmapX = mCanvasWidth / 2- mLoveBitmapWidth / 2;

mLoveBitmapY = mCanvasHeight - 2* mLoveBitmapHeight;

drawLoveBitmap(canvas);

canvas.drawBitmap(mDefLove, mLoveX, mLoveY, mPaint);

//随便画的

canvas.drawText("点赞", mCanvasWidth / 2- mPaint.getTextSize, mLoveBitmapY + mLoveBitmapHeight + 100, mPaint);

canvas.drawLine(0, mLoveBitmapY + mLoveBitmapHeight + 20, mCanvasWidth, mLoveBitmapY + mLoveBitmapHeight + 20, mPaint);

}

这里的爱心，我使用的是六张不同的图片，我之前想尝试使用爱心函数公式来绘制的，不过也放弃了，计算太慢了，每个爱心算出来都要停顿一下，只好换图片的形式。

最后提一下就是点击这个图片才绘制的功能，我是在 onTouchEvent 中拿到点击的坐标位置，然后去判断它的点击位置是不是在那个爱心图片里面，代码如下：

privatebooleanisTouchLoveArea(inttouchX, inttouchY){

returntouchX >= mLoveBitmapX && touchX <= mLoveBitmapX + mLoveBitmapWidth

&& touchY > mLoveBitmapY && touchY <= mLoveBitmapY + mLoveBitmapHeight;

}

好了，最后也没什么好介绍的了，剩下的基本都是自定义 View 的知识，我们主要是关注这个贝塞尔曲线是如何绘制的就好，那么完整代码如下：

packagecom.example.xww.myapplication;

importandroid.content.Context;

importandroid.graphics.Bitmap;

importandroid.graphics.BitmapFactory;

importandroid.graphics.Canvas;

importandroid.graphics.Paint;

importandroid.graphics.Point;

importandroid.os.Build;

importandroid.support.annotation.Nullable;

importandroid.support.annotation.RequiresApi;

importandroid.util.AttributeSet;

importandroid.view.MotionEvent;

importandroid.view.View;

importjava.util.Random;

importjava.util.concurrent.ExecutorService;

importjava.util.concurrent.Executors;

/**

* @authorxww

* @desciption: 点赞时爱心飘了，爱心路径绘制的是贝塞尔曲线

* @博客：https://blog.csdn.net/smile_running

* @date2019/7/30

* @time20:59

*/

@RequiresApi(api = Build.VERSION_CODES.N)

publicclassLoveViewextendsView{

privatePaint mPaint;

//爱心图片

privateBitmap mLoveBitmap;

privateBitmap mLove1;

privateBitmap mLove2;

privateBitmap mLove3;

privateBitmap mLove4;

privateBitmap mLove5;

privateBitmap mLove6;

privateBitmap mDefLove;

privateintmLoveWidth;

privateintmLoveX;

privateintmLoveY;

//图片绘制的 x，y 坐标

privateintmLoveBitmapX;

privateintmLoveBitmapY;

//图片的宽、高

privateintmLoveBitmapWidth;

privateintmLoveBitmapHeight;

// 画布宽、高

privateintmCanvasWidth;

privateintmCanvasHeight;

//触摸点

privateintmTouchX;

privateintmTouchY;

privateExecutorService mExecutorService;

privateThread mLoveThread;

//随机数

privateRandom mRandom;

privatefloatk;//曲线斜率 k:[0,1]

privatePoint[] mPoints;//构成曲线随机点集合

@Override

protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec){

setMeasuredDimension(measureSpecWidth(widthMeasureSpec), measureSpecHeigth(heightMeasureSpec));

}

/**

* EXACTLY ：精确值，即 64dp 这样的具体值

* AT_MOST ：最大值，即 wrap_content 类型，可以达到父 View 一样的大小

* UNSPECIFIED ：未指定，即这个 View 可以无限大

*

* @paramwidthMeasureSpec 传入的 width 值

* @return宽度值

*/

privateintmeasureSpecWidth(intwidthMeasureSpec){

intmode = MeasureSpec.getMode(widthMeasureSpec);

intsize = MeasureSpec.getSize(widthMeasureSpec);

returnmode == MeasureSpec.EXACTLY ? size : Math.min(200, size);

}

privateintmeasureSpecHeigth(intheightMeasureSpec){

intmode = MeasureSpec.getMode(heightMeasureSpec);

intsize = MeasureSpec.getSize(heightMeasureSpec);

returnmode == MeasureSpec.EXACTLY ? size : Math.min(200, size);

}

privatevoidinit{

initPaint;

initBitmap;

mRandom = newRandom;

mExecutorService = Executors.newWorkStealingPool(6);

}

privatevoidinitBitmap{

mLoveBitmap = BitmapFactory.decodeResource(getResources, R.drawable.loveclick);

mLoveBitmap = Bitmap.createScaledBitmap(mLoveBitmap, 180, 180, false);

mLoveBitmapWidth = mLoveBitmap.getWidth;

mLoveBitmapHeight = mLoveBitmap.getHeight;

mLove1 = BitmapFactory.decodeResource(getResources, R.drawable.love1);

mLove2 = BitmapFactory.decodeResource(getResources, R.drawable.love2);

mLove3 = BitmapFactory.decodeResource(getResources, R.drawable.love3);

mLove4 = BitmapFactory.decodeResource(getResources, R.drawable.love4);

mLove5 = BitmapFactory.decodeResource(getResources, R.drawable.love5);

mLove6 = BitmapFactory.decodeResource(getResources, R.drawable.love6);

mLove1 = reSizeLove(mLove1);

mLove2 = reSizeLove(mLove2);

mLove3 = reSizeLove(mLove3);

mLove4 = reSizeLove(mLove4);

mLove5 = reSizeLove(mLove5);

mLove6 = reSizeLove(mLove6);

mDefLove = mLove1;

mLoveWidth = mLove1.getWidth;

setDefPosition;

}

privateBitmap reSizeLove(Bitmap src){

returnBitmap.createScaledBitmap(src, 160, 160, false);

}

privatevoidinitPaint{

mPaint = newPaint;

mPaint.setColor(getResources.getColor(android.R.color.holo_purple));

mPaint.setStrokeWidth(8f);

mPaint.setStyle(Paint.Style.FILL);

mPaint.setDither(true);

mPaint.setAntiAlias(true);

mPaint.setTextSize(45f);

}

publicLoveView(Context context){

this(context, null);

}

publicLoveView(Context context, @Nullable AttributeSet attrs){

this(context, attrs, 0);

}

publicLoveView(Context context, @Nullable AttributeSet attrs, intdefStyleAttr){

super(context, attrs, defStyleAttr);

init;

}

@Override

protectedvoidonDraw(Canvas canvas){

super.onDraw(canvas);

mCanvasWidth = canvas.getWidth;

mCanvasHeight = canvas.getHeight;

mLoveBitmapX = mCanvasWidth / 2- mLoveBitmapWidth / 2;

mLoveBitmapY = mCanvasHeight - 2* mLoveBitmapHeight;

drawLoveBitmap(canvas);

canvas.drawBitmap(mDefLove, mLoveX, mLoveY, mPaint);

//随便画的

canvas.drawText("点赞", mCanvasWidth / 2- mPaint.getTextSize, mLoveBitmapY + mLoveBitmapHeight + 100, mPaint);

canvas.drawLine(0, mLoveBitmapY + mLoveBitmapHeight + 20, mCanvasWidth, mLoveBitmapY + mLoveBitmapHeight + 20, mPaint);

}

privatePoint[] setPoint1 {

Point[] points = newPoint[]{

newPoint(mLoveX, mLoveY),

newPoint(0, mCanvasHeight / 2),

newPoint(mCanvasWidth + 20, -mLoveWidth - 10),

};

returnpoints;

}

privatePoint[] setPoint2 {

Point[] points = newPoint[]{

newPoint(mLoveX, mLoveY),

newPoint(mCanvasWidth, mCanvasHeight / 2),

newPoint(-mLoveWidth - 20, -mLoveWidth - 10),

};

returnpoints;

}

privatevoidsetDefPosition{

mLoveX = mCanvasWidth / 2- mLoveWidth / 2;

mLoveY = mLoveBitmapY - 80;

}

privatevoiddrawDynamicLove{

setDefPosition;

//设置爱心的样式和位置

intcolor = mRandom.nextInt(6) + 1;

mDefLove = getBitmap(color);

k = 0;//开始

//添加贝塞尔路径的点

if(mRandom.nextInt(2) == 0) {

mPoints = setPoint1;

} else{

mPoints = setPoint2;

}

mLoveThread = newThread(newRunnable {

@Override

publicvoidrun{

while(k < 1) {

k += 0.01;

Point point = deCasteljau(mPoints, k);

mLoveX = point.x;

mLoveY = point.y;

if(mLoveY <= -mLoveWidth || mLoveY >= mCanvasHeight) {

k = 1;

}

if(mLoveX <= -mLoveWidth || mLoveX >= mCanvasWidth) {

k = 1;

}

postInvalidate;//异步刷新

try{

Thread.sleep(80);

} catch(InterruptedException e) {

e.printStackTrace;

}

}

}

});

mExecutorService.execute(mLoveThread);

}

privateBitmap getBitmap(intcolor){

switch(color) {

case1:

returnmLove1;

case2:

returnmLove2;

case3:

returnmLove3;

case4:

returnmLove4;

case5:

returnmLove5;

case6:

returnmLove6;

}

returnnull;

}

privatevoiddrawLoveBitmap(Canvas canvas){

canvas.drawBitmap(mLoveBitmap, mLoveBitmapX, mLoveBitmapY, mPaint);

}

/**

* 根据点得到曲线的路径上的点，k 是变化趋势

*/

privatePoint deCasteljau(Point[] points, floatk){

finalintn = points.length;

for(inti = 1; i <= n; i++)

for(intj = 0; j < n - i; j++) {

points[j].x = (int) ((1- k) * points[j].x + k * points[j + 1].x);

points[j].y = (int) ((1- k) * points[j].y + k * points[j + 1].y);

}

returnpoints[0];

}

@Override

publicbooleanonTouchEvent(MotionEvent event){

mTouchX = (int) event.getX;

mTouchY = (int) event.getY;

switch(event.getAction) {

caseMotionEvent.ACTION_DOWN:

if(isTouchLoveArea(mTouchX, mTouchY)) {

drawDynamicLove;

}

break;

caseMotionEvent.ACTION_UP:

break;

}

returnsuper.onTouchEvent(event);

}

privatebooleanisTouchLoveArea(inttouchX, inttouchY){

returntouchX >= mLoveBitmapX && touchX <= mLoveBitmapX + mLoveBitmapWidth

&& touchY > mLoveBitmapY && touchY <= mLoveBitmapY + mLoveBitmapHeight;

}

}

这就是整个效果的代码图了，将它放到 activity_main 里面，运行一下就可以看到效果了。

声明：本文为 CSDN 博客精选文章，版权归作者所有。作者：威威喵

原文：https://blog.csdn.net/smile_Running/article/details/98170645

热 文 推 荐

责任编辑：