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);}});