&>&&>&&>&&>&抽奖转盘的设计
抽奖转盘的设计
上传大小：184KB
抽奖装盘的设计，包括椭圆轨迹的运动的粒子效果等
综合评分：4.3（7位用户评分）
所需积分：0
下载次数：125
审核通过送C币
创建者：nigelyq
创建者：wyx100
创建者：nigelyq
课程推荐相关知识库
上传者其他资源上传者专辑
移动开发热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
抽奖转盘的设计
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
sharing_li
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：43939人阅读
【Android 精彩案例】（36）
转载请标明出处：&，本文出自：1、概述今天给大家带来SurfaceView的一个实战案例，话说自定义View也是各种写，一直没有写过SurfaceView，这个玩意是什么东西？什么时候用比较好呢？可以看到SurfaceView也是继承了View，但是我们并不需要去实现它的draw方法来绘制自己，为什么呢？因为它和View有一个很大的区别，View在UI线程去更新自己；而SurfaceView则在一个子线程中去更新自己；这也显示出了它的优势，当制作游戏等需要不断刷新View时，因为是在子线程，避免了对UI线程的阻塞。知道了优势以后，你会想那么不使用draw方法，哪来的canvas使用呢？大家都记得更新View的时候draw方法提供了一个canvas，SurfaceView内部内嵌了一个专门用于绘制的Surface，而这个Surface中包含一个Canvas。有了Canvas，我们如何获取呢？SurfaceView里面有个getHolder方法，我们可以获取一个SurfaceHolder。通过SurfaceHolder可以监听SurfaceView的生命周期以及获取Canvas对象。2、一般的写法综上所述，一般SurfaceView类中我们会这么写代码：public class SurfaceViewTemplate extends SurfaceView implements Callback, Runnable
private SurfaceHolder mH
* 与SurfaceHolder绑定的Canvas
private Canvas mC
* 用于绘制的线程
* 线程的控制开关
private boolean isR
public SurfaceViewTemplate(Context context)
this(context, null);
public SurfaceViewTemplate(Context context, AttributeSet attrs)
super(context, attrs);
mHolder = getHolder();
mHolder.addCallback(this);
// setZOrderOnTop(true);// 设置画布 背景透明
// mHolder.setFormat(PixelFormat.TRANSLUCENT);
//设置可获得焦点
setFocusable(true);
setFocusableInTouchMode(true);
//设置常亮
this.setKeepScreenOn(true);
public void surfaceCreated(SurfaceHolder holder)
// 开启线程
isRunning =
t = new Thread(this);
t.start();
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height)
// TODO Auto-generated method stub
public void surfaceDestroyed(SurfaceHolder holder)
// 通知关闭线程
isRunning =
public void run()
// 不断的进行draw
while (isRunning)
private void draw()
// 获得canvas
mCanvas = mHolder.lockCanvas();
if (mCanvas != null)
// drawSomething..
} catch (Exception e)
if (mCanvas != null)
mHolder.unlockCanvasAndPost(mCanvas);
结合上面我们的介绍，我们在构造中通过getHolder拿到SurfaceHolder对象，然后设置一个addCallback回调，去监听SurfaceView的生命周期，生命周期有三个方法，分别为create,change,我们一般在create里面进行初始化的一些操作，然后开启线程；在destroy里面设置关闭线程；所有的绘制流程都是线程的run方法里面，可以看到我们的draw方法。注意下，我们在draw里面进行了try catch然后很多的判空，主要是因为，当用户点击back或者按下home键以后，surfaceview会被销毁；&mHolder.lockCanvas();返回的就是null了，所以为了避免造成空指针错误，我们各种判null，甚至还加了个try catch。说了这么多，竟然没看到效果图，这怎么能行~~3、效果图就这么个效果，当然了模拟器录制的效果肯定没有真机上效果流畅。结合上面我们给出的模版，我们需要改变的就是，在create回调里面需要去初始化一些变量，在draw方法里面去绘制我们的文本、图片、扇形块块等等。整体架构没有变化。4、转盘的制作1、构造方法以及变量public class LuckyPanView extends SurfaceView implements Callback, Runnable
private SurfaceHolder mH
* 与SurfaceHolder绑定的Canvas
private Canvas mC
* 用于绘制的线程
* 线程的控制开关
private boolean isR
* 抽奖的文字
private String[] mStrs = new String[] { &单反相机&, &IPAD&, &恭喜发财&, &IPHONE&,
&妹子一只&, &恭喜发财& };
* 每个盘块的颜色
private int[] mColors = new int[] { 0xFFFFC300, 0xFFF17E01, 0xFFFFC300,
0xFFF17E01, 0xFFFFC300, 0xFFF17E01 };
* 与文字对应的图片
private int[] mImgs = new int[] { R.drawable.danfan, R.drawable.ipad,
R.drawable.f040, R.drawable.iphone, R.drawable.meizi,
R.drawable.f040 };
* 与文字对应图片的bitmap数组
private Bitmap[] mImgsB
* 盘块的个数
private int mItemCount = 6;
* 绘制盘块的范围
private RectF mRange = new RectF();
* 圆的直径
private int mR
* 绘制盘快的画笔
private Paint mArcP
* 绘制文字的画笔
private Paint mTextP
* 滚动的速度
private double mS
private volatile float mStartAngle = 0;
* 是否点击了停止
private boolean isShouldE
* 控件的中心位置
private int mC
* 控件的padding，这里我们认为4个padding的值一致，以paddingleft为标准
private int mP
* 背景图的bitmap
private Bitmap mBgBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.bg2);
* 文字的大小
private float mTextSize = TypedValue.applyDimension(
PLEX_UNIT_SP, 20, getResources().getDisplayMetrics());
public LuckyPanView(Context context)
this(context, null);
public LuckyPanView(Context context, AttributeSet attrs)
super(context, attrs);
mHolder = getHolder();
mHolder.addCallback(this);
// setZOrderOnTop(true);// 设置画布 背景透明
// mHolder.setFormat(PixelFormat.TRANSLUCENT);
setFocusable(true);
setFocusableInTouchMode(true);
this.setKeepScreenOn(true);
}我们在构造中设置了Callback回调，然后通过成员变量，大家应该也能看得出来每个变量的作用，以及可能有的代码快。2、onMeasure这里我简单重写了一下onMeasure，使我们的控件为正方形/**
* 设置控件为正方形
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
// 获取圆形的直径
mRadius = width - getPaddingLeft() - getPaddingRight();
// padding值
mPadding = getPaddingLeft();
mCenter = width / 2;
setMeasuredDimension(width, width);
并且为我们的mRadius和mCenter进行了赋值。3、surfaceCreated@Override
public void surfaceCreated(SurfaceHolder holder)
// 初始化绘制圆弧的画笔
mArcPaint = new Paint();
mArcPaint.setAntiAlias(true);
mArcPaint.setDither(true);
// 初始化绘制文字的画笔
mTextPaint = new Paint();
mTextPaint.setColor(0xFFffffff);
mTextPaint.setTextSize(mTextSize);
// 圆弧的绘制范围
mRange = new RectF(getPaddingLeft(), getPaddingLeft(), mRadius
+ getPaddingLeft(), mRadius + getPaddingLeft());
// 初始化图片
mImgsBitmap = new Bitmap[mItemCount];
for (int i = 0; i & mItemC i++)
mImgsBitmap[i] = BitmapFactory.decodeResource(getResources(),
mImgs[i]);
// 开启线程
isRunning =
t = new Thread(this);
t.start();
}surfaceCreated我们初始化了绘制需要用到的变量，以及开启了线程。surfaceDestroyed中就一行代码，顺便贴出。@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height)
// TODO Auto-generated method stub
public void surfaceDestroyed(SurfaceHolder holder)
// 通知关闭线程
isRunning =
}可以猜到核心的代码都在我们的线程的run里面了。4、draw@Override
public void run()
// 不断的进行draw
while (isRunning)
long start = System.currentTimeMillis();
long end = System.currentTimeMillis();
if (end - start & 50)
Thread.sleep(50 - (end - start));
} catch (InterruptedException e)
e.printStackTrace();
private void draw()
// 获得canvas
mCanvas = mHolder.lockCanvas();
if (mCanvas != null)
// 绘制背景图
* 绘制每个块块，每个块块上的文本，每个块块上的图片
float tmpAngle = mStartA
float sweepAngle = (float) (360 / mItemCount);
for (int i = 0; i & mItemC i++)
// 绘制快快
mArcPaint.setColor(mColors[i]);
mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,
mArcPaint);
// 绘制文本
drawText(tmpAngle, sweepAngle, mStrs[i]);
// 绘制Icon
drawIcon(tmpAngle, i);
tmpAngle += sweepA
// 如果mSpeed不等于0，则相当于在滚动
mStartAngle += mS
// 点击停止时，设置mSpeed为递减，为0值转盘停止
if (isShouldEnd)
mSpeed -= 1;
if (mSpeed &= 0)
mSpeed = 0;
isShouldEnd =
// 根据当前旋转的mStartAngle计算当前滚动到的区域
calInExactArea(mStartAngle);
} catch (Exception e)
e.printStackTrace();
if (mCanvas != null)
mHolder.unlockCanvasAndPost(mCanvas);
可以看到我们的run里面调用了draw，和上面模版一致。使用通过&mHolder.lockCanvas();获得我们的Canvas，然后就可以尽情的绘制了。1、绘制背景drawBg(); /**
* 根据当前旋转的mStartAngle计算当前滚动到的区域 绘制背景，不重要，完全为了美观
private void drawBg()
mCanvas.drawColor(0xFFFFFFFF);
mCanvas.drawBitmap(mBgBitmap, null, new Rect(mPadding / 2,
mPadding / 2, getMeasuredWidth() - mPadding / 2,
getMeasuredWidth() - mPadding / 2), null);
}这个比较简单，其实就是绘制一个棕色的圆盘，在运行代码前，你可以忽略掉，不影响。接下来一个for循环，且角度每次递增(360 / mItemCount);就是绘制每个盘块以及盘块上的字体和图标了。2、绘制盘块// 绘制快快
mArcPaint.setColor(mColors[i]);
mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,
mArcPaint);这个比较简单了~~3、绘制文本/**
* 绘制文本
* @param rect
* @param startAngle
* @param sweepAngle
* @param string
private void drawText(float startAngle, float sweepAngle, String string)
Path path = new Path();
path.addArc(mRange, startAngle, sweepAngle);
float textWidth = mTextPaint.measureText(string);
// 利用水平偏移让文字居中
float hOffset = (float) (mRadius * Math.PI / mItemCount / 2 - textWidth / 2);// 水平偏移
float vOffset = mRadius / 2 / 6;// 垂直偏移
mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);
}利用Path，添加入一个Arc，然后设置水平和垂直的偏移量，垂直偏移量就是当前Arc朝着圆心移动的距离；水平偏移量，就是顺时针去旋转，我们偏移了&(mRadius * Math.PI / mItemCount / 2 - textWidth / 2);目的是为了文字居中。mRadius * Math.PI 是圆的周长；周长/&mItemCount / 2 是每个Arc的一半的长度；拿Arc一半的长度减去textWidth / 2，就把文字设置居中了。最后，用过path去绘制文本即可。凑合看个图：本来字的位置在外围的横线处，我们希望到内部的横线位置，需要调节水平和垂直的偏移；水平和垂直的平移方向为绿色的箭头；大概就这样。4、绘制图像/**
* 绘制图片
* @param startAngle
* @param sweepAngle
* @param i
private void drawIcon(float startAngle, int i)
// 设置图片的宽度为直径的1/8
int imgWidth = mRadius / 8;
float angle = (float) ((30 + startAngle) * (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(mImgsBitmap[i], null, rect, null);
}绘制图片主要就是图片的中心的确定，这里我们固定图片大小为直径的1/8；至于圆心的确定，看下图：我们需要图片的中心，为每个块块的中间：我们希望图片在中间的那个点，点距离圆心即center的距离为r = mRadius /2 / 2 ;绿线与水平线的夹角为a = 360 / count / 2 ，本图为30 ；于是那个点的坐标为：(mCenter + r * cos a , mCenter + r * sina );其他的点同理，唯一变化就是a 的角度 ，在计算时需要把a转化为弧度制。&集合图和上面的代码好好理解下。到此基本我们的圆盘就绘制好了。5、让圆盘先滚一会怎么让圆盘滚动呢？如果你足够细心，应该发现我们的draw里面有这么一句：mStartAngle += mS其实每次draw都会让mStartAngle += mS看起来就是滚动了。那么滚动，其实就是去设置mSpeed即可。嗯，是的，如果单纯想滚动，只要去设置mSpeed就行了；但是，这样就行了么，就拿我们这个奖项来说，你敢1/6的概率拿到大奖么，你个IT公司让人抽到妹子一只咋办。所以我们还要来控制用户抽奖的概率，这里我们让用户中奖的产品在开始滚的时候就决定了。是不是玩转盘的时候很傻很天真，以为可以中大奖。/**
* 点击开始旋转
* @param luckyIndex
public void luckyStart(int luckyIndex)
// 每项角度大小
float angle = (float) (360 / mItemCount);
// 中奖角度范围（因为指针向上，所以水平第一项旋转到指针指向，需要旋转210-270；）
float from = 270 - (luckyIndex + 1) *
float to = from +
// 停下来时旋转的距离
float targetFrom = 4 * 360 +
(v1 + 0) * (v1+1) / 2 =
v1*v1 + v1 - 2target = 0 ;
v1=-1+(1*1 + 8 *1 * target)/2;
float v1 = (float) (Math.sqrt(1 * 1 + 8 * 1 * targetFrom) - 1) / 2;
float targetTo = 4 * 360 +
float v2 = (float) (Math.sqrt(1 * 1 + 8 * 1 * targetTo) - 1) / 2;
mSpeed = (float) (v1 + Math.random() * (v2 - v1));
isShouldEnd =
}当外部调用luckyStart即可以旋转，index为停下来的位置，水平位置开始算，即0为相机，1为IPAD。这里又开始牵扯数学了：float from = 270 - (luckyIndex + 1) *
float to = from +这个from , to 比较简单，就是确定中将范围，比如我index=0，则只要转了210-270之间，我们的相机都会被垂直向上的指针指向。那么这个targetFrom是干嘛的，是决定你点击停止的时候转多长距离，这里我们设置为4圈多一点，这个多一点就是上面的from和to。最麻烦就是v1的计算了，既然我们希望决定停下里的位置，那么这个速度就是我们去计算出来的，怎么算呢？我们旋转的距离有了targetFrom，然后我们点击的时候mSpeed -= 1;也就是说速度是递减的，每次减去1。递减说明是个等差数列，等差数列的和是targetFrom。等差数列的求和公式大家记得否：（首项+末项）*（项数）/ 2我们的首项是v1 ，末项肯定是0 ， 项数 （v1/ 1 + 1）加个1为向上进一位。&那么式子就是： （v1 + 0 ) * (v1 / 1 +1) /2 = targetF 只有v1是未知数，一元二次方程的解，大家还记得否，不记得我来写 :&于是我们的v1就是v1=-1+(1*1 + 8 *1 * target)/2;好了，尼玛求出来v1，为啥我们代码还有个v2，这是因为v1停下来永远在某个块块的边界，我们屌丝又不傻，你每次停一个位置，都知道你造假。那么我们就求个v2，这个停下块块的最后位置。最后我们的速度为v1，v2间的一个随机数，也就是在某个块块中间任意位置。这样就可以让你觉得每次都在这个块块，但是指针位置还不同。好了，这里就是最复杂的地方了，如果你比较善良，不想内置这个功能，那就随便设置个速度吧。6、让圆盘停止滚动别忘了，我们5计算那么多，都是从水平那个距离为0开始计算的，于是我们的停止代码是这样的：public void luckyEnd()
mStartAngle = 0;
isShouldEnd =
}最后贴出我们的主布局文件和Activity7、布局文件和MainActivitypackage com.zhy.demo_zhy_06_
import android.app.A
import android.os.B
import android.view.V
import android.view.View.OnClickL
import android.widget.ImageV
import com.zhy.view.LuckyPanV
public class MainActivity extends Activity
private LuckyPanView mLuckyPanV
private ImageView mStartB
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLuckyPanView = (LuckyPanView) findViewById(R.id.id_luckypan);
mStartBtn = (ImageView) findViewById(R.id.id_start_btn);
mStartBtn.setOnClickListener(new OnClickListener()
public void onClick(View v)
if (!mLuckyPanView.isStart())
mStartBtn.setImageResource(R.drawable.stop);
mLuckyPanView.luckyStart(1);
if (!mLuckyPanView.isShouldEnd())
mStartBtn.setImageResource(R.drawable.start);
mLuckyPanView.luckyEnd();
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools&
android:layout_width=&match_parent&
android:background=&#ffffff&
android:layout_height=&match_parent& &
&com.zhy.view.LuckyPanView
android:id=&@+id/id_luckypan&
android:layout_width=&fill_parent&
android:layout_height=&fill_parent&
android:layout_centerInParent=&true&
android:padding=&30dp& /&
&ImageView
android:id=&@+id/id_start_btn&
android:src=&@drawable/start&
android:layout_centerInParent=&true&
android:layout_width=&wrap_content&
android:layout_height=&wrap_content&
&/RelativeLayout&终于写完了，数学把我这类渣渣计算的不行不行的。ps：抠图真恶心，爱歌撒时候给我传递些艺术的造诣和ps的技术呢。。。。好了，我们的按钮是用布局文件加上的，方便大家自己定制按钮~~~并且大家的奖项，颜色，以及图片可以自己定义，这个不用说了吧，修改count，以及那几个数组就行。有可能的话，还会写一篇SurfaceView做游戏的博文，不过案例可能会在网上进行寻找，哈。发现任何bug欢迎留言。----------------------------------------------------------------------------------------------------------博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
积分：45716
积分：45716
排名：第58名
原创：195篇
评论：13365条
长期为您推荐优秀博文、开源项目、视频等，进入还有好玩的等着你，欢迎扫一扫。
请勿重复加群，Thx
文章：11篇
阅读：172191
文章：10篇
阅读：101444
文章：67篇
阅读：5089221
微信关注我的公众号NGUI 制作一个转盘式的界面_unity3d吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：64,391贴子：
NGUI 制作一个转盘式的界面收藏
rt。求思路！！
京东电脑节，全民抢宝进行时！1999抢i7本，半价秒电脑，抢直降3000显示器
先将转盘贴图用一个UIsprite做出来。然后update里改变这个UISprite的gameobject的transform的rotation。
同问楼主思路。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或用 cocos2d 写的转盘代码例子
招聘信息：
&&& 这个转盘代码例子由 CocoaChina 会员 &roundsun& 分享，效果类似抽奖用的幸运大转盘，不论在游戏中或工具类 App 中都能用到。附件下载
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量7553点击量6752点击量6472点击量5678点击量5330点击量4985点击量4303点击量3995点击量3612
&2016 Chukong Technologies,Inc.
京公网安备89