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

获奖转盘学习的要点记录

2016-05-19 1858

版权

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

简介：

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

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

先看整体效果图

1、绘制背景

[java]view plain copy 
private void drawBg() {  
        // 绘制背景  
        mCanvas.drawColor(0xffffffff);  
        mCanvas.drawBitmap(mBgBitmap, null, new RectF(mPadding / 2,  
                mPadding / 2, getMeasuredWidth() - mPadding / 2,  
                getMeasuredHeight() - mPadding / 2), null);  
  
    }  

这里涉及到canvas中的drawColor函数

drawColor（int color）

作用：绘制颜色覆盖画布，常用于刷屏

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

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

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

2、绘制盘块

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

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

1)填充颜色 setC olor

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

参数说明：

第一个参数矩形实例

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

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

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

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

3、绘制文本

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

这里的文本是按照弧线来居中分布的，主要使用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 
// 绘制图片  
    private void drawIconn(float tmpAngle, Bitmap bitmap) {  
        // TODO Auto-generated method stub  
        // 设置图片宽度为直径的1/2  
        int imgWidth = mRadius / 8;  
        float angle = (float) ((tmpAngle + 360 / mItemCount / 2) * Math.PI / 180);// 弧长  
        int x = (int) (mCenter + mRadius / 2 / 2 * Math.cos(angle));  
        int y = (int) (mCenter + mRadius / 2 / 2 * Math.sin(angle));// 图片中心点位置  
        // 确定图片  
        Rect rect = new Rect(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth  
                / 2, y + imgWidth / 2);  
        mCanvas.drawBitmap(bitmap, null, rect, null);  
  
    }  

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

我们希望图片在中间的那个点，点距离圆心即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

获奖转盘学习的要点记录

热门文章

最新文章

相关课程

相关电子书

相关实验场景