Android从零开搞系列:自定义View(12)贝塞尔曲线的应用
来源:互联网 发布:清除localstorage数据 编辑:程序博客网 时间:2024/06/07 00:50
转载请注意:http://blog.csdn.net/wjzj000/article/details/70504617
本菜开源的一个自己写的Demo,希望能给Androider们有所帮助,水平有限,见谅见谅…
https://github.com/zhiaixinyang/PersonalCollect (拆解GitHub上的优秀框架于一体,全部拆离不含任何额外的库导入)
https://github.com/zhiaixinyang/MyFirstApp(Retrofit+RxJava+MVP)
写在前面
今天纠结了好久,想不出来该记录些什么。明明什么都会,为什么我还要这么努力的写博客?这就是我和明明的差距。
因为不会的太多,导致自己越来越不知道该怎么坚持。但是路还是要一步一步的走,饭还是要一口一口的吃,毕竟蒸羊羔,蒸熊掌,蒸鹿尾儿,烧花鸭,烧雏鸡儿,烧子鹅,卤煮咸鸭,酱鸡,腊肉,松花,小肚儿….都没吃过?你以为我只会吃,我还会饿。
开始
今天记录一下贝尔赛曲线的用法。如果没猜错的话,能打开这篇博客的看官应该对贝尔赛多多少少有些了解。
网上各种各样的关于贝塞尔的动态图应该也都领略过,今天我主要是结合一个效果,梳理一下贝塞尔的用法。
先看效果
我们可以很明显的看出,用于弹射火箭的绳子的效果就是贝塞尔曲线的应用。
在开始看代码之前,我们先简单梳理一下这个思路:
我们知道二阶的贝塞尔曲线是通过一个起始点和一个终点,再加一个控制点来确定曲线效果的。
因此我们手指按下的点的坐标就是那个控制贝塞尔曲线的控制点。OK,让我们结合代码走一波:
paint.setStrokeWidth(10);arcPath.reset();arcPath.moveTo(mWidth * 1 / 10, mHeight * 7 / 10);if (yHeight > mHeight * 7 / 10 && xWidth > mWidth * 4 / 10 && xWidth < mWidth * 6 / 10) { arcHeight = yHeight + yHeight - mHeight * 7 / 10; } else { arcHeight = mHeight * 7 / 10; } //以上部分作用为调整线段位置 //quadTo就是我们要使用的二阶贝塞尔曲线的方法。需要传四个参数,前两个对应控制点的x,y;那么后两个就是线段结束点的x,y。 //那么线段的moveTo方法,就是我们贝塞尔曲线的起始点的x,y。 arcPath.quadTo(mWidth * 5 / 10, arcHeight, mWidth * 9 / 10, mHeight * 7 / 10); canvas.drawPath(arcPath, paint); //省略部分代码}
当然一切到这里并没有什么卵用,我们现在仅仅是画了一条直线而已。那么接下来我们就是要让这条直线动起来。
既然需要动,那么我们会很自然的想到,在onTouchEvent方法中搞这件事情就好了。原理也是很简单,通过获取按下时的坐标赋值给我们的quadTo中的arcHeight,这里为了简单仅仅改变贝塞尔曲线控制点的y坐标。
case MotionEvent.ACTION_MOVE: xWidth = x; yHeight = y; postInvalidate(); break;
Ok,效果就出来了….
补充
简单瞅了一下,发现全篇博客内容真的非常的少…所以把画火箭的代码也贴上吧。
//确定火箭控制点的范围 if (xWidth < xSize) { xWidth = xSize; } if (xWidth > mWidth * 9 / 10) { xWidth = mWidth * 9 / 10; } if (yHeight > mHeight * 8 / 10) { yHeight = mHeight * 8 / 10; } if (yHeight > mHeight * 7 / 10 && xWidth < mWidth * 4 / 10) { yHeight = mHeight * 7 / 10; } if (yHeight > mHeight * 7 / 10 && xWidth > mWidth * 6 / 10) { yHeight = mHeight * 7 / 10; } //绘制火箭 path.moveTo(xWidth - xSize * 1 / 2, yHeight - ySize * 3 / 5); path.lineTo(xWidth, yHeight - ySize); path.lineTo(xWidth + xSize * 1 / 2, yHeight - ySize * 3 / 5); path.moveTo(xWidth - xSize * 1 / 4, yHeight - ySize * 4 / 5); path.lineTo(xWidth - xSize * 1 / 4, yHeight); path.lineTo(xWidth + xSize * 1 / 4, yHeight); path.lineTo(xWidth + xSize * 1 / 4, yHeight - ySize * 4 / 5); canvas.drawPath(path, paint);
尾声
希望各位看官可以star我的GitHub,三叩九拜,满地打滚求star:
https://github.com/zhiaixinyang/PersonalCollect
https://github.com/zhiaixinyang/MyFirstApp
- Android从零开搞系列:自定义View(12)贝塞尔曲线的应用
- android自定义View基础系列二(贝塞尔曲线)
- Android从零开搞系列:自定义View(3)Canvas基本API+综合应用+开源分析
- Android自定义View,贝塞尔曲线
- Android自定义View-- 贝塞尔曲线
- Android进阶之自定义View实战(三)贝塞尔曲线应用
- Android从零开搞系列:自定义View(1)setContent()台前幕后
- Android从零开搞系列:自定义View(8)Canvas解析
- 从0到1Android自定义View(四)贝塞尔曲线
- 025.自定义View中应用贝塞尔曲线
- Android自定义view进阶-- 神奇的贝塞尔曲线
- Android 自定义View高级特效,神奇的贝塞尔曲线
- Android 自定义View高级特效,神奇的贝塞尔曲线
- Android自定义View阻尼动画&贝塞尔曲线的实现
- Android自定义view进阶-- 神奇的贝塞尔曲线
- Android从零开搞系列:自定义View(4)基本的自定义ViewPager指示器+开源项目分析(上)
- Android从零开搞系列:自定义View(5)基本的自定义ViewPager指示器+开源项目分析(下)
- Android自定义View---Canvas绘制贝塞尔曲线
- 辨析离线算法与在线算法
- Mac 下 制作USB Clover引导
- LeetCode 258. Add Digits
- 如何在只听过一次的情况下用百度找到歌名
- 【笔记】使用Spring表单标签
- Android从零开搞系列:自定义View(12)贝塞尔曲线的应用
- 实用的4~20mA输入/0~5V输出的I/V转换电路
- 函数的数据传递
- 科锐课堂笔记:2017/4/21 多重继承与智能指针
- 随机梯度下降算法
- Servlet url-pattern /与/*区别,*.action以及SpringMVC中/*解析出错过程分析
- docker_practice从入门到实践总结
- 第五章 5-11 绘图模式
- hdu5902,5505——GCD小合集