AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

android画图之贝塞尔曲线讲解

2014-04-30 1597
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <span style="white-space:pre"></span>首先对于《赛贝尔曲线》不是很了解的童鞋，请自觉白度百科、google等等... <p> </p> <p><span style="white-space:pre"></span>为了方便偷懒的童鞋，这里给个《贝赛尔曲线》百科地址，以及一段话简述《贝赛尔曲线》：</p> <p><span style="white
首先对于《赛贝尔曲线》不是很了解的童鞋，请自觉白度百科、google等等...

 

为了方便偷懒的童鞋，这里给个《贝赛尔曲线》百科地址，以及一段话简述《贝赛尔曲线》：

《贝赛尔曲线》白度百科快速地址：http://baike.baidu.com/view/4019466.htm

贝塞尔曲线又称贝兹曲线或贝济埃曲线，一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋；


上面这一段话其实就“线段像可伸缩的皮筋”这一句比较重要，也很容易理解；

 

        至于贝赛尔曲线的实现，在Android中极其的简单，因为它是Android封装的一个方法，这个能不简单么。。。。。。只不过它隐藏的比较深，它隐藏于Path类中，方法如下：

android.graphics.Path.quadTo(float x1, float y1, float x2, float y2)

Since: API Level 1

此方参数解释：

第一个参数：操作点的x坐标

第二个参数：操作点的y坐标

第三个参数：结束点的x坐标

第四个参数：结束点的y坐标

从API中看出，赛贝尔曲线从API－1就开始支持了；

 

熟悉方法后，下面就来实现：

SurfaceView框架不多讲，看过我博客的都应该知道的；

 

直接看MySurfaceView类，此类继承SurfaceView ，是游戏的主视图

 

这里为了更清晰的讲解：这里部分代码先不贴出来了，最后会整体贴出，当然源码也是免费在最后提供～

首先是定义相关的成员变量：

[java] view plain copy
  1. // 贝赛尔曲线成员变量(起始点，控制（操作点），终止点，3点坐标)  
  2. private int startX, startY, controlX, controlY, endX, endY;  
  3. // Path  
  4. private Path path;  
  5. // 为了不影响主画笔，这里绘制贝赛尔曲线单独用一个新画笔  
  6. private Paint paintQ;  
  7. // 随机库（让贝赛尔曲线更明显）  
  8. private Random random;  
 

本类构造函数：

[java] view plain copy
  1. /** 
  2.  * SurfaceView初始化函数 
  3.  */  
  4. public MySurfaceView(Context context) {  
  5.     super(context);  
  6.     ...  
  7.         //贝赛尔曲线相关初始化  
  8.         path = new Path();  
  9.         paintQ = new Paint();  
  10.         paintQ.setAntiAlias(true);  
  11.         paintQ.setStyle(Style.STROKE);  
  12.         paintQ.setStrokeWidth(5);  
  13.         paintQ.setColor(Color.WHITE);  
  14.         random = new Random();  
  15.     ...  
  16. }  
 

  接着我把绘制贝赛尔曲线封装一个方法了，函数如下：

[java] view plain copy
  1. /** 
  2.  * 绘制贝赛尔曲线 
  3.  *  
  4.  * @param canvas 主画布 
  5.  */  
  6. public void drawQpath(Canvas canvas) {  
  7.     path.reset();// 重置path  
  8.     // 贝赛尔曲线的起始点  
  9.     path.moveTo(startX, startY);  
  10.     // 设置贝赛尔曲线的操作点以及终止点  
  11.     path.quadTo(controlX, controlY, endX, endY);  
  12.     // 绘制贝赛尔曲线（Path）  
  13.     canvas.drawPath(path, paintQ);  
  14. }  
 

最后是用户触屏监听函数以及逻辑函数：

[c-sharp] view plain copy
  1. /** 
  2.  * 触屏事件监听 
  3.  */  
  4. @Override  
  5. public boolean onTouchEvent(MotionEvent event) {  
  6.     endX = (int) event.getX();  
  7.     endY = (int) event.getY();  
  8.     return true;  
  9. }  
  10. /** 
  11.  * 游戏逻辑 
  12.  */  
  13. private void logic() {  
  14.     if (endX != 0 && endY != 0) {  
  15.         // 设置操作点为线段x/y的一半  
  16.         controlX = random.nextInt((endX - startX) / 2);  
  17.         controlY = random.nextInt((endY - startY) / 2);  
  18.     }  
  19. }  
 

 

 

整个代码很easy～主要是贝赛尔函数的参数，尤其是操作点，操作点的各种不同可以实现不同的效果，这里我简单的统一的讲操作点设置成用户触屏点的x,y的一半，呵呵偷懒了～嘻嘻～

我把贝赛尔的操作点写在了逻辑logic（）函数中，不断的执行，并且每次利用nextInt函数得到随机的操作点，主要为了让其曲线不断的变化从而形成一个震动的曲线运动轨迹；

 

ok，效果接图如下：

 

 

 

 

     这里可能由于图片是静止的效果看起来不是很明显，大家可以运行源码来观察 ，好了～本节就这样吧；下面贴出整个MySurfaceView的源码：（最后有本项目的源码下载地址）

[java] view plain copy
  1. package com.qpath;  
  2. import java.util.Random;  
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Color;  
  6. import android.graphics.Paint;  
  7. import android.graphics.Paint.Style;  
  8. import android.graphics.Path;  
  9. import android.view.KeyEvent;  
  10. import android.view.MotionEvent;  
  11. import android.view.SurfaceHolder;  
  12. import android.view.SurfaceHolder.Callback;  
  13. import android.view.SurfaceView;  
  14. /** 
  15.  * 赛贝尔曲线 
  16.  * @author Himi 
  17.  *  
  18.  */  
  19. public class MySurfaceView extends SurfaceView implements Callback, Runnable {  
  20.     private SurfaceHolder sfh;  
  21.     private Paint paint;  
  22.     private Thread th;  
  23.     private boolean flag;  
  24.     private Canvas canvas;  
  25.     public static int screenW, screenH;  
  26.     // -----------以上是SurfaceView游戏框架  
  27.     // 贝赛尔曲线成员变量(起始点，控制（操作点），终止点，3点坐标)  
  28.     private int startX, startY, controlX, controlY, endX, endY;  
  29.     // Path  
  30.     private Path path;  
  31.     // 为了不影响主画笔，这里绘制贝赛尔曲线单独用一个新画笔  
  32.     private Paint paintQ;  
  33.     // 随机库（让贝赛尔曲线更明显）  
  34.     private Random random;  
  35.     /** 
  36.      * SurfaceView初始化函数 
  37.      */  
  38.     public MySurfaceView(Context context) {  
  39.         super(context);  
  40.         sfh = this.getHolder();  
  41.         sfh.addCallback(this);  
  42.         paint = new Paint();  
  43.         paint.setColor(Color.WHITE);  
  44.         paint.setAntiAlias(true);  
  45.         setFocusable(true);  
  46.         // -----------以上是SurfaceView游戏框架  
  47.         //贝赛尔曲线相关初始化  
  48.         path = new Path();  
  49.         paintQ = new Paint();  
  50.         paintQ.setAntiAlias(true);  
  51.         paintQ.setStyle(Style.STROKE);  
  52.         paintQ.setStrokeWidth(5);  
  53.         paintQ.setColor(Color.WHITE);  
  54.         random = new Random();  
  55.     }  
  56.     /** 
  57.      * SurfaceView视图创建，响应此函数 
  58.      */  
  59.     public void surfaceCreated(SurfaceHolder holder) {  
  60.         screenW = this.getWidth();  
  61.         screenH = this.getHeight();  
  62.         flag = true;  
  63.         // 实例线程  
  64.         th = new Thread(this);  
  65.         // 启动线程  
  66.         th.start();  
  67.         // -----------以上是SurfaceView游戏框架  
  68.     }  
  69.     /** 
  70.      * 游戏绘图 
  71.      */  
  72.     public void myDraw() {  
  73.         try {  
  74.             canvas = sfh.lockCanvas();  
  75.             if (canvas != null) {  
  76.                 canvas.drawColor(Color.BLACK);  
  77.                 // -----------以上是SurfaceView游戏框架  
  78.                 drawQpath(canvas);  
  79.             }  
  80.         } catch (Exception e) {  
  81.             // TODO: handle exception  
  82.         } finally {  
  83.             if (canvas != null)  
  84.                 sfh.unlockCanvasAndPost(canvas);  
  85.         }  
  86.     }  
  87.     /** 
  88.      * 绘制贝赛尔曲线 
  89.      *  
  90.      * @param canvas 主画布 
  91.      */  
  92.     public void drawQpath(Canvas canvas) {  
  93.         path.reset();// 重置path  
  94.         // 贝赛尔曲线的起始点  
  95.         path.moveTo(startX, startY);  
  96.         // 设置贝赛尔曲线的操作点以及终止点  
  97.         path.quadTo(controlX, controlY, endX, endY);  
  98.         // 绘制贝赛尔曲线（Path）  
  99.         canvas.drawPath(path, paintQ);  
  100.     }  
  101.     /** 
  102.      * 触屏事件监听 
  103.      */  
  104.     @Override  
  105.     public boolean onTouchEvent(MotionEvent event) {  
  106.         endX = (int) event.getX();  
  107.         endY = (int) event.getY();  
  108.         return true;  
  109.     }  
  110.     /** 
  111.      * 游戏逻辑 
  112.      */  
  113.     private void logic() {  
  114.         if (endX != 0 && endY != 0) {  
  115.             // 设置操作点为线段x/y的一半  
  116.             controlX = random.nextInt((endX - startX) / 2);  
  117.             controlY = random.nextInt((endY - startY) / 2);  
  118.         }  
  119.     }  
  120.     /** 
  121.      * 按键事件监听 
  122.      */  
  123.     @Override  
  124.     public boolean onKeyDown(int keyCode, KeyEvent event) {  
  125.         return super.onKeyDown(keyCode, event);  
  126.     }  
  127.     public void run() {  
  128.         while (flag) {  
  129.             long start = System.currentTimeMillis();  
  130.             myDraw();  
  131.             logic();  
  132.             long end = System.currentTimeMillis();  
  133.             try {  
  134.                 if (end - start < 50) {  
  135.                     Thread.sleep(50 - (end - start));  
  136.                 }  
  137.             } catch (InterruptedException e) {  
  138.                 e.printStackTrace();  
  139.             }  
  140.         }  
  141.     }  
  142.     /** 
  143.      * SurfaceView视图状态发生改变，响应此函数 
  144.      */  
  145.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
  146.             int height) {  
  147.     }  
  148.     /** 
  149.      * SurfaceView视图消亡时，响应此函数 
  150.      */  
  151.     public void surfaceDestroyed(SurfaceHolder holder) {  
  152.         flag = false;  
  153.     }  
  154. } 
文章标签：
前端开发
Android开发
Java
关键词：
Android画图
ctrip_xzh
目录
相关文章
科技小先锋
|
Android开发
Android中利用画图类和线程画出闪烁的心形，送给亲爱的他（她）
科技小先锋
1416 0
code_xzh
|
前端开发 Java Android开发
android画图之贝塞尔曲线讲解
首先对于《赛贝尔曲线》不是很了解的童鞋，请自觉白度百科、google等等...   为了方便偷懒的童鞋，这里给个《贝赛尔曲线》百科地址，以及一段话简述《贝赛尔曲线》： 《贝赛尔曲线》白度百科快速地址：http://baike.baidu.com/view/4019466.htm 贝塞尔曲线又称贝兹曲线或贝济埃曲线，一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节
code_xzh
1404 0
code_xzh
|
前端开发 Java Android开发
android之surfaceview画图
在前文中，我们分析了应用程序窗口连接到WindowManagerService服务的过程。在这个过程中，WindowManagerService服务会为应用程序窗口创建过一个到SurfaceFlinger服务的连接。有了这个连接之后，WindowManagerService服务就可以为应用程序窗口创建绘图表面了，以便可以用来渲染窗口的UI。在本文中，我们就详细分析应用程序窗口的绘图表面的创
code_xzh
1152 0
雪梦科技
|
前端开发 Android开发 数据建模
Android 保存画图
雪梦科技
1186 0
请看我回答~
|
10天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上，安卓和iOS两大阵营各据一方。随着技术的演进，跨平台开发框架成为开发者的新宠，旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战，并分享实用的开发技巧，帮助开发者在安卓和iOS的世界中游刃有余。
请看我回答~
26 1
游客qf4jmczx4xu2y
|
15天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
37 4
请看我回答~
|
17天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上，安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异，从编程语言到用户界面设计，再到市场分布的不同影响，旨在为开发者提供一个全面的视角，帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
请看我回答~
35 4
肥猪肥猪-17824
|
19天前
|
XML 存储 Java
探索安卓开发之旅：从新手到专家
【10月更文挑战第35天】在数字化时代，安卓应用的开发成为了一个热门话题。本文旨在通过浅显易懂的语言，带领初学者了解安卓开发的基础知识，同时为有一定经验的开发者提供进阶技巧。我们将一起探讨如何从零开始构建第一个安卓应用，并逐步深入到性能优化和高级功能的实现。无论你是编程新手还是希望提升技能的开发者，这篇文章都将为你提供有价值的指导和灵感。
肥猪肥猪-17824
29 4
肥猪肥猪-17824
|
17天前
|
存储 API 开发工具
探索安卓开发：从基础到进阶
【10月更文挑战第37天】在这篇文章中，我们将一起探索安卓开发的奥秘。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的信息和建议。我们将从安卓开发的基础开始，逐步深入到更复杂的主题，如自定义组件、性能优化等。最后，我们将通过一个代码示例来展示如何实现一个简单的安卓应用。让我们一起开始吧！
肥猪肥猪-17824
32 1
shuj
|
18天前
|
存储 XML JSON
探索安卓开发：从新手到专家的旅程
【10月更文挑战第36天】在这篇文章中，我们将一起踏上一段激动人心的旅程，从零基础开始，逐步深入安卓开发的奥秘。无论你是编程新手，还是希望扩展技能的老手，这里都有适合你的知识宝藏等待发掘。通过实际的代码示例和深入浅出的解释，我们将解锁安卓开发的关键技能，让你能够构建自己的应用程序，甚至贡献于开源社区。准备好了吗？让我们开始吧！
shuj
26 2