Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效

特效预览图

什么是贝塞尔曲线？

百度百科：

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

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。注意，贝塞尔曲线上的所有控制点、节点均可编辑。这种“智能化”的矢量线条为艺术家提供了一种理想的图形编辑与创造的工具。本文即用贝塞尔曲线实现鼠标拖尾特效。

理解贝塞尔曲线

贝塞尔曲线数学理解、推导方法：怎么理解贝塞尔曲线？ - 知乎

本文bezier求点公式参考论文：Finding a Point on a Bézier Curve: De Casteljau’s Algorithm

引用贝塞尔曲线简单介绍_xiaozhangcsdn的博客-CSDN博客_bezier曲线对贝塞尔曲线理解关键点进行简要介绍：

对于贝塞尔曲线，最重要的点是数据点和控制点。
数据点：指一条路径的起始点和终止点。
控制点：控制点决定了一条路径的弯曲轨迹
根据控制点的个数，贝塞尔曲线被分为一阶贝塞尔曲线（0个控制点）、二阶贝塞尔曲线（1个控制点）、三阶贝塞尔曲线（2个控制点）等等。

特点一：曲线通过始点和终点，并与特征多边形首末两边相切于始点和终点，中间点将曲线拉向自己。
特点二：平面离散点控制曲线的形状，改变一个离散点的坐标，曲线的形状将随之改变（点对曲线具有整体控制性）。
特点三：曲线落在特征多边形的凸包之内，它比特征多边形更趋于光滑。

贝塞尔曲线图示

引用自贝塞尔曲线的数学原理_程序人生-CSDN博客_贝塞尔曲线原理

一阶贝塞尔曲线(线段)：

意义：由 P0 至 P1 的连续点，描述的一条线段

二阶贝塞尔曲线(抛物线)：

原理：由 P0 至 P1 的连续点 Q0，描述一条线段。
由 P1 至 P2 的连续点 Q1，描述一条线段。
由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。

经验：P1-P0为曲线在P0处的切线。

三阶贝塞尔曲线：

通用公式：

高阶贝塞尔曲线：

4阶曲线：

5阶曲线：

好了，了解完以上贝塞尔曲线的知识，我们该如何用贝塞尔曲线在Android Studio上做特效呢？以本文所提鼠标拖尾特效为例：

第一步

创建新工程

直接创建空白 activity 即可

package com.example.drawimagery;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}
}

第二步

因为 java 好像并未提供n阶贝塞尔函数的 api，所以我们就自己写一个

创建 Bezier 文件

Bezier 文件作为主函数体文件，保存了 beizer（计算n阶贝塞尔曲线上点的位置）、factorial（阶乘）、rainBow（彩虹色）三个函数。其中贝塞尔曲线公式是运用下图公式计算得出

公式引用自贝塞尔曲线 WPF MVVM N阶实现公式详解+源代码下载 - ARM830 - 博客园

n=有效坐标点数量
i=坐标点的下标
P=坐标
t=时间百分比，在0~1之间，覆盖了整条曲线

因为

可得

硬转换成 java 后其代码如下：

（因为本文项目使用 Queue 进行数据存储所以使用 LinkedList 结构）

package com.example.drawimagery;import java.util.LinkedList;public class Bezier {public static float[] bezier(LinkedList<Float> theArrayX, LinkedList<Float> theArrayY, float t){ //贝塞尔公式调用float x = 0;float y = 0;//控制点数组int n = theArrayX.size() - 1;int size = theArrayX.size();for (int index = 0; index < size; index ++) {float itemX = theArrayX.get(index);float itemY = theArrayY.get(index);if(index == 0){x += itemX * Math.pow(( 1 - t ), n - index) * Math.pow(t, index);y += itemY * Math.pow(( 1 - t ), n - index) * Math.pow(t, index);}else{//factorial为阶乘函数x += factorial(n) / factorial(index) / factorial(n - index) * itemX * Math.pow((1 - t), n - index) * Math.pow(t, index);y += factorial(n) / factorial(index) / factorial(n - index) * itemY * Math.pow((1 - t), n - index) * Math.pow(t, index);}}return new float[] {x, y};}public static long factorial(int num) {if (num < 0) {return -1;} else if (num == 0 || num == 1) {return 1;} else {return (num * factorial(num - 1));}}public static int[] rainBow(float t) {int red, green, blue;if (t < 0.334) {red = (int)(255 - t * 3 * 255);green = (int)(t * 3 * 255);blue = 0;} else if (t < 0.667) {red = 0;green = (int)(255 - (t - 0.334) * 3 * 255);blue = (int)((t - 0.334) * 3 * 255);} else {red = (int)((t - 0.667) * 3 * 255);green = 0;blue = (int)(255 - (t - 0.667) * 3 * 255);}return new int[] {red, green, blue};}}

Bezier 代码解析

public static float[] bezier(LinkedList<Float> theArrayX, LinkedList<Float> theArrayY, float t)：输入鼠标X轨迹、鼠标Y轨迹、所求点在曲线上的位置（百分比表示），返回所求点x，y坐标

public static long factorial(int num)：求num的阶乘

public static int[] rainBow(float t)：输入彩虹色谱百分比（0~1），返回彩虹色rgb（数组表示）

第三步

创建 MainCanvas 文件

Main Canvas 文件继承自 View ,作为本项目的主画布 view

其代码如下：

package com.example.drawimagery;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;import java.util.Calendar;
import java.util.LinkedList;
import java.util.Queue;public class MainCanvas extends View {private Paint mPaintMouse;//鼠标拖尾画笔private boolean mouse_begin = false;//鼠标是否按下private float mouseCurrentX = 0;//当前鼠标位置Xprivate float mouseCurrentY = 0;//当前鼠标位置YQueue<Float> mouseX = new LinkedList<Float>();//保存鼠标轨迹XQueue<Float> mouseY = new LinkedList<Float>();//保存鼠标轨迹Yprivate int time = 0;//累加时间Handler handler = new Handler();Runnable runnable = new Runnable() {@Overridepublic void run() {time++;invalidate();//告诉主线程重新绘制if (mouseX.peek() != null) {boolean is_add_mouse = Math.abs(mouseX.peek() - mouseCurrentX) < 0.01;//鼠标不动时不记录坐标if (!is_add_mouse) {mouseX.offer(mouseCurrentX);mouseY.offer(mouseCurrentY);}if (mouseX.size() > 20 || is_add_mouse) {mouseX.poll();mouseY.poll();}} else if (mouse_begin) {mouseX.offer(mouseCurrentX);mouseY.offer(mouseCurrentY);}handler.postDelayed(this, 20);//每20ms循环一次，50fps}};public MainCanvas(Context context) {super(context);}public MainCanvas(Context context, AttributeSet attrs) {super(context, attrs);handler.postDelayed(runnable, 20);mPaintMouse = new Paint();//对画笔初始化mPaintMouse.setColor(Color.RED);//设置画笔颜色mPaintMouse.setStrokeWidth(10);//设置画笔宽度mPaintMouse.setAntiAlias(true);//设置抗锯齿}@Overridepublic boolean onTouchEvent(MotionEvent event) {//设置触摸事件，手指按下进行记录，手指抬起停止记录mouseCurrentX = event.getX();mouseCurrentY = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mouse_begin = true;break;case MotionEvent.ACTION_UP:mouse_begin = false;break;}return true;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//        int[] color = Bezier.rainBow((float)time % 300 / 300); //画笔同一颜色随时间渐变int size = mouseX.size();float x1 = 0,x2 = 0,y1 = 0,y2 = 0;for (int i = 0; i < size; i++) {float percent = (float)i / size;float res[] = Bezier.bezier((LinkedList)mouseX, (LinkedList)mouseY, percent);x1 = res[0];y1 = res[1];if(i == 0){x2 = x1;y2 = y1;continue;}int[] color = Bezier.rainBow((time + percent * 300) % 300 / 300); //画笔不同颜色随时间渐变mPaintMouse.setColor(Color.argb(255, color[0], color[1], color[2]));mPaintMouse.setStrokeWidth((int)(percent * 20));canvas.drawLine(x1, y1, x2, y2, mPaintMouse);x2 = x1;y2 = y1;if (i == size - 1) canvas.drawLine(x1, y1, mouseCurrentX, mouseCurrentY, mPaintMouse);//连接最后一段与鼠标}canvas.drawCircle(mouseCurrentX, mouseCurrentY, 10, mPaintMouse);//绘制鼠标中心}
}

Main Canvas 代码解析&思路分析

首先创建所需变量（可将x，y转成一个对象方便操作，这里分开表述比较清晰）

然后设置画布触摸事件，每次按下屏幕、滑动屏幕时记录当前鼠标位置，并且设置鼠标按下与抬起事件的标记，方便记录鼠标轨迹。

接着通过 Handler 与 Runnable 的组合实现简单计时器，设定其每20ms循环一次，等同于每秒50帧（这种计时存在较大误差，在这里只是简单实现计时功能，若想精确计时请参考handler实现精确计时的两种方式_王温暖的博客-CSDN博客_android handler计时）

然后设置每帧在鼠标移动时对鼠标当前位置进行记录，用鼠标的延迟位置制作鼠标拖尾。数据用 Queue 进行保存，其先进先出的特性十分契合本项目需求。

设置当鼠标拖尾长度 mouseX.size() 大于20后每帧将队列尾部抛出，只保留最多20帧的鼠标拖尾。同时如果鼠标在原地不动时也将队列尾部抛出，这样下次触屏将生成新的贝塞尔曲线。

！！！注意在java中，mouseX.size() 的值不能设置太大。这与我们使用的贝塞尔算法和java的计算机制相关。因为我们是使用阶乘来进行坐标计算，在java中，虽然该阶乘结果数据是作为计算中间值参与运算，但当阶乘的参数n（也就是size）太大时数据仍会溢出（n！>long的范围），造成毁灭性的后果。作者在Lua、JS中的相同算法均未遇到此溢出，猜想是与java的计算方式有关。

我们定义的阶乘是返回值为long类型

在运算时这些阶乘的值会溢出，变成0或是其它数据

然后在画布构建时启动计时器，并且对画笔进行初始化

设置 onDraw 事件进行绘制。简单说就是将之前记录的每帧鼠标轨迹用不同色彩、不同粗细的线段进行连接。这里对几个要点进行说明。

贝塞尔曲线函数接收的参数为鼠标X轨迹、鼠标Y轨迹和所求点在整段曲线的位置（用百分比表示)，并以数组形式返回所求点坐标
这段不写鼠标中心与轨迹之间会存在一段空隙
此代码样式演示
此代码样式演示

第四步

修改 activity_main.xml 文件

将我们上文所构建的 View 置入

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><com.example.drawimagery.MainCanvasandroid:layout_width="match_parent"android:layout_height="match_parent"></com.example.drawimagery.MainCanvas></androidx.constraintlayout.widget.ConstraintLayout>

OK，运行模拟器，按下鼠标，美丽的贝塞尔曲线-鼠标轨迹就生成啦:)

作者：刘睿

原文链接：https://blog.csdn.net/qq_40517035/article/details/121887568