android的大转盘抽奖完美实现 |
您所在的位置：网站首页 › 自定义抽奖转盘源码 › android的大转盘抽奖完美实现 |
android的大转盘抽奖完美实现
|
效果图
网上有很多大转盘的例子，这个也是从网上找的，可是千篇一律，旋转结束后，会出现内圈小图片角度的问题，找了很多都有这个问题，怀疑都是一个源头来的，但是不符合我需求，所以做了进一步的修改。 效果实现 核心实现 public void drawWheel(Canvas canvas){ //绘制扇形 //设置每一个扇形的角度 sweepAngle = 360 / mCount; startAngle = -120; for (int i = 0; i < mCount; i++) { mArcPaint.setColor(sectorColor[i % 2]); //sectorRectF 扇形绘制范围 startAngle 弧开始绘制角度 sweepAngle 每次绘制弧的角度 // useCenter 是否连接圆心 canvas.drawArc(sectorRectF, startAngle, sweepAngle, true, mArcPaint); // //绘制二级小背景 canvas.drawArc(subBgRectF, startAngle, sweepAngle, true, mBgPaint); //3.绘制文字 drawTexts(canvas, textInfo[i]); //4.绘制图片 Bitmap bp = ((BitmapDrawable)getResources().getDrawable(mImages[i%2])).getBitmap(); drawIcons(canvas, bp); angles[i] = startAngle; Log.d(TAG, "onDraw: " + angles[i] + " " + i); startAngle += sweepAngle; } } 首先计算弧度，就是一个小扇形起始角度-120度，为什么呢，因为从0度开始绘画，但是绘画位置是偏离了120度，自己可以设置0度试一试，这个也是我踩过的坑绘制背景和小弧形绘制文字绘制icon图片（这个也有坑，因为图片的角度的问题，旋转的不是回到第一个，位置都不正确）绘制文字 private void drawTexts(Canvas canvas, String mString) { Path path = new Path(); //添加一个圆弧的路径 path.addArc(sectorRectF, startAngle, sweepAngle); String startText = null; String endText = null; //测量文字的宽度 float textWidth = mTextPainasureText(mString); //水平偏移 int hOffset = (int) (mRadius * 2 * Math.PI / mCount / 2 - textWidth / 2); //计算弧长 处理文字过长换行 int l = (int) ((360 / mCount) * Math.PI * mRadius / 180); if (textWidth > l * 4 / 5f) { int index = mString.length() / 2; startText = mString.substring(0, index); endText = mString.substring(index, mString.length()); float startTextWidth = mTextPainasureText(startText); float endTextWidth = mTextPainasureText(endText); //水平偏移 hOffset = (int) (mRadius * 2 * Math.PI / mCount / 2 - startTextWidth / 2); int endHOffset = (int) (mRadius * 2 * Math.PI / mCount / 2 - endTextWidth / 2); //文字高度 int h = (int) ((mTextPaint.ascent() + mTextPaint.descent()) * 1.5); //根据路径绘制文字 //hOffset 水平的偏移量 vOffset 垂直的偏移量 canvas.drawTextOnPath(startText, path, hOffset, mRadius / 6f, mTextPaint); canvas.drawTextOnPath(endText, path, endHOffset, mRadius / 6f - h, mTextPaint); } else { //根据路径绘制文字 StringBuilder builder = new StringBuilder(); for(int i = 0; i < mString.length(); i++) { String c = ""+ mString.charAt(i); builder.append(c.toLowerCase()); if(i+1 < mString.length()) { builder.append("\u00A0"); } } SpannableString finalText = new SpannableString(builder.toString()); if(builder.toString().length() > 1) { for(int i = 1; i < builder.toString().length(); i+=2) { finalText.setSpan(new ScaleXSpan((1+1)/10), i, i+1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } } canvas.drawTextOnPath(finalText.toString(), path, hOffset, mRadius / 6f, mTextPaint); } }这个主要是沿着路径绘画文字，里边多了一些显示的优化，比如文字之间的距离等等。 绘制icon图片 /** * 以二分之一的半径的长度，扇形的一半作为图片的中心点 * 图片的宽度为imageWidth */ private void drawIcons(Canvas canvas, Bitmap mBitmap) { int imageWidth = mRadius / 9; //计算半边扇形的角度 度=Math.PI/180 弧度=180/Math.PI float angle = (float) ((startAngle + sweepAngle / 2) * Math.PI / 180); //计算中心点的坐标 int r = mRadius / 2; float x = (float) (mCenter + r * Math.cos(angle)); float y = (float) (mCenter + r * Math.sin(angle)); //=================最终方案============= Matrix matrix = new Matrix(); matrix.postTranslate(x - imageWidth,y - imageWidth); matrix.postRotate(startAngle+120,x,y); //设置绘制图片的范围 canvas.drawBitmap(mBitmap,matrix,null); //================网上的方案=============== // RectF rectF = new RectF(x - imageWidth, y - imageWidth, x + imageWidth, y + imageWidth); // canvas.drawBitmap(mBitmap, null, rectF, null); } imagewidth是图片的大小，自己可以调节这里的最终方案是我优化过的方案，网上方案是很多网上的例子，其实这个就是在一个区域绘制icon而已，对于图片的旋转问题没有解决很感谢之前同学发布的例子，我是在那个上面修改的。找不到引用的地方，希望别侵权 下边是demo地址，大家可以按照自己的需求更改，以符合自己的需求，有不足的地方随时留言 demo下载 |
【本文地址】
今日新闻 |
推荐新闻 |