美文网首页
Canvas里的RectF及圆形抽奖转盘设计思路

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

作者: 拿拿guardian | 来源:发表于2020-11-10 09:42 被阅读0次

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方向有一段偏移量,保证文案居中
        }

    }

相关文章

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

    Canvas里的很多方法都会涉及到一个RectF。Rect是Rectangular的缩写,是矩形的意思。Path的...

  • css3 转盘抽奖实践(sass)

    思路解释 转盘抽奖,就是像这样子的转盘。(如下图)点击中间的“点击抽奖”按钮,然后后面的圆形转盘开始转动,最后停在...

  • canvas实现转盘抽奖

    用canvas写了一个简单的转盘抽奖插件, 给大家参考下下。。。 做的时候的想法是,通过传进来的标签以及属性,直接...

  • Android Canvas绘图

    Android Canvas绘图详解包括RectF,canvas.drawArc等,收藏.

  • 抽奖转盘的简单思路

    抽奖大概是有个旋转的转盘,然后点击开始后,就可以开始转动转盘,同时也在跟后端发送验证请求,然后得到请求之后,开始不...

  • 【Java 实战】实现大转盘抽奖

    项目场景 实现一个大转盘抽奖的功能,能后台自定义奖项,各奖项中奖概率,奖品数量,当日抽奖最大次数等。 一、设计思路...

  • canvas大转盘

    下面再介绍一个canvas实例,使用canvas技术实现一个大转盘,在抽奖中用的比较多,实现后的效果如果所示: 第...

  • Scratch—转盘抽奖

    【知识延伸】 传统抽奖分为抽奖盒抽取、转盘抽奖等 【要求】 今天我们按照平时转盘抽奖、利用Scratch做一个转盘...

  • vue+canvas绘转盘抽奖总结

    实现目标 旁边的不管,是贴图,主要是中心区域:1、先用ctx.arc画出扇形并填充颜色2、在相应的扇形内填充奖品的...

  • Vue中可配置的圆形抽奖转盘组件

    一、整个抽奖流程的思路分析: 点击了转盘正中间的指针(即开始抽奖按钮),判断是否可以转动(具体逻辑封装在canBe...

网友评论

      本文标题:Canvas里的RectF及圆形抽奖转盘设计思路

      本文链接:https://www.haomeiwen.com/subject/cemdbktx.html