返回
贝塞尔工具画曲线的原理是什么（贝塞尔曲线之爱心点赞代码全解析）
贝塞尔工具画曲线的原理是什么（贝塞尔曲线之爱心点赞代码全解析）
2024-11-23 11:16:52  作者:绿亦歌  网址:https://m.xinb2b.cn/life/plc248741.html



作者 | 威威喵

责编 | 屠敏

出品 | CSDN 博客

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

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


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

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

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

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

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

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



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



三阶贝塞尔曲线公式：



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


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

private Point setPoint1 {

Point points = new Point{

new Point(mLoveX, mLoveY),

new Point(0, mcanvasHeight / 2),

new Point(mCanvasWidth 20, -mLoveWidth - 10),

};

return points;

}

private Point setPoint2 {

Point points = new Point{

new Point(mLoveX, mLoveY),

new Point(mCanvasWidth, mCanvasHeight / 2),

new Point(-mLoveWidth - 20, -mLoveWidth - 10),

};

return points;

}

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

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

private Point deCasteljau(Point[] points, float k) {

final int n = points.length;

for (int i = 1; i <= n; i )

for (int j = 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);

}

return points[0];

}

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

mLoveThread = new Thread(new Runnable {

@Override

public void run {

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

protected void onDraw(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 中拿到点击的坐标位置，然后去判断它的点击位置是不是在那个爱心图片里面，代码如下：

private boolean isTouchLoveArea(int touchX, int touchY) {

return touchX >= mLoveBitmapX && touchX <= mLoveBitmapX mLoveBitmapWidth

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

}

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

package com.example.xww.my
application;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.Point;

import android.os.Build;

import android.support.annotation.able;

import android.support.annotation.RequiresApi;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import java.util.Random;

import java.util.concurrent.ExecutorService;

import java.util.concurrent.Executors;

@RequiresApi(api = Build.VERSION_CODES.N)

public class LoveView extends View {

private Paint mPaint;

//爱心图片

private Bitmap mLoveBitmap;

private Bitmap mLove1;

private Bitmap mLove2;

private Bitmap mLove3;

private Bitmap mLove4;

private Bitmap mLove5;

private Bitmap mLove6;

private Bitmap mDefLove;

private int mLoveWidth;

private int mLoveX;

private int mLoveY;

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

private int mLoveBitmapX;

private int mLoveBitmapY;

//图片的宽、高

private int mLoveBitmapWidth;

private int mLoveBitmapHeight;

// 画布宽、高

private int mCanvasWidth;

private int mCanvasHeight;

//触摸点

private int mTouchX;

private int mTouchY;

private ExecutorService mExecutorService;

private Thread mLoveThread;

//随机数

private Random mRandom;

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

private Point mPoints;//构成曲线随机点集合

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

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

}

private int measureSpecWidth(int widthMeasureSpec) {

int mode = MeasureSpec.getMode(widthMeasureSpec);

int size = MeasureSpec.getSize(widthMeasureSpec);

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

}

private int measureSpecHeigth(int heightMeasureSpec) {

int mode = MeasureSpec.getMode(heightMeasureSpec);

int size = MeasureSpec.getSize(heightMeasureSpec);

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

}

private void init {

initPaint;

initBitmap;

mRandom = new Random;

mExecutorService = Executors.newWorkStealingPool(6);

}

private void initBitmap {

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;

}

private Bitmap reSizeLove(Bitmap src) {

return Bitmap.createScaledBitmap(src, 160, 160, false);

}

private void initPaint {

mPaint = new Paint;

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);

}

public LoveView(Context context) {

this(context, );

}

public LoveView(Context context, @able AttributeSet attrs) {

this(context, attrs, 0);

}

public LoveView(Context context, @able AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init;

}

@Override

protected void onDraw(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);

}

private Point setPoint1 {

Point points = new Point{

new Point(mLoveX, mLoveY),

new Point(0, mCanvasHeight / 2),

new Point(mCanvasWidth 20, -mLoveWidth - 10),

};

return points;

}

private Point setPoint2 {

Point points = new Point{

new Point(mLoveX, mLoveY),

new Point(mCanvasWidth, mCanvasHeight / 2),

new Point(-mLoveWidth - 20, -mLoveWidth - 10),

};

return points;

}

private void setDefPosition {

mLoveX = mCanvasWidth / 2 - mLoveWidth / 2;

mLoveY = mLoveBitmapY - 80;

}

private void drawDynamicLove {

setDefPosition;

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

int color = mRandom.nextInt(6) 1;

mDefLove = getBitmap(color);

k = 0;//开始

//添加贝塞尔路径的点

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

mPoints = setPoint1;

} else {

mPoints = setPoint2;

}

mLoveThread = new Thread(new Runnable {

@Override

public void run {

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);

}

private Bitmap getBitmap(int color) {

switch (color) {

case 1:

return mLove1;

case 2:

return mLove2;

case 3:

return mLove3;

case 4:

return mLove4;

case 5:

return mLove5;

case 6:

return mLove6;

}

return ;

}

private void drawLoveBitmap(Canvas canvas) {

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

}

private Point deCasteljau(Point[] points, float k) {

final int n = points.length;

for (int i = 1; i <= n; i )

for (int j = 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);

}

return points[0];

}

@Override

public boolean onTouchEvent(MotionEvent event) {

mTouchX = (int) event.getX;

mTouchY = (int) event.getY;

switch (event.getAction) {

case MotionEvent.ACTION_DOWN:

if (isTouchLoveArea(mTouchX, mTouchY)) {

drawDynamicLove;

}

break;

case MotionEvent.ACTION_UP:

break;

}

return super.onTouchEvent(event);

}

private boolean isTouchLoveArea(int touchX, int touchY) {

return touchX >= mLoveBitmapX && touchX <= mLoveBitmapX mLoveBitmapWidth

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

}

}

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

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

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

【END】


  • 家里养鸭子方法（家里养鸭子方法是什么）
  • 2024-11-23家里养鸭子方法是什么首先要及时开食：雏鸭出壳1天后即开食开食前需先“开水”(饮温水)，饮水中可加入适量的葡萄糖和维生素C开食的饲料宜用五成熟的大米饭，将其撒在竹席上，让雏鸭自由啄食，每天喂6~8次4天后改为煮烂的小麦或全。
  • 看懂车后标（教小白快速读懂车尾标）
  • 2024-11-23教小白快速读懂车尾标现在市面上车有国产车、合资车、进口车，车型也多，很多车会通过车尾标，来标示出车的性能、配置、车辆扭矩以及车辆使用的新技术等，下面就列举解读PASSAT330TSI车型:上汽大众帕萨特，330是指扭矩在。
  • 有诗意不俗气的男孩名字（怎么用四书五经取英俊潇洒的男孩名字）
  • 2024-11-23怎么用四书五经取英俊潇洒的男孩名字名字是我们每个人的一张名片，虽然只是个文字符号，起名字但它具有信息能量及文字的全息理念每个人都有自己的个性，而要拥有自己独特的个性，就要勇于做一个不随波逐流，有梦想，有追求的人因此，拥有一个出彩的名字。
  • 孩子双排牙必须手术吗（孩子出现了双排牙）
  • 2024-11-23孩子出现了双排牙@儿童牙医嵘到了换牙期的孩子，口腔里会有一些不寻常，比如，孩子出现了双排牙……家长需要重视起来，是时候带孩子去看医生了换牙时期出现“双排牙”现在的孩子，吃的食物过于精细，经常导致新牙从里面长出的时候乳。
  • 两边脸不对称适合什么发型（了解一下）
  • 2024-11-23了解一下两边脸不对称的女生在选择发型的时候，当然也要选择一些左右不对称的一些发型，这样子的发型就可以很好地去修饰一下你的脸型了两边脸不对称的女生可以选择短发的波波头的发型，左右不对称的直发，长长的侧式的长刘海。
  • 大海睡了作者简介（海作者:乔望键）
  • 2024-11-23海作者:乔望键大海边，沙滩上，航标竖立，海鸥飞翔，初见大海是那样的神秘，波涛汹汹，一片汪洋都不见；海连天，天连海，洪波淼淼，坐在快艇上，驶进深海漩涡；才知道大海的博大胸怀，才领略大海的挺壮巍峨；茫茫天际，蓝天中有海。
  • 各种蔬菜的种植方法大全（蔬菜种植我常用三个新方法）
  • 2024-11-23蔬菜种植我常用三个新方法蔬菜是农村家家户户都必须要种植的作物，除了供应自家食用外，还是农村最重要的经济来源，但多数农户种植蔬菜还都是沿用传统的种植方法，对新技术、新方法一概不知，导致蔬菜产量和质量低下，因此，今天分享几个我自。
  • 新员工自我介绍一分钟范文（新员工自我介绍一分钟）
  • 2024-11-23新员工自我介绍一分钟新员工自我介绍一分钟（一）　　大家好，本人叫xxx，在来到公司之前已经在社会工作了x年的时间两年不长，但是也让本人脱离了刚从校门的青涩与迷茫，使本人对社会工作有了一定的了解与适应，同时也在原来的工作中。
  • 哪个厂家生产的电炒锅质量好（电炒锅市场研究报告）
  • 2024-11-23电炒锅市场研究报告生活节奏的加快以及健康时尚的理念下，无明火，加热方便的电炒锅越来越多地出现在现代厨房中，它既可以用来炒菜，亦可进行煎、炸操作，煲汤、炖肉的功夫也不错，虽然比明火炒菜少了一些烟火气，但方便、易清洁及可以。
  • 互联网对管理的意义（解构互联网黑话）
  • 2024-11-23解构互联网黑话上期我们讨论了「互联网黑话」的流行，从个人角度出发，定义了互联网黑话的基本概念和概念约束，以便于帮助大家理解互联网黑话，分辨互联网黑话是什么以及互联网黑话不是什么解构互联网黑话「上」：定义与边界有很多。
  • 痛风能吃火锅吗吃什么好（冬去春来夏将至）
  • 2024-11-23冬去春来夏将至热气腾腾，边涮边吃、口味多样、食材繁多，火锅无论在什么时候都是一种很有力量的美食，一顿火锅也可以看穿一个人，一顿火锅还可以结交一帮朋友，但是这里，我们要讨论的是火锅中嘌呤到底高不高？冬去春来夏将至，痛。
  • 芍药花的栽培和繁殖方法（芍药花如何栽培呢与繁殖方法）
  • 2024-11-23芍药花如何栽培呢与繁殖方法芍药花可采取扦插的方式进行繁殖，扦插芍药花时，从健康的母株上截取5根枝条，将枝条放入清水中浸泡10分钟，来加快芍药花发芽的速度将枝条处理完成后，就可将其插入疏松肥沃的土壤中芍药花扦插完成后，需每隔3天。