动脑学院android 高级ui,动脑学院高级ui课程9.1：贝塞尔曲线简单介绍

刺骨的言语ヽ痛彻心扉 2022-10-18 11:19 98阅读 0赞

相信很多人都听说过贝塞尔曲线，但是作为Android程序员的我们可能也没有具体的使用过贝塞尔曲线！好吧！是我之前没用过.......

关于贝塞尔曲线的介绍我就不多罗嗦了晚上有很多的文章，这里我给出一篇供大家参考：

http://blog.csdn.net/cdnight/article/details/48468653

这里给出一个github的开源库，大家可以看看贝塞尔曲线的效果：

https://github.com/venshine/BezierMaker

挺好玩的，总的来说贝塞尔曲线最低为2阶且理论上无上限。

本篇文章通过一个简单的例子，来初步探索一下贝塞尔曲线，废话不多说我们开始。

献上效果图：

![8ed3ae82bfb6b90575353e60328f1912.png][]

1.gif

是不是挺有意思的呢？

实现思路：

1、画一条路径

通过Path工具类

2、获取手指移动的点的坐标，并将该点作为贝塞尔曲线的控制点

重写onTouchEvent()方法

3、实现回弹动画

自定义一个Animtion，当然也可以不自定义

具体代码实现

设置画笔：

private void init() \{

pointA = new Point(100, 300);

pointB = new Point(500, 300);

pointCenter = new Point(200, 300);

mPaint = new Paint();

mPaint.setColor(Color.BLACK);

mPaint.setStrokeWidth(10);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setAntiAlias(true);

画路径：

@Override

protected void onDraw(Canvas canvas) \{

super.onDraw(canvas);

bezierPath.reset();

bezierPath.moveTo(pointA.x, pointA.y);

//quadTo方法用于画贝塞尔曲线

bezierPath.quadTo(pointCenter.x, pointCenter.y, pointB.x, pointB.y);

//闭合path

// bezierPath.close();

canvas.drawPath(bezierPath, mPaint);

这里要注意的是path的quadTo(int cx，int cy，int px，int py)方法，这个方法就是用于画贝塞尔曲线的。参数cx、cy分别表示控制点的x、y坐标，px、py分别表示结束点的x、y坐标。要注意rQuadTo()方法的区别

重写onTouchEvent方法：

@Override

public boolean onTouchEvent(MotionEvent event) \{

int action = event.getAction();

int x = 0;

int y = 0;

switch (action) \{

case MotionEvent.ACTION\_DOWN: \{

case MotionEvent.ACTION\_MOVE: \{

x = (int) event.getX();

y = (int) event.getY();

pointCenter.set(x, y);

break;

case MotionEvent.ACTION\_UP: \{

x = (int) event.getX();

y = (int) event.getY();

startCallbackAnim(x, y);

break;

invalidate();

return true;

最后写一个动画：

private void startCallbackAnim(int x, int y) \{

ResetAnimation animation = new ResetAnimation(x, y);

animation.setDuration(300);

this.startAnimation(animation);

/\*\*

\* 自定义一个会弹动画

\*/

class ResetAnimation extends Animation \{

int orginX;

int orginY;

public ResetAnimation(int x, int y) \{

orginX = x;

orginY = y;

/\*\*

\* 这个方法是为一个自定义动画需要重写的方法

\* @param interpolatedTime 动画时间0~1.0

\* @param t

\*/

@Override

protected void applyTransformation(float interpolatedTime, Transformation t) \{

int newX = (int) ((orginX - 200) \* (1 - interpolatedTime) + 200);

int newY = (int) ((orginY - 300) \* (1 - interpolatedTime) + 300);

pointCenter.set(newX, newY);

invalidate();

super.applyTransformation(interpolatedTime, t);

代码很简单大家可以自己去实现以下！

[8ed3ae82bfb6b90575353e60328f1912.png]: /images/20221014/57f1af48faa7410ab30b8dba67ea13ee.png

动脑学院android 高级ui,动脑学院高级ui课程9.1：贝塞尔曲线简单介绍

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 9.24动手动脑

相关 9.16动手又动脑

相关动手动脑问题1

相关贝塞尔曲线生成工具_Proe/Creo贝塞尔曲线的分级

相关动脑学院android 高级ui,动脑学院高级ui课程9.1：贝塞尔曲线简单介绍

相关动脑学院 - Java 和 JNI方式处理图片比较

相关 Android-贝塞尔曲线

相关 canvas——贝塞尔曲线

相关贝塞尔曲线，以及用鼠标和贝塞尔曲线交互

相关自带美感的贝塞尔曲线原理与实战——Android高级UI