百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

安卓自定义 View 进阶:贝塞尔曲线(上)

itomcoil 2025-07-03 15:53 5 浏览

在上一篇文章 Path之基本图形 中我们了解了Path的基本使用方法,本次了解Path中非常非常非常重要的内容-贝塞尔曲线。

一.Path常用方法表

为了兼容性(偷懒) 本表格中去除了在API21(即安卓版本5.0)以上才添加的方法。忍不住吐槽一下,为啥看起来有些顺手就能写的重载方法要等到API21才添加上啊。宝宝此刻内心也是崩溃的。

作用相关方法备注
移动起点moveTo移动下一次操作的起点位置
设置终点setLastPoint重置当前path中最后一个点位置,如果在绘制之前调用,效果和moveTo相同
连接直线lineTo添加上一个点到当前点之间的直线到Path
闭合路径close连接第一个点连接到最后一个点,形成一个闭合区域
添加内容addRect, addRoundRect, addOval, addCircle, addPath, addArc, arcTo添加(矩形, 圆角矩形, 椭圆, 圆, 路径, 圆弧) 到当前Path (注意addArc和arcTo的区别)
是否为空isEmpty判断Path是否为空
是否为矩形isRect判断path是否是一个矩形
替换路径set用新的路径替换到当前路径所有内容
偏移路径offset对当前路径之前的操作进行偏移(不会影响之后的操作)
贝塞尔曲线quadTo, cubicTo分别为二次和三次贝塞尔曲线的方法
rXxx方法rMoveTo, rLineTo, rQuadTo, rCubicTo不带r的方法是基于原点的坐标系(偏移量), rXxx方法是基于当前点坐标系(偏移量)
填充模式setFillType, getFillType, isInverseFillType, toggleInverseFillType设置,获取,判断和切换填充模式
提示方法incReserve提示Path还有多少个点等待加入(这个方法貌似会让Path优化存储结构)
布尔操作(API19)op对两个Path进行布尔运算(即取交集、并集等操作)
计算边界computeBounds计算Path的边界
重置路径reset, rewind清除Path中的内容
reset不保留内部数据结构,但会保留FillType.
rewind会保留内部的数据结构,但不保留FillType
矩阵操作transform矩阵变换

二.Path详解

上一次除了一些常用函数之外,讲解的基本上都是直线,本次需要了解其中的曲线部分,说到曲线,就不得不提大名鼎鼎的贝塞尔曲线。它的发明者是下面这个人(法国数学家PierreBézier)。

贝塞尔曲线能干什么?

贝塞尔曲线的运用是十分广泛的,可以说贝塞尔曲线奠定了计算机绘图的基础(因为它可以将任何复杂的图形用精确的数学语言进行描述),在你不经意间就已经使用过它了。

你会使用Photoshop的话,你可能会注意到里面有一个钢笔工具,这个钢笔工具核心就是贝塞尔曲线。

你说你不会PS? 没关系,你如果看过前面的文章或者用过2D绘图,肯定绘制过圆,圆弧,圆角矩形等这些东西。这里面的圆弧部分全部都是贝塞尔曲线的运用。

贝塞尔曲线作用十分广泛,简单举几个的栗子:

  • QQ小红点拖拽效果

  • 一些炫酷的下拉刷新控件

  • 阅读软件的翻书效果

  • 一些平滑的折线图的制作

  • 很多炫酷的动画效果

  • 如何轻松入门贝塞尔曲线?

虽然贝塞尔曲线用途非常广泛,然而目前貌似并没有适合的中文教程,能够搜索出来Android关于贝塞尔曲线的中文文章基本可以分为以下几种:

  • 科普型(只是让人了解贝塞尔,并没有实质性的内容)

  • 装逼型(摆出来一大堆公式,引用一堆英文原文)

  • 基础型(仅仅是讲解贝塞尔曲线的两个函数用法)

  • 实战型(根据实例讲解其中贝塞尔曲线的运用)

以上几种类型中比较有用的就是基础型和实战型,但两者各有不足,本文会综合两者内容,从零开始学习贝塞尔曲线。

第一步.理解贝塞尔曲线的原理

此处理解贝塞尔曲线并非是学会公式的推导过程(不是推倒(ノ*ω)ノ),而是要了解贝塞尔曲线是如何生成的。 贝塞尔曲线是用一系列点来控制曲线状态的,我将这些点简单分为两类:

类型作用
数据点确定曲线的起始和结束位置
控制点确定曲线的弯曲程度

此处暂时仅作了解概念,接下来就会讲解其中详细的含义。

一阶曲线原理:

一阶曲线是没有控制点的,仅有两个数据点(A 和 B),最终效果一个线段。

上图表示的是一阶曲线生成过程中的某一个阶段,动态过程可以参照下图(本文中贝塞尔曲线相关的动态演示图片来自维基百科)。

PS:一阶曲线其实就是前面讲解过的lineTo。

二阶曲线原理:

二阶曲线由两个数据点(A 和 C),一个控制点(B)来描述曲线状态,大致如下:

上图中红色曲线部分就是传说中的二阶贝塞尔曲线,那么这条红色曲线是如何生成的呢?接下来我们就以其中的一个状态分析一下:

连接AB BC,并在AB上取点D,BC上取点E,使其满足条件:

连接DE,取点F,使得:

这样获取到的点F就是贝塞尔曲线上的一个点,动态过程如下:

PS: 二阶曲线对应的方法是quadTo

三阶曲线原理:

三阶曲线由两个数据点(A 和 D),两个控制点(B 和 C)来描述曲线状态,如下:

三阶曲线计算过程与二阶类似,具体可以见下图动态效果:

PS: 三阶曲线对应的方法是cubicTo

贝塞尔曲线速查表

强烈推荐点击这里练习贝塞尔曲线,可以加深对贝塞尔曲线的理解程度。

第二步.了解贝塞尔曲线相关函数使用方法

一阶曲线:

一阶曲线是一条线段,非常简单,可以参见上一篇文章Path之基本操作,此处就不详细讲解了。

二阶曲线:

通过上面对二阶曲线的简单了解,我们知道二阶曲线是由两个数据点,一个控制点构成,接下来我们就用一个实例来演示二阶曲线是如何运用的。

首先,两个数据点是控制贝塞尔曲线开始和结束的位置,比较容易理解,而控制点则是控制贝塞尔的弯曲状态,相对来说比较难以理解,所以本示例重点在于理解贝塞尔曲线弯曲状态与控制点的关系,废话不多说,先上效果图:

为了更加容易看出控制点与曲线弯曲程度的关系,上图中绘制出了辅助点和辅助线,从上面的动态图可以看出,贝塞尔曲线在动态变化过程中有类似于橡皮筋一样的弹性效果,因此在制作一些弹性效果的时候很常用。

主要代码如下:

public class Bezier extends View {

private Paint mPaint;

private int centerX, centerY;

private PointF start, end, control;

public Bessel1(Context context) {

super(context);

mPaint = new Paint;

mPaint.setColor(Color.BLACK);

mPaint.setStrokeWidth(8);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setTextSize(60);

start = new PointF(0,0);

end = new PointF(0,0);

control = new PointF(0,0);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

centerX = w/2;

centerY = h/2;

// 初始化数据点和控制点的位置

start.x = centerX-200;

start.y = centerY;

end.x = centerX+200;

end.y = centerY;

control.x = centerX;

control.y = centerY-100;

}

@Override

public boolean onTouchEvent(MotionEvent event) {

// 根据触摸位置更新控制点,并提示重绘

control.x = event.getX;

control.y = event.getY;

invalidate;

return true;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 绘制数据点和控制点

mPaint.setColor(Color.GRAY);

mPaint.setStrokeWidth(20);

canvas.drawPoint(start.x,start.y,mPaint);

canvas.drawPoint(end.x,end.y,mPaint);

canvas.drawPoint(control.x,control.y,mPaint);

// 绘制辅助线

mPaint.setStrokeWidth(4);

canvas.drawLine(start.x,start.y,control.x,control.y,mPaint);

canvas.drawLine(end.x,end.y,control.x,control.y,mPaint);

// 绘制贝塞尔曲线

mPaint.setColor(Color.RED);

mPaint.setStrokeWidth(8);

Path path = new Path;

path.moveTo(start.x,start.y);

path.quadTo(control.x,control.y,end.x,end.y);

canvas.drawPath(path, mPaint);

}

}

接下文

专栏作者简介

GcsSloop:搜索GcsSloop,发现更多精彩。

打赏支持作者写出更多好文章,谢谢!

相关推荐

麦克斯韦方程高斯-博内-陈定理嘉当外微分斯托克斯方程之间的联系

一、麦克斯韦方程的外微分形式1.电磁场张量的几何表示在微分几何中,电磁场由2-形式F描述,称为电磁场强形式:其中E为电场,B为磁场,dt为时间坐标。2.麦克斯韦方程的微分形式第二式(无...

机器视觉(四):空域图像增强(常见的空域图像增强处理方法有哪些)

一、图像处理技术概述1.定义对原始获取图像进行一系列的运算处理,称为图像处理。图像处理是机器视觉技术的方法基础,包括图像增强、边缘提取、图像分割、形态学处理、图像投影、配准定位和图像特征提取等方法。2...

基于机器视觉的安全气囊检测系统研究

21世纪以来,汽车行业发展迅猛。安全气囊作为汽车的安全辅助工具,它的出现大大降低了死亡率,因而必须确保其尺寸精确,并能正常使用。对安全气囊传统的检测方法主要是借助千分表、轮廓仪等工具进行人工抽检[...

高斯泼溅综合指南(高斯pp)

高斯泼溅(GaussianSplatting)是一种表示3D场景和渲染新视图的方法,在“实时辐射场渲染的3D高斯泼溅”中引入。它可以被认为是NeRF类模型的替代品,就像当年的NeRF...

基于DSP和ARM的电气化铁路接触线覆冰监测系统设计

张学武(中铁第一勘察设计院集团有限公司,陕西西安710043)摘要:为预防接触线上的冰害事故以及为除冰融冰提供支持,设计了集成视频传输、覆冰厚度测量、导线温度测量、现场微气象采集的接触线覆冰监测系...

OpenCV 线性滤波(opencv 线性拟合)

OpenCV线性滤波线性滤波图像滤波与滤波器图像滤波,指的是在尽量保留图像特征的条件下对目标图像得噪声进行抑制,是图像处理当中不可缺少的部分。平滑录播室低频增强的空间域滤波技术,它的目的有两类:一类...

几种典型的图像去噪算法总结(图像去噪的定义)

(一)高斯低通滤波去噪高斯低通滤波器(GaussianLowPassFilter)是一类传递函数为高斯函数的线性平滑滤波器。又由于高斯函数是正态分布的密度函数。因此高斯低通滤波器对于去除服从正态...

深度解析卷积:从原理到应用(卷积到底是什么)

一、卷积的基本概念卷积是一种在数学领域尤其是分析数学中占据重要地位的运算方式。它通过两个函数和来生成第三个函数。设和是上的两个可积函数,卷积的积分表达式为:。在离散情况下,卷积定义为。从...

基于混合高斯模型的物体成分拟合方法

郎波,樊一娜,黄静,王鹏(北京师范大学珠海分校信息技术学院,广东珠海519087)为了寻求代价更小、效率更高、适应性更强的图像原型表征方法,借鉴成分识别理论的观点,设计出一种更符合人类认知原...

30天Python 入门到精通(python入门到精通书籍)

以下是一个为期30天的Python入门到精通学习课程,专为零基础新手设计。课程从基础语法开始,逐步深入到面向对象编程、数据处理,最后实现运行简单的大语言模型(如基于HuggingFace...

Python 最好用的 8 个 VS Code 扩展

1.PythonextensionforVisualStudioCode这个扩展是由微软官方提供的,支持但不仅限于以下功能:通过Pylint或Flake8支持代码检查在VSCo...

Textual:为 Python 增加漂亮的文本用户界面(TUI)

导读:如果你的代码是用Python编写的,你应该使用Textual来帮助你编写TUI(文本用户界面)。快速入门使用TextualPython在Linux上有像TkInterdocs...

pytest框架进阶自学系列 | 常用插件的使用

书籍来源:房荔枝梁丽丽《pytest框架与自动化测试应用》一边学习一边整理老师的课程内容及实验笔记,并与大家分享,侵权即删,谢谢支持!附上汇总贴:pytest框架进阶自学系列|汇总_热爱编程的通...

ShapeNet数据集及dataset代码分析

1.数据集简介ShpaeNet是点云中一个比较常见的数据集,它能够完成部件分割任务,即部件知道这个点云数据大的分割,还要将它的小部件进行分割。它总共包括十六个大的类别,每个大的类别有可以分成若干个小类...

「教程」5 分钟带你入门 kivy(怎么学kp)

原创:星安果AirPythonkivy语言通过编写界面UI,然后利用Python定义一些业务逻辑,可以移植很多功能模块到移动端直接执行。下面对kivy常见用法做一个汇总。1、什么是...