获奖转盘学习的要点记录-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

获奖转盘学习的要点记录

简介:

在慕课网上学习了鸿洋大神的获奖转盘的制作的课程,感觉还是比较有意思的,主要是通过surfaceView来进行绘制,surfaceView比view更加适合这个场景,其中surfaceView在我前一篇博客也做了一些介绍认识surfaceView  整个装盘制作过程也涉及到其他很多知识点,比如自定义控件的制作,特别是Canvas画布和Pain画笔的应用,这里对转盘代码中一些核心点做一些说明,整个过程也很清晰,主要包括:

绘制背景、绘制盘块、绘制文本、绘制图标

先看整体效果图



1、绘制背景

[java] view plain copy
  1. private void drawBg() {  
  2.         // 绘制背景  
  3.         mCanvas.drawColor(0xffffffff);  
  4.         mCanvas.drawBitmap(mBgBitmap, nullnew RectF(mPadding / 2,  
  5.                 mPadding / 2, getMeasuredWidth() - mPadding / 2,  
  6.                 getMeasuredHeight() - mPadding / 2), null);  
  7.   
  8.     }  

这里涉及到canvas中的drawColor函数

 drawColor(int color)

作用:绘制颜色覆盖画布,常用于刷屏

drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

参数:第一个参数 图片对象,第二个参数 对图片进行裁剪,若为null则表示使用整个图片,第三个参数表示图片在canvas画布显示的位置,第四个参数表示画笔

对应图中就是绘制了棕色的圆块


2、绘制盘块

[java] view plain copy
  1.                                   mArcPaint.setColor(mColors[i]);  
  2. Canvas.drawArc(mRange, tmpAngle, sweepAngle, true,  
  3.     mArcPaint);// 绘制弧形(扇形)  
  4. **  
  5. * 参数说明: 第一个参数:矩形实例 第二个参数:弧形的起始角度 第三个参数:弧形的终止角度  
  6. * 第四个参数:是否绘制中心点  
  7. * ,若为真,起始点与终止点都会分别连接中心,从而形成封闭图形;如果为假,则起始点直接连接终止点,从而形成封闭图形  
  8. */  

这里主要是在for循环中完成

       1)填充颜色  setC olor

       2)绘制圆弧 draArc(RectF oval,flaot startAngle,float sweepAngle,boolean useCenter Pain paint)

参数说明:

第一个参数 矩形实例

第二个参数:弧形的起始角度(默认45°为图形起始角度)

第三个参数:弧形的终止角度

第四个参数:是否绘制中心点,若为真起始点与终止点都会分别连接圆心形成封闭图形,若为假,则起始点直接连接终止点,形成线段

此时通过for循环这样就绘制出了6个黄橙交替的圆块


3、绘制文本

[java] view plain copy
  1. // 绘制每个盘块的文本  
  2. private void drawText(float tmpAngle, float sweepAngle, String string) {  
  3.     Path path = new Path();  
  4.     path.addArc(mRange, tmpAngle, sweepAngle); // 圆弧路径  
  5.     float textWidth = mTextPaint.measureText(string);  
  6.     // 利用水平偏移量让文字居中  
  7.     int hOffset = (int) (mRadius * Math.PI / mItemCount / 2 - textWidth / 2);  
  8.     // 垂直偏移量  
  9.     int vOffset = mRadius / 2 / 6;  
  10.     mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);  
  11. }  


这里的文本是按照弧线来居中分布的,主要使用drawTextOnPath(String text,Path path,float hOffset,float vOffset,Paint paint)

作用:将本文沿着指定的路径进行绘制

第一个参数:文本

第二个参数:路径实例

第三个参数:文本距离绘制起点的距离

第四个参数:文本距离路径的距离

第五个参数: 画笔实例

这里mRadius * Math.PI / mItemCount / 2 - textWidth / 2  ,mRadius * Math.PI / mItemCount / 2每个圆弧一般的长度,减去文本宽度/2,这样文字居中了

再将其垂直移动 直径的12分之一,mRadius / 2 / 6,这样文本居中显示

4、绘制图标

[java] view plain copy
  1. // 绘制图片  
  2.     private void drawIconn(float tmpAngle, Bitmap bitmap) {  
  3.         // TODO Auto-generated method stub  
  4.         // 设置图片宽度为直径的1/2  
  5.         int imgWidth = mRadius / 8;  
  6.         float angle = (float) ((tmpAngle + 360 / mItemCount / 2) * Math.PI / 180);// 弧长  
  7.         int x = (int) (mCenter + mRadius / 2 / 2 * Math.cos(angle));  
  8.         int y = (int) (mCenter + mRadius / 2 / 2 * Math.sin(angle));// 图片中心点位置  
  9.         // 确定图片  
  10.         Rect rect = new Rect(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth  
  11.                 / 2, y + imgWidth / 2);  
  12.         mCanvas.drawBitmap(bitmap, null, rect, null);  
  13.   
  14.     }  

主要是图片根据根据圆心夹角算出坐标即可,盗取鸿洋大神的图片做个示范

我们希望图片在中间的那个点,点距离圆心即center的距离为r = mRadius /2 / 2 ;

绿线与水平线的夹角为a = 360 / count / 2 ,

于是那个点的坐标为:(mCenter + r * cos a , mCenter + r * sina );

其他的点同理,唯一变化就是a 的角度 ,在计算时需要把a转化为弧度制


推荐大家去慕课网学习一下,手动敲敲代码


转载:http://blog.csdn.net/xsf50717/article/details/48708363

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章