Android应用开发之Android开发中关于贝塞尔曲线的应用讲解
白羽 2018-09-14 来源 :网络 阅读 777 评论 0

摘要:本文将带你了解Android应用开发之Android开发中关于贝塞尔曲线的应用讲解,希望本文对大家学Android有所帮助

        本文将带你了解Android应用开发之Android开发中关于贝塞尔曲线的应用讲解,希望本文对大家学Android有所帮助


什么是贝塞尔曲线
贝塞尔曲线(Béziercurve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。主要结构:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。
展示:一阶贝塞尔曲线(线段)

展示:二阶贝塞尔曲线(抛物线)

展示:三阶贝塞尔曲线

Android提供的贝塞尔曲线代码实现:
/** * Add a quadratic bezier from the last point, approaching control point * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for * this contour, the first point is automatically set to (0,0). * * @param x1 The x-coordinate of the control point on a quadratic curve * @param y1 The y-coordinate of the control point on a quadratic curve * @param x2 The x-coordinate of the end point on a quadratic curve * @param y2 The y-coordinate of the end point on a quadratic curve */public void quadTo(float x1, float y1, float x2, float y2) { isSimplePath = false; native_quadTo(mNativePath, x1, y1, x2, y2);}
/** * Add a cubic bezier from the last point, approaching control points * (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been * made for this contour, the first point is automatically set to (0,0). * * @param x1 The x-coordinate of the 1st control point on a cubic curve * @param y1 The y-coordinate of the 1st control point on a cubic curve * @param x2 The x-coordinate of the 2nd control point on a cubic curve * @param y2 The y-coordinate of the 2nd control point on a cubic curve * @param x3 The x-coordinate of the end point on a cubic curve * @param y3 The y-coordinate of the end point on a cubic curve */public void cubicTo(float x1, float y1, float x2, float y2,  float x3, float y3) { isSimplePath = false; native_cubicTo(mNativePath, x1, y1, x2, y2, x3, y3);}

 quadTo()方法从上一个点为起点开始绘制贝塞尔曲线,其中(x1,y1)为辅助控制点,(x2,y2)为终点。
 cubicTo()方法从上一个点为起点开始绘制三阶贝塞尔曲线,其中(x1,y1),( x2, y2 )为辅助控制点,(x3,y3)为终点。

举个例子:
Path mPath = new Path();mPath.moveTo(x0,y0);mPath.quadTo(x1,y1,x2,y2);
如调用以上代码,即绘制起点(x0,y0),终点(x2,y2),辅助控制点(x1,y1)的贝塞尔曲线。因此,通过不断改变这三个点的位置,我们可以绘制出各种各样的曲线。
贴一份二阶贝塞尔曲线的测试代码,帮助理解(将以下自定义View在布局中引用即可看到效果):
基本思路:
1.先准备一支画笔。 2.分别指定起点、终点、以及控制点的值。 3.为了帮助理解,绘制上面3个点以及辅助线的位置。 4.绘制贝塞尔曲线。 5.简单重写滑动事件,让手指可以改变控制点的位置,使贝塞尔曲线进行重绘,让我们可以看到改变后的贝塞尔曲线。
package chao.base.view.view; import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View; /** * 二阶曲线 */public class Bezier extends View {  private Paint mPaint; private int centerX, centerY;  private PointF start, end, control;  public Bezier(Context context, AttributeSet attrs) {  super(context, attrs);  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);   }  public Bezier(Context context) {  this(context, null); }  @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);  mPaint.setColor(Color.BLUE);  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); }}    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之Android频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程