自定义View：用Canvas实现转盘View

前两天道长的同学让道长帮忙做个控件，道长看到效果图和需求感觉挺有意思，然后就答应下来了。下面和小伙伴们分享一下制作过程。
效果图和需求就不给小伙伴们看了，需求大概就是转盘可以来回拖动，点击有标志显示。然后给小伙伴们看一下完成后的效果图（道长终于会弄动态图了，哈哈哈…）：

一、绘制

1.测量空间宽高

在onMeasure()中测量宽高并且设置宽高为宽高的最小值，代码如下：

    /**
     * 设置控件为正方形
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
        // 获取圆形的直径
        mRadius = width - mPadding - mBackgroundPadding;
        // 中心点
        mCenter = width / 2;
        setMeasuredDimension(width, width);
    }

2.绘制控件背景以及圆盘背景

小伙伴们应该都知道使用Canvas绘制View的话要从底层开始，不然的话会遮挡底层的展示。

    /**
     * 绘制控件背景以及圆盘背景
     */
    private void drawBackground() {

        mCanvas.drawBitmap(mBgBitmap, null, new Rect(0, 0, getMeasuredWidth(), getMeasuredWidth()), null);
        // 圆盘背景颜色设置
        mPaint.setColor(0x50000000);
        mCanvas.drawCircle(mCenter, mCenter, mCenter - mPadding, mPaint);
    }

3.绘制扇形以及扇形上的文字、背景

运用for循环绘制每一个扇形上的文字以及背景，代码如下：

   float tmpAngle = mStartAngle;
   float sweepAngle = (float) (360 / mItemCount);

  // 绘制扇形以及扇形上的文字、背景
   for (int i = 0; i < mItemCount; i++) {
       // 绘制扇形
       drawFanShaped(tmpAngle, sweepAngle, i);
       // 绘制扇形上的文本
       drawFanText(tmpAngle, sweepAngle, mStrs[i]);
//       drawFanText(tmpAngle, sweepAngle, "i:" + i + ":::" + (i * 60 + offset));

       // 移动到下一区域
       tmpAngle += sweepAngle;
   }

1)绘制扇形区域

• 计算偏置量
  首先计算出来每次拖动圆盘的偏置量，即转动角度，代码如下：

  // 计算偏置量
   float turnAngle = tmpAngle % 360;
   if (i == 0) {
       offset = turnAngle;
   }

我们看一下效果图：

• 矫正偏置量
  计算出来每次拖动圆盘的偏置量后进行矫正，矫正完成后我们就可以知道扇形转动到的角度，代码如下：

  // 矫正偏置量
   setRight = i * sweepAngle + offset;
   if (i * sweepAngle + offset > 360) {
       setRight = i * sweepAngle + offset - 360;
   } else if (i * sweepAngle + offset < 0) {
       setRight = i * sweepAngle + offset + 360;
   }

我们再看一下矫正后的效果图：

• 设置扇形的绘制区域
  我们这里要考虑到当扇形转动到0度边界的点击情况，代码如下：

        // 设置扇形区域边界
        if (setRight > 300) {
            if ((finalClickAngle >= setRight && finalClickAngle < 360) || (finalClickAngle >= 0 && finalClickAngle < setRight - 300)) {

                setClickZone();
                clickZone = i;
                drawSingle(setRight, sweepAngle);
            } else {
                setDefaultZone();
            }
        } else {
            if (finalClickAngle >= setRight && finalClickAngle < setRight + sweepAngle) {

                setClickZone();
                clickZone = i;
                drawSingle(setRight, sweepAngle);
            } else {
                setDefaultZone();
            }
        }

    /**
     * 默认扇形区域边界
     */
    private void setDefaultZone() {
        mRange = new RectF(mPadding + mBackgroundPadding, mPadding + mBackgroundPadding, mRadius, mRadius);
    }

    /**
     * 设置点击扇形区域边界
     */
    private void setClickZone() {
        mRange = new RectF(mPadding + mScalePadding, mPadding + mScalePadding,
                mRadius - mScalePadding + mBackgroundPadding, mRadius - mScalePadding + mBackgroundPadding);
    }

• 图片渲染绘制扇形图片
  由于扇形的背景是由图片绘制，所以我们这里要用到图片渲染，代码如下：

        setFanPaintShader(i);
        mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true, mBitmapPaint);

   /**
     * 设置扇形渲染对象
     *
     * @param i
     */
    private void setFanPaintShader(int i) {

        // 创建Bitmap渲染对象
        mBitmapShader = new BitmapShader(mImgsBitmap[i], Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        // 比较bitmap宽和高，获得较小值
        int bSize = Math.min(mImgsBitmap[i].getWidth(), mImgsBitmap[i].getHeight());
        scale = mRadius * 1.0f / bSize;

        // shader的变换矩阵，用于放大或者缩小
        mMatrix.setScale(scale, scale);
        // 设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        // 设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }

• 绘制扇形上的文字
  我们看到扇形上的文字居中而且成弧形，通过计算偏移量，以及矫正让文字居中，代码如下：

    /**
     * 绘制扇形上的文本
     *
     * @param startAngle
     * @param sweepAngle
     * @param string
     */
    private void drawFanText(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);
    }

1)绘制中心遮挡区域

• 绘制中心遮挡区域的背景

中心遮挡区域的背景可以看到是有透视效果，其实也是通过和控件背景同一个图片渲染，代码如下：

    /**
     * 绘制中心遮挡圆背景
     */
    private void drawCenterBg() {
        setCirclePaintShader();
        mCanvas.drawCircle(mCenter, mCenter, mCenter / 2, mCircleBitmapPaint);
    }

   /**
     * 设置中心遮挡圆渲染对象
     */
    private void setCirclePaintShader() {

        // 创建Bitmap渲染对象
        mCircleBitmapShader = new BitmapShader(mBgBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        // 比较bitmap宽和高，获得较小值
        int bSize = Math.min(mBgBitmap.getWidth(), mBgBitmap.getHeight());
        scale = mRadius * 1.0f / bSize;

        // shader的变换矩阵，用于放大或者缩小
        mCircleMatrix.setScale(scale, scale);
        // 设置变换矩阵
        mCircleBitmapShader.setLocalMatrix(mCircleMatrix);
        // 设置shader
        mCircleBitmapPaint.setShader(mCircleBitmapShader);
    }

• 绘制中心遮挡的文字

中心遮挡的文字的设置比较简单，但是要计算文字的偏置量，通过矫正让文字居中，代码如下：

    /**
     * 绘制中心遮挡的文字
     *
     * @param str
     */
    private void drawCenterText(String str) {

        float textWidth = mTextPaint.measureText(str);
        // 利用偏移让文字居中
        float hOffset = textWidth / 2;// 水平偏移
        float vOffset = mTextSize / 4;// 垂直偏移
        mCanvas.drawText(str, mCenter - hOffset, mCenter + vOffset, mTextPaint);
    }

到了这里，整个空间的绘制已经完成，下面看一下转盘的拖动以及点击。效果图如下：

二、动作

1.转盘的拖动以及点击

这里我们先看一下onTouchEvent()中关于点击事件的处理，代码如下：

   @Override
    public boolean onTouchEvent(MotionEvent event) {
        start();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                // 每次转动圆盘都要去掉点中区域
                finalClickAngle = -1;
                isClick = false;
                break;
            case MotionEvent.ACTION_MOVE:

                // 圆心的下方
                if (downY - mCenter >= 0) {
                    distanceX = -(event.getX() - downX);
                } else {// 圆心的上方
                    distanceX = event.getX() - downX;
                }

                // 圆心的右方
                if (downX - mCenter >= 0) {
                    distanceY = event.getY() - downY;
                } else {// 圆心的左方
                    distanceY = -(event.getY() - downY);
                }

                // 圆盘转动的距离
                if (Math.abs(distanceY) - Math.abs(distanceX) >= 0) {
                    distance = distanceY;
                } else {
                    distance = distanceX;
                }

                // 每隔30px采集一次定位点
                if (Math.abs(distance) >= 30) {
                    downX = event.getX();
                    downY = event.getY();
                }

                // 圆盘移动误差矫正
                float moveDistance = disTemp - Math.abs(distance);
                if (moveDistance < 5 && moveDistance >= 0) {
                    distance = 0;
                } else {
                    disTemp = Math.abs(distance);
                }

                // 圆盘转动状态设置
                if (Math.abs(distance) < 5) {
                    distance = 0;
                    turnState = true;
                } else {
                    turnState = false;
                }

                // 点击误差矫正
                if (Math.abs(distance) > 5) {
                    isClick = true;
                }
                break;
            case MotionEvent.ACTION_UP:
                // 每项角度大小
                float angle = (float) (360 / mItemCount);

                // 角度 = Math.atan((dpPoint.y-dpCenter.y) / (dpPoint.x-dpCenter.x)) / π（3.14） * 180
                double clickAngle = Math.atan((downY - mCenter) / (downX - mCenter)) / Math.PI * 180;

                // 点击区域
                int zone = (int) (clickAngle / angle);
                float overflow = (float) (clickAngle % angle);
                // 点击角度的矫正
                // 圆心的下方
                if (downY - mCenter >= 0) {
                    if (overflow >= 0) {
                        finalClickAngle = (float) clickAngle;
                    } else {
                        finalClickAngle = (float) clickAngle + 180;
                    }
                } else {// 圆心的上方
                    if (overflow >= 0) {
                        finalClickAngle = (float) clickAngle + 180;
                    } else {
                        finalClickAngle = (float) clickAngle + 360;
                    }
                }

                if (isClick == false) {
                    // 调用回调接口
                    clickZone();
                } else {
                    // 每次转动圆盘都要去掉点中区域
                    finalClickAngle = -1;
                }

                turnState = true;
                break;
        }
        return true;
    }

• 回调接口调用
  由于流程控制先点击后绘制，所以在视觉上就会存在延时。所以回调接口调用要延时100ms，代码如下：

    /**
     * 回调点击区域
     */
    private void clickZone() {
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                if (distance == 0) {
                    mViewOnClickListener.onClicked(clickZone);
                }
            }
        }, 100);
    }

• 点击区域标志的绘制
  由于点击区域标志显示在每个扇形区域的中间，所以就要通过角度计算出标志的坐标。代码如下：

    /**
     * 绘制点击区域的标志
     *
     * @param angle
     * @param sweepAngle
     */
    private void drawSingle(float angle, float sweepAngle) {
        mPaint.setColor(Color.BLUE);
        // 计算标志的坐标
        // positionX = Math.sin(Math.PI*角度/180) * R       positionY = Math.cos(Math.PI*角度/180) * R
        float positionX = (float) (Math.cos(Math.PI * (angle + sweepAngle / 2) / 180) * mCenter);
        float positionY = (float) (Math.sin(Math.PI * (angle + sweepAngle / 2) / 180) * mCenter);

        mCanvas.drawCircle(mCenter + positionX, mCenter + positionY, 20, mPaint);
    }

2.不断绘制

由于不断绘制View属于耗时操作，所以我们要开启一个线程，在子线程中不断绘制。代码如下：

    /**
     * 开启线程
     */
    public void start() {
        threadState = true;
        stopTime = 0;
        if (thread != null && thread.isAlive()) {
            if (DEBUG) {
                Log.e("yushan", "start: thread is alive");
            }
        } else {
            thread = new Thread(new Runnable() {
                @Override
                public void run() {
                    // 不断的进行绘制
                    while (threadState) {
                        long start = System.currentTimeMillis();
                        draw();
                        long end = System.currentTimeMillis();
                        long pieTime = end - start;
                        stopTime += pieTime;
                        try {
                            if (pieTime < 50) {
                                Thread.sleep(50 - pieTime);
                            }
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }

                        // 3秒不操作就休眠
                        if (stopTime >= 3000) {
                            stop();
                        }
                    }

                    if (DEBUG) {
                        Log.i("yushan", "run: thread stopping");
                    }
                }
            });
            thread.start();
        }
    }

    /**
     * 关闭线程
     */
    public void stop() {
        if (threadState) {
            threadState = false;
        }
    }

三、优化

1.矫正

在刚才的代码中已经贴过了，就不一一贴了，就是一些转盘转动矫正，点击矫正什么的（主要是道长有些懒，不想贴了）。

2.休眠

不停地绘制View非常耗电，而且占用大量手机内存，容易造成内存溢出。所以道长设置每过3s，只要不操作View，View就停止绘制。小伙伴们也可以自己设置。

这篇博客暂时就到这里了，希望这篇博客能够为小伙伴们提供一些帮助。如果有更好的优化或者改进希望小伙伴们可以告知道长。源码贴在下面。

源码下载

CoronaDemo

---