Canvas里的RectF及圆形抽奖转盘设计思路

2020-11-10  本文已影响0人  拿拿guardian

Canvas里的很多方法都会涉及到一个RectF。Rect是Rectangular的缩写,是矩形的意思。
Path的addArc方法,参数如下:

public void addArc(@NonNull RectF oval, float startAngle, float sweepAngle) 

意思是传入一个矩形oval,并且以startAngle为初始角度,画一个弧度为sweepAngle的矩形内切椭圆形区域。(可能表述不是很恰当,但大致是这么个意思)

抽奖转盘

1.找UI设计一个划分好抽奖区域的圆形转盘图片(比如说8分区)和中间的抽奖按钮指针icon。
2.在圆形抽奖转盘上用Canvas的drawTextOnPath方法画上文案,根据每段圆弧Path长度和文案长度,计算出X方向的偏移量,保证文案居中。
3.点击抽奖按钮指针,开始圆形转盘转动动画。

重写的自定义圆形转盘View的onDraw方法:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float r = getWidth() * 0.35f;
        float startX = getWidth() * 0.15f;
        float endX = getWidth() * 0.85f;
        float arcLen = r * 3.14f / 4; //每段弧度的长度

        mRectF.set(startX, startX, endX, endX);

        for (int i = 0, len = rotaryInfoList.size(); i < len; i++) {
            RotaryInfoResponse.DataBean data = rotaryInfoList.get(i);
            Log.d("franco", "getPrizeName = " + data.getPrizeName());

            Rect bounds = new Rect();
            mTextPainter.getTextBounds(data.getPrizeName(), 0, data.getPrizeName().length(), bounds);
            int textWidth = bounds.right - bounds.left; //文案长度

            Log.d("franco", "textWidth = " + textWidth);

            Path path = new Path();
            path.addArc(mRectF, 270 - 45 * (i + 1), 45); //创建一段圆弧Path,然后沿着圆弧Path画上文案
            canvas.drawTextOnPath(data.getPrizeName(), path, (arcLen - textWidth)/ 2.0f, 0, mTextPainter); //x方向有一段偏移量,保证文案居中
        }

    }
上一篇 下一篇

猜你喜欢

热点阅读