Android 幸运转盘实现逻辑

2023-12-10 06:20
文章标签 实现 android 逻辑 转盘 幸运

本文主要是介绍Android 幸运转盘实现逻辑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

幸运转盘在很多app中都有，也有很多现实的例子，不过这个难度并不是如何让转盘转起来，真正的难度是如何统一个方向转动，且转到指定的目标区域（中奖概率从来不是随机的），当然还不能太假，需要有一定的位置偏移。

效果预览

二、逻辑实现

2.1 平分区域

由于圆周是360度，品分每个站preDegree，那么起点和终点

但是为了让X轴初始化时对准第一个区域的中心，我们做一下小偏移，逆时针旋转一下

//圆点起始角度 ，可以理解为index=0的起始角度，我们以index=0位参考点
float zeroStartDegree = 0 + -perDegree / 2;
float endStartDegree = 0 + perDegree / 2;

那么每个区域的起始角度如下

float startDegree = i* perDegree  - perDegree / 2;
float endDegree = i * perDegree + perDegree / 2 ;

2.2 画弧

很简单，不需要计算每个分区的大小，因为平分的是同一个大圆，因此Rect是大圆的范围，但也要记住 ,弧的起始角+绘制角度不能大于等于360，最大貌似是359.9998399

canvas.drawArc(rectF, startDegree, endDegree - startDegree, true, mDrawerPaint);

2.3 文字绘制

由于Canvas.drawText不能设置角度，那么意味着不能直接绘制，需要做一定的角度转换，要么旋转Canvas坐标，要们旋转Path，这次我们选后者吧。

使用Path的原因是，他不仅具备矢量性质（不失真），而且还能转动文字的方向和从有到左绘制。

           //计算出中心角度 float centerRadius = (float) Math.toRadians((startDegree + endDegree)/2F);float measuredTextWidth = mDrawerPaint.measureText(item.text);float measuredTextHeight = getTextHeight(mDrawerPaint,item.text);float innerRadius = maxRadius - 2* measuredTextHeight;float cx = (float) ((innerRadius - measuredTextHeight)   * Math.cos(centerRadius));float cy = (float) ((innerRadius - measuredTextHeight)  * Math.sin(centerRadius));double degreeOffset = Math.asin((measuredTextWidth/2F)/innerRadius);float startX= (float) (innerRadius * Math.cos(centerRadius - degreeOffset));float startY = (float) (innerRadius * Math.sin(centerRadius - degreeOffset));float endX= (float) ((innerRadius) * Math.cos(centerRadius + degreeOffset));float endY = (float) ((innerRadius) * Math.sin(centerRadius + degreeOffset));path.reset();path.moveTo(startX,startY);path.lineTo(endX,endY);//这里使用Path的原因是文本角度无法设置canvas.drawTextOnPath(item.text,path,0,0,mDrawerPaint);

2.4 核心逻辑

老板不会让中奖率随机的，万一你中大奖了，老板还得出钱或者花部门经费，因此，必须指定中奖物品，可以让你100%中奖，也能让你100%不中奖，要看老板心情，所以掘金的转盘你玩不玩都已经固定好你的胜率了。

计算出目标物品与初始角度的，注意时初始角度，而不是转过后的角度算起，为什么呢？原因是你按转过的角度计算复杂度就会提升，而从起始点计算，按照圆的三角函数定理，转一圈就能绕过你转动的角度 ，也就是 rotateDegree 最终会大于你当前的所停留的角度， 如果你在30度，那么要转到20度的位置，肯定不会倒转 需要 360 + 20,而360 +20大于30，所以，莫有必要从当前角度计算。

//圆点起始角度 ，可以理解为index=0的起始角度，我们以index=0位参考点
float zeroStartDegree = 0 + -perDegree / 2;
float endStartDegree = 0 + perDegree / 2;
//从圆点计算，要旋转的角度
float targetDegree = (perDegree * (index - 1) + perDegree / 2);
float rotateDegree = zeroStartDegree - targetDegree;

算出来之后紧接着计算落点位置，这里需要随机一下，不然看着很假，样子还是要做的。

但是这里我们一气呵成：

【1】计算旋转速度，主要是防止逆时针旋转，其词转一下就到了，也不太真实，次数利用了三角函数定理

三角函数定理 n*360 + degree 和 degree三角函数值最终夹角是等价的

【2】旋转次数，这里我们用duration/speedTime，实际上还可以用圆周边长除以duration，也是可以的，当然也要加一定的倍数。

【3】计算出随机落点位置，不能骑线，也不能超过指定区域

        //防止逆时针旋转 （三角函数定理  n*360 + degree 和 degree最终夹角是等价的 ）while (rotateDegree < offsetDegree) {rotateDegree += 360;}if (speedTime == 0) {speedTime = 100L;}long count = duration / speedTime - 1;  //计算额外旋转圈数while (count >= 0) {rotateDegree += 360;  //三角函数定理  n*360 + degree 和 degree最终夹角是等价的count--; //算出转多少圈}float targetStartDegree = rotateDegree - perDegree / 2;float targetEndDegree = rotateDegree + perDegree / 2;float currentOffsetDegree = offsetDegree;// float targetOffsetDegree  = (targetStartDegree +  targetEndDegree)/2 ;//让指针指向有一定的随机性float targetOffsetDegree = (float) (targetStartDegree + (targetEndDegree - targetStartDegree) * Math.random());

2.5 全部代码

public class LuckWheelView extends View {Path path  = new Path();private final DisplayMetrics mDM;private TextPaint mArcPaint;private TextPaint mDrawerPaint;private int maxRadius;private float perDegree;private long duration = 5000L;private List<Item> items = new ArrayList<>();private RectF rectF = new RectF();private float offsetDegree = 0;private TimeInterpolator timeInterpolator = new AccelerateDecelerateInterpolator();private long speedTime = 1000L; //旋转一圈需要多少时间private ValueAnimator animator = null;public LuckWheelView(Context context) {this(context, null);}public LuckWheelView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LuckWheelView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mDM = getResources().getDisplayMetrics();initPaint();}public void setRotateIndex(int index) {if (items == null || items.size() <= index) {return;}//圆点起始角度 ，可以理解为index=0的起始角度，我们以index=0位参考点float zeroStartDegree = 0 + -perDegree / 2;float endStartDegree = 0 + perDegree / 2;//从圆点计算，要旋转的角度float targetDegree = (perDegree * (index - 1) + perDegree / 2);float rotateDegree = zeroStartDegree - targetDegree;//防止逆时针旋转 （三角函数定理  n*360 + degree 和 degree最终夹角是等价的 ）while (rotateDegree < offsetDegree) {rotateDegree += 360;}if (speedTime == 0) {speedTime = 100L;}long count = duration / speedTime - 1;  //计算额外旋转圈数while (count >= 0) {rotateDegree += 360;  //三角函数定理  n*360 + degree 和 degree最终夹角是等价的count--;}float targetStartDegree = rotateDegree - perDegree / 2;float targetEndDegree = rotateDegree + perDegree / 2;float currentOffsetDegree = offsetDegree;// float targetOffsetDegree  = (targetStartDegree +  targetEndDegree)/2 ;//让指针指向有一定的随机性float targetOffsetDegree = (float) (targetStartDegree + (targetEndDegree - targetStartDegree) * Math.random());if (animator != null) {animator.cancel();}
//起点肯定要从当前角度算起，不然会闪一下回到原点animator = ValueAnimator.ofFloat(currentOffsetDegree, targetOffsetDegree).setDuration(duration);animator.setInterpolator(timeInterpolator);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {offsetDegree = (float) animation.getAnimatedValue();postInvalidate();}});animator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);offsetDegree = offsetDegree % 360;}});animator.start();}private void initPaint() {// 实例化画笔并打开抗锯齿mArcPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);mArcPaint.setAntiAlias(true);mArcPaint.setStyle(Paint.Style.STROKE);mArcPaint.setStrokeCap(Paint.Cap.ROUND);mDrawerPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);mDrawerPaint.setAntiAlias(true);mDrawerPaint.setStyle(Paint.Style.FILL);mDrawerPaint.setStrokeCap(Paint.Cap.ROUND);mDrawerPaint.setStrokeWidth(5);mDrawerPaint.setTextSize(spTopx(14));}private float spTopx(float dp) {return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, dp, getResources().getDisplayMetrics());}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthMode = MeasureSpec.getMode(widthMeasureSpec);int widthSize = MeasureSpec.getSize(widthMeasureSpec);if (widthMode != MeasureSpec.EXACTLY) {widthSize = mDM.widthPixels / 2;}int heightMode = MeasureSpec.getMode(heightMeasureSpec);int heightSize = MeasureSpec.getSize(heightMeasureSpec);if (heightMode != MeasureSpec.EXACTLY) {heightSize = widthSize / 2;}setMeasuredDimension(widthSize, heightSize);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int width = getWidth();int height = getHeight();if (width == 0 || height == 0 || items == null || items.size() <= 0) {perDegree = 0;return;}maxRadius = Math.min(width / 2, height / 2);rectF.left = -maxRadius;rectF.top = -maxRadius;rectF.right = maxRadius;rectF.bottom = maxRadius;int size = items.size();int saveCount = canvas.save();canvas.translate(width * 1F / 2, height * 1F / 2); //平移坐标轴到view中心点canvas.rotate(-90); //逆时针旋转坐标轴 90度perDegree = 360 * 1F / size;// rangeDegree = start ->end// rangeDegree.start = perDegree/2 + (i-1) * perDegree;// rangeDegree.end = perDegree/2 + (i) * perDegree;for (int i = 0; i < size; i++) {//由于我们让第一个区域的中心点对准x轴了，所以(i-1)意味着从y轴负方向顺时针转动float startDegree = perDegree * (i - 1) + perDegree / 2 + offsetDegree;float endDegree = i * perDegree + perDegree / 2 + offsetDegree;Item item = items.get(i);mDrawerPaint.setColor(item.color);
//            double startDegreeRandians = Math.toRadians(startDegree); //x1
//            float x = (float) (maxRadius * Math.cos(startDegreeRandians));
//            float y = (float) (maxRadius * Math.sin(startDegreeRandians));
//            canvas.drawLine(0,0,x,y,mDrawerPaint);float centerRadius = (float) Math.toRadians((startDegree + endDegree)/2F);float measuredTextWidth = mDrawerPaint.measureText(item.text);float measuredTextHeight = getTextHeight(mDrawerPaint,item.text);float innerRadius = maxRadius - 2* measuredTextHeight;float cx = (float) ((innerRadius - measuredTextHeight)   * Math.cos(centerRadius));float cy = (float) ((innerRadius - measuredTextHeight)  * Math.sin(centerRadius));double degreeOffset = Math.asin((measuredTextWidth/2F)/innerRadius);float startX= (float) (innerRadius * Math.cos(centerRadius - degreeOffset));float startY = (float) (innerRadius * Math.sin(centerRadius - degreeOffset));float endX= (float) ((innerRadius) * Math.cos(centerRadius + degreeOffset));float endY = (float) ((innerRadius) * Math.sin(centerRadius + degreeOffset));path.reset();path.moveTo(startX,startY);path.lineTo(endX,endY);//这里使用Path的原因是文本角度无法设置canvas.drawArc(rectF, startDegree, endDegree - startDegree, true, mDrawerPaint);mDrawerPaint.setColor(Color.WHITE);canvas.drawCircle(cx,cy,5,mDrawerPaint);canvas.drawTextOnPath(item.text,path,0,0,mDrawerPaint);}canvas.drawLine(0, 0, maxRadius / 2F, 0, mDrawerPaint);canvas.restoreToCount(saveCount);}Rect textBounds = new Rect();//真实宽度 + 笔画上下两侧间隙（符合文本绘制基线）private  int getTextHeight(Paint paint,String text) {paint.getTextBounds(text,0,text.length(),textBounds);return textBounds.height();}public void setItems(List<Item> items) {this.items.clear();this.items.addAll(items);invalidate();}public static class Item {Object tag;int color = Color.TRANSPARENT;String text;public Item(int color, String text) {this.color = color;this.text = text;}}}

2.6 使用方法

List<LuckWheelView.Item> items = new ArrayList<>();items.add(new LuckWheelView.Item(argb(random.nextFloat(),random.nextFloat(),random.nextFloat()), "金元宝"));items.add(new LuckWheelView.Item(argb(random.nextFloat(),random.nextFloat(),random.nextFloat()), "皮卡丘"));items.add(new LuckWheelView.Item(argb(random.nextFloat(),random.nextFloat(),random.nextFloat()), "1元红包"));items.add(new LuckWheelView.Item(argb(random.nextFloat(),random.nextFloat(),random.nextFloat()), "全球旅行"));items.add(new LuckWheelView.Item(argb(random.nextFloat(),random.nextFloat(),random.nextFloat()), "K歌会员卡"));items.add(new LuckWheelView.Item(argb(random.nextFloat(),random.nextFloat(),random.nextFloat()), "双肩包"));loopView.setItems(items);loopView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {int index = (int) (Math.random() * items.size());Log.d("LuckWheelView", "setRotateIndex->" + items.get(index).text + ", index=" + index);loopView.setRotateIndex(index);}});

三、总结

本篇简单而快捷的实现了幸运转盘，难点主要是角度的转换，一定要分析出初始角度和目标位置的夹角这一个定性标准，其词作一些优化，就能实现幸运转盘效果。

这篇关于Android 幸运转盘实现逻辑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/476259。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
C++——stack、queue的实现及deque的介绍

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2