贝塞尔曲线之爱心点赞代码全解析！| CSDN 博文精选
作者 | 威威喵
责编 | 屠敏
出品 | CSDN 博客
直接步入正题，我们要实现的是一个 Android 客户端应用里面的一种点赞效果，比如你点一下那个爱心型的图片，就会产生一个小爱心，而且会以曲线的方式进行上升，直到它消失为止。
文字描述只能是这样的了，我们直接来看动态图吧，效果更直观。
本案例是由我自己写的，因为之前对这个贝塞尔曲线有一点点了解，还有无意间看到了这个效果，觉得挺赞的，就顺便写了一下demo，并且学习了一些关于贝塞尔曲线的相关知识。
首先，要看懂本案例的代码，你需要具备 Android 自定义 View 的基本知识，并且你还有了解一些关于贝塞尔曲线的公式和算法。不过没关系，我们并不需要对贝塞尔深刻了解，只要会基本的根据公式，套用代码就好了。
来看一下贝塞尔曲线的一些相关知识，我也是从大佬的博客中学习得来的。我们来看看什么是贝塞尔曲线？
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
更形象的就直接来看动态图吧。
一阶贝塞尔曲线公式：由 P0 至 P1 的连续点， 描述的一条线段
二阶贝塞尔曲线公式：曲线的切线 P0-P1、P1-P2 组成的运动轨迹
三阶贝塞尔曲线公式：
从上面的动态图，可以很直观的看到曲线的计算公式和它的路径形成的规律。而我们要实现的效果，运用的就是三阶贝塞尔曲线的公式。首先，需要确定曲线的路径的话，就必须先确定它的点位置。我以是这样的方式来确定点位置的，如下图：
我使用的就是这三个点，两边都可以，随机的选择一边。这样的话，我们的曲线就在屏幕内，它的形成大致和我们上面的动态图有点类似。那么看代码：
上面代码是初始化两种点的坐标，mLoveX，mLoveY 表示我们的爱心起始的位置。第一个集合点，对应图中的蓝线，第二个集合点，就对应橙色了。
接下来是重点部分，也就是把贝塞尔曲线公式转化为代码的形式，根据动态图中有一个 t 值，它的区间是 [0,1] 的，这个也很形象，t 从 0 变到 1 时，意味着曲线已经绘制完了。看代码：
刚刚我们定义的两种点的集合，就可以将它传入了，这样根据 k 值的变化，就可以得到对应位置曲线上的点坐标。接下来，我们的任务就是开启一个子线程去跟新 k 值，将 k 值有 0 加到 1，然后返回的每个 point 对象，就是整条曲线的坐标散点。执行子线程获取点的代码：
通过上面代码，我们就可以获取爱心图片的 x，y 坐标值了，然后再通过 onDraw() 里面将它进行绘制就搞定啦。
这里的爱心，我使用的是六张不同的图片，我之前想尝试使用爱心函数公式来绘制的，不过也放弃了，计算太慢了，每个爱心算出来都要停顿一下，只好换图片的形式。
最后提一下就是点击这个图片才绘制的功能，我是在 onTouchEvent 中拿到点击的坐标位置，然后去判断它的点击位置是不是在那个爱心图片里面，代码如下：
好了，最后也没什么好介绍的了，剩下的基本都是自定义 View 的知识，我们主要是关注这个贝塞尔曲线是如何绘制的就好，那么完整代码如下：
这就是整个效果的代码图了，将它放到 activity_main 里面，运行一下就可以看到效果了。
声明：本文为 CSDN 博客精选文章，版权归作者所有。作者：威威喵
原文：https://blog.csdn.net/smile_Running/article/details/98170645
【END】
这4个Python实战项目，让你很快读懂Python！
https://edu.csdn.net/topic/python115?utm_source=csdn_bw
热 文 推 荐
华为方舟编译器开源，我命由我不由天！
如何将 MySQL 去重操作优化到极致？| CSDN 博文精选
吊打 IE、Firefox，谷歌 Chrome 十年封神记
沃尔玛也要发币了，Libra忙活半天为他人做了嫁衣？
华为高通5G华山论剑，一文看懂5G芯片背后的明争暗斗
做实验、修电脑、命题相亲……IT 大佬教你七夕如何撩妹！
自然语言处理十问！独家福利
七夕大礼包：26个AI学习资源送给你！
☞痛！为什么说李彦宏无法拯救百度？
点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章。
你点的每个“在看”，我都认真当成了喜欢
贝塞尔曲线之爱心点赞代码全解析！| CSDN 博文精选相关推荐
- 手把手教你使用Flask轻松部署机器学习模型（附代码链接） | CSDN博文精选
作者 | Abhinav Sagar 翻译 | 申利彬 校对 | 吴金笛 来源 | 数据派THU(ID:DatapiTHU) 本文旨在让您把训练好的机器学习模型通过Flask API 投入到生产环境 ...
- Vision Transformer（ViT）PyTorch代码全解析（附图解）
Vision Transformer(ViT)PyTorch代码全解析 最近CV领域的Vision Transformer将在NLP领域的Transormer结果借鉴过来,屠杀了各大CV榜单.本文将根 ...
- 主板诊断卡代码全解析
主板诊断卡代码全解析 RUN灯功能介绍 该灯只用极少部件,故自身故障率极低,且只需极少的主板插槽信号,故即使插到一个坏的插槽中虽无法走代码,或其它的所有指示灯都不亮,但该灯很有可能照常工作,您可根据: ...
- 贝塞尔曲线 花束直播点赞效果
1. 效果 先说一下这种效果都用到了哪些东西: 1.自定义View的一些基础: 2.随机数的使用: 3.插补器的使用: 4.属性动画的一些高级用法 5.贝塞尔曲线应用到属性动画 2.分析和实现 2.1 ...
- 使用二阶贝塞尔曲线画爱心
简介 上一篇这一篇让你彻底搞懂贝塞尔曲线的原理中,我们介绍了贝塞尔曲线的原理.这一篇我们先用二阶贝塞尔曲线来做一个应用 -- 绘制爱心.首先回顾一下二阶贝塞尔曲线. 如上图所示,经过推导得出的曲线上的 ...
- 【又是一波重点】深度解析服务器科普知识 ｜ CSDN博文精选
戳蓝字"CSDN云计算"关注我们哦! 作者 | Hardy晗狄 转自 | CSDN博客 责编 | 阿秃 服务器是网络数据的节点和枢纽,是一种高性能计算机,存储.处理网络上80%的数 ...
- circlegan_CycleGAN原理以及代码全解析
许多名画造假者费尽毕生的心血,试图模仿出艺术名家的风格.如今,CycleGAN就可以初步实现这个神奇的功能.这个功能就是风格迁移,比如下图,照片可以被赋予莫奈,梵高等人的绘画风格 这属于是无配对数据( ...
- tensorflow代码全解析 -3- seq2seq 自动生成文本
模型概述 序列建模seq2seq,给定一个序列A,模型生产另一个序列B,然后模型再由序列B生成C,以此一直持续下去. 基本工作流程如下: 序列A中的每一个单词通过word_embedding操作以后, ...
- R语言与临床模型预测——LASSO回归，单因素多因素cox，差异表达分析，Venn图，森林图，列线图，矫正曲线，ROC全套代码及解析——第十三部分 校准曲线 本专栏可免费答疑
1.下载数据 2. 匹配基因 3. 基因去重复 4.匹配临床数据 5.批量cox回归分析 6.差异表达基因筛选 7.取交集,选出预后相关的差异表达基因 8.森林图绘制 9.lasso回归进一步排除具有 ...
最新文章
- php偶尔500,python – 偶尔500错误
- 不使用梯度裁剪和使用梯度裁剪的对比（tensorflow）
- 如何让AI机器人的对话更加自然？
- 关于页面加载的方法收集
- @resource 与 @autowired
- 成功解决cv2.error: OpenCV(4.1.2) C:\projects\opencv-python\opencv\modules\imgproc\src\color.cpp:182: err
- css 中图片旋转,倾斜,位移,平滑
- 阿里P8架构师谈：Docker简介、组成架构、使用步骤、以及生态产品
- linux python2.7 scipy_scipy.sparse.linalg.sp为Linux系统上的大型稀疏矩阵解决了令人惊讶的行为...
- java常见面试题——java常见笔试题
- docker 启动时指定需要绑定的网卡_Docker容器网络-基础篇
- oracle时间查询
- java 上界和下界,Java 泛型上下界（上下限）
- Codeforces Round #553 (Div. 2) 题解
- [ZJOI2007]捉迷藏 (线段树,括号序列)
- 泰牛PHP基础+高级+实战+全套课件(大牛班)
- 网络热门知识点，Linux内核——网络协议栈基本知识
- 一些Camera相关概念整理
- FPGA学习-Verilog例化说明
- 与或树的盲目搜索和启发式搜索