乐趣区

关于harmonyos:49HarmonyOS鸿蒙开发自定义组件幸运盘抽奖

jiezi

4.9【HarmonyOS 鸿蒙开发】自定义组件 - 侥幸盘抽奖 (附带源码)

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

一、我的项目介绍

当零碎提供的组件无奈满足设计需要时，您能够创立自定义组件，依据设计需要自定义组件的属性及响应事件，并绘制组件。自定义组件是在组件预留的两个自定义图层中实现绘制，通过 addDrawTask 办法增加绘制工作，最终与组件的其它图层合成在一起出现在界面中。

实现思路：

  1. 创立自定义组件的类，并继承 Component 或其子类，增加构造方法。
  2. 实现 Component.DrawTask 接口，在 onDraw 办法中进行绘制。
  3. 依据自定义组件须要实现的性能，去抉择实现相应的接口。例如可实现 Component.EstimateSizeListener 响应测量事件、Component.TouchEventListener 响应触摸事件、Component.ClickedListener 响应点击事件、Component.LongClickedListener 响应长按事件、Component.DoubleClickedListener 响应双击事件等。
  4. 本教程实现圆形抽奖转盘性能，要实现如下接口：
    a) 须要实现获取屏幕宽高度、中心点坐标，所以实现 Component.EstimateSizeListener 接口，重写 onEstimateSize 办法。
    b) 须要实现点击核心圆盘区域地位开始抽奖性能，所以实现 Component.TouchEventListener，重写 onTouchEvent 办法。

留神：应用自定义组件实现 Component.EstimateSizeListener 接口须要 HarmonyOS SDK 版本在 2.1.0.13 或以上。

二、我的项目展现

自定义圆形抽奖转盘示例工程的代码工程构造形容如下：

  • customcomponent：LuckyCirclePanComponent 自定义圆形抽奖转盘组件类，绘制圆形抽奖转盘，并实现抽奖成果。
  • slice：MainAbilitySlice 本示例教程起始页面，提供界面入口。

  • utils：工具类

    • ColorUtils 色彩工具类，对绘制圆盘所需 RGB 色彩进行封装。
    • LogUtils 日志打印类，对 HiLog 日志进行了封装。
    • PixelMapUtils 图片工具类，次要是加载本地图片资源，通过本地图片资源的 resourceId，将图片转换成 PixelMap 类型。
    • ToastUtils 弹窗工具类，抽奖完结后，弹出抽奖后果信息。
  • MainAbility：主程序入口，DevEco Studio 生成，未增加逻辑，无需变更。
  • MyApplication：DevEco Studio 主动生成，无需变更。

  • resources：寄存工程应用到的资源文件

    • resources\base\element 中寄存 DevEco studio 主动生成的配置文件 string.json，无需变更。
    • resources\base\graphic 中寄存页面款式文件，本示例教程通过自定义组件实现，没有定义页面款式，无需变更。
    • resources\base\layout 中布局文件，本示例教程通过自定义组件实现，没有定义页面布局，无需变更。
    • resources\base\media 下寄存图片资源，本示例教程应用了 5 张.png 图片，用于设置与奖品绝对应的图片，开发者可自行筹备；icon.png 由 DevEco Studio 主动生成，无需变更。
  • config.json：配置文件。

三、实现步骤

1、创立一个包 customcomponent，创立自定义组件的类 LuckyCirclePanComponent，并继承 Component 或其子类，增加构造方法。

/**
 * LuckyCirclePanComponent 类，实现自定义组件，绘制圆形抽奖转盘，并实现抽奖成果。*/
public class LuckyCirclePanComponent extends Component implements Component.DrawTask, 
    Component.EstimateSizeListener, Component.TouchEventListener {public LuckyCirclePanComponent(Context context) {super(context); 
        this.context = context; 
        // 初始化画笔 
        initPaint(); 
        // 获取屏幕的宽高度、中心点坐标，调用 onEstimateSize 办法 
        setEstimateSizeListener(this); 
        // 增加绘制工作，调用 onDraw 办法 
        addDrawTask(this); 
        // 实现点击核心圆盘区域地位开始抽奖性能，调用 onTouchEvent 办法 
        setTouchEventListener(this); 
    } 
}

2、实现 Component.DrawTask 接口，在 onDraw 办法中进行绘制。

@Override 
public void onDraw(Component component, Canvas canvas) { 
    // 将画布沿 X、Y 轴平移指定间隔 
    canvas.translate(centerX, centerY); 
    // 画内部圆盘的花瓣 
    drawFlower(canvas); 
    // 画内部圆盘、小圈圈、五角星 
    drawOutCircleAndFive(canvas); 
    // 画外部扇形抽奖区域 
    drawInnerArc(canvas); 
    // 画外部扇形区域文字 
    drawArcText(canvas); 
    // 画外部扇形区域奖品对应的图片 
    drawImage(canvas); 
    // 画核心圆盘和指针 
    drawCenter(canvas); 
}

3、获取屏幕大小、中心点

实现 Component.EstimateSizeListener 接口，重写 onEstimateSize 办法，获取屏幕的宽高度 width、height 及中心点坐标 centerX、centerY。

@Override 
public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {int componentWidth = EstimateSpec.getSize(widthEstimateConfig); 
        int componentHeight = EstimateSpec.getSize(heightEstimateConfig); 
        this.width = componentWidth; 
        this.height = componentHeight; 
        centerX = this.width / TWO; 
        centerY = this.height / TWO; 
        setEstimatedSize(EstimateSpec.getChildSizeWithMode(componentWidth, componentWidth, EstimateSpec.PRECISE), 
        
        EstimateSpec.getChildSizeWithMode(componentHeight, componentHeight, EstimateSpec.PRECISE) 
        ); 
        return true; 
}

4、画内部圆盘

A. 先画内部圆盘的花瓣：通过调用 Canvas 的 rotate() 办法，将画布旋转指定角度。通过调用 Canvas 的 save() 和 restore() 办法，使画布保留最新的绘制状态。依据想要绘制的花瓣个数，扭转旋转角度，循环画出花瓣成果。

/**
 * 内部圆盘的花瓣
 * @param canvas
 */
private void drawFlower(Canvas canvas) { 
    float beginAngle = startAngle + avgAngle; 
    float radius = centerX - padding; 
    for (int i = 0; i < COUNT; i++) {canvas.save(); 
        canvas.rotate(beginAngle, 0F, 0F); 
        paintFlower.setColor(ColorUtils.PAINT_FLOWER_YELLOW); 
        canvas.drawCircle(-radius / TWO, radius / TWO, radius / TWO, paintFlower); 
 
        paintFlower.setColor(ColorUtils.PAINT_FLOWER_PINK); 
        canvas.drawCircle(-radius / TWO, radius / TWO, (radius - padding) / TWO, paintFlower); 
        beginAngle += avgAngle; 
        canvas.restore();} 
}

B. 画内部圆盘：在指定的 X、Y（0F, 0F）坐标处，画一个半径为 centerX – padding 的圆形（其实就是绘制一个红色的圆盘）。

paintOutCircle.setColor(ColorUtils.PAINT_OUT_CIRCLE); 
canvas.drawCircle(0F, 0F, centerX - padding, paintOutCircle);

C. 画内部圆盘边上的小圈圈和五角星：接下来一个 for 循环，且角度每次递增 (avgAngle / THREE)，就是绘制圆环上的小圈圈和五角星了。因为是交替绘制五角星和小圈圈，所以用一个条件判断语句去绘制。

float beginAngle = startAngle + avgAngle / THREE; 
for (int i = 0; i < COUNT * THREE; i++) {canvas.save(); 
    canvas.rotate(beginAngle, 0F, 0F); 
    if (0 == i % TWO) {paintOutCircle.setColor(Color.WHITE); 
        canvas.drawCircle(centerX - padding - padding / TWO, 0F, vp2px(FIVE), paintOutCircle); 
    } else {paintFiveStart(canvas); 
    } 
    beginAngle += avgAngle / THREE; 
    canvas.restore();}

D. 画五角星：通过计算获取到五角星的 5 个顶点地位（计算根据：五角星每个角的角度为 36°，而后依据三角函数即可算出各个点的坐标），再应用 Canvas、Path、Paint 将 5 个顶点通过画线连贯在一起，就实现了五角星的绘制。

/**
     * 画五角星
     * @param canvas
     */
    private void paintFiveStart(Canvas canvas) { 
        // 画五角星的 path 
        Path path = new Path();
        float[] points = fivePoints(centerX - padding - padding / TWO, 0F, padding); 
        for (int i = 0; i < points.length - 1; i = i + TWO) {path.lineTo(points[i], points[i + 1]); 
        } 
        path.close(); 
        canvas.drawPath(path, paintFive); 
    }
    /**
     * fivePoints 获取五角星的五个顶点
     *
     * @param pointXa 起始点 A 的 x 轴相对地位
     * @param pointYa 起始点 A 的 y 轴相对地位
     * @param sideLength 五角星的边长
     * @return 五角星 5 个顶点坐标
     */
    private static float[] fivePoints(float pointXa, float pointYa, float sideLength) {
        final int eighteen = 18;
        float pointXb = pointXa + sideLength / TWO;
        double num = sideLength * Math.sin(Math.toRadians(eighteen));
        float pointXc = (float) (pointXa + num);
        float pointXd = (float) (pointXa - num);
        float pointXe = pointXa - sideLength / TWO;
        float pointYb = (float) (pointYa + Math.sqrt(Math.pow(pointXc - pointXd, TWO)
                - Math.pow(sideLength / TWO, TWO)));
        float pointYc = (float) (pointYa + Math.cos(Math.toRadians(eighteen)) * sideLength);
        float pointYd = pointYc;
        float pointYe = pointYb;
        float[] points = new float[]{pointXa, pointYa, pointXd, pointYd, pointXb, pointYb,
                pointXe, pointYe, pointXc, pointYc, pointXa, pointYa};
        return points;
    }

5、画外部扇形抽奖区域

A. 画抽奖区域扇形：应用 RectFloat 和 Arc 对象绘制弧，rect 示意圆弧突围矩形的左上角和右下角的坐标，参数 new Arc(startAngle, avgAngle, true) 示意圆弧参数，例如起始角度、后掠角以及是否从圆弧的两个端点到其核心绘制直线。

        /**
     * 画抽奖区域扇形
     * @param canvas
     */
    private void drawInnerArc(Canvas canvas) {float radius = Math.min(centerX, centerY) - padding * TWO; 
        RectFloat rect = new RectFloat(-radius, -radius, radius, radius);
        for (int i = 0; i < COUNT; i++) {paintInnerArc.setColor(colors[i]); 
            canvas.drawArc(rect, new Arc(startAngle, avgAngle, true), paintInnerArc);
            startAngle += avgAngle; 
        } 
    }

B. 画抽奖区域文字：利用 Path，创立绘制门路，增加 Arc，而后设置程度和垂直的偏移量。垂直偏移量 radius / FIVE 就是以后 Arc 朝着圆心挪动的间隔；程度偏移量，就是顺时针去旋转，程度偏移 (Math.sin(avgAngle / CIRCLE Math.PI) radius) – measureWidth / TWO，是为了让文字在以后弧范畴文字居中。最初，用 path 去绘制文本。

        /**
     * 画抽奖区域文字
     * @param canvas
     */
    private void drawArcText(Canvas canvas) {for (int i = 0; i < COUNT; i++) { 
            // 创立绘制门路 
            Path circlePath = new Path(); 
            float radius = Math.min(centerX, centerY) - padding * TWO; 
            RectFloat rect = new RectFloat(-radius, -radius, radius, radius); 
            circlePath.addArc(rect, startAngle, avgAngle); 
            float measureWidth = paintArcText.measureText(textArrs[i]); 
            // 偏移量 
            float advance = (float) ((Math.sin(avgAngle / CIRCLE * Math.PI) * radius) - measureWidth / TWO); 
            canvas.drawTextOnPath(paintArcText, textArrs[i], circlePath, advance, radius / FIVE); 
            startAngle += avgAngle; 
        } 
    }

C. 画抽奖区域文字对应图片：pixelMaps 示意文字对应的图片 ResourceId 转换成 PixelMap 的数组，pixelMapHolderList 示意将 PixelMap 转换成 PixelMapHolder 图片 List，dst 示意 PixelMapHolder 对象的左上角（-imageHeight / TWO，imageHeight / TWO）和右下角（centerX / THREE + imageWidth，centerX / THREE）的坐标。

/**
     * 画抽奖区域文字对应图片
     * @param canvas
     */
    private void drawImage(Canvas canvas) { 
        float beginAngle = startAngle + avgAngle / TWO; 
        for (int i = 0; i < COUNT; i++) {int imageWidth = pixelMaps[i].getImageInfo().size.width; 
            int imageHeight = pixelMaps[i].getImageInfo().size.height; 
            canvas.save(); 
            canvas.rotate(beginAngle, 0F, 0F); 
            // 指定图片在屏幕上显示的区域 
            RectFloat dst = new RectFloat(centerX / THREE, -imageHeight / TWO, 
                    centerX / THREE + imageWidth, imageHeight / TWO); 
            canvas.drawPixelMapHolderRect(pixelMapHolderList.get(i), dst, paintImage); 
            beginAngle += avgAngle; 
            canvas.restore();} 
    } 
 
    // 将 pixelMap 转换成 PixelMapHolder 
    private void pixelMapToPixelMapHolder() {pixelMapHolderList = new ArrayList<>(pixelMaps.length);
        for (PixelMap pixelMap : pixelMaps) {pixelMapHolderList.add(new PixelMapHolder(pixelMap)); 
        } 
    }

6、画核心圆盘和指针

A. 画核心圆盘大指针：通过 Path，确定要挪动的三个点的坐标 (-centerX / nine, 0F)、(centerX / nine, 0F)、(0F, -centerX / THREE)，去绘制指针。

        /**
     * 画核心圆盘和指针
     * @param canvas
     */
    private void drawCenter(Canvas canvas) { 
        final int nine = 9; 
        final int seven = 7; 
        final int eighteen = 18; 
        // 画大指针 
        Path path = new Path(); 
        path.moveTo(-centerX / nine, 0F); 
        path.lineTo(centerX / nine, 0F); 
        path.lineTo(0F, -centerX / THREE); 
        path.close(); 
        canvas.drawPath(path, paintPointer); 
    }

B. 画外部大圆和小圆：在圆盘圆心处，绘制两个半径别离为 centerX / seven + padding / TWO、centerX / seven 的核心圆盘。

// 画外部大圆 
paintCenterCircle.setColor(ColorUtils.PAINT_POINTER); 
canvas.drawCircle(0F, 0F, centerX / seven + padding / TWO, paintCenterCircle); 
// 画外部小圆 
paintCenterCircle.setColor(Color.WHITE); 
canvas.drawCircle(0F, 0F, centerX / seven, paintCenterCircle);

C. 画核心圆盘小指针：与步骤 1 中画核心圆盘大指针相似，通过 Path 去绘制核心圆盘小指针。

Path smallPath = new Path(); 
smallPath.moveTo(-centerX / eighteen, 0F); 
smallPath.lineTo(centerX / eighteen, 0F); 
smallPath.lineTo(0F, -centerX / THREE + padding / TWO); 
smallPath.close(); 
canvas.drawPath(smallPath, paintSmallPoint);

D. 画核心圆弧文字：通过 Paint 的 getFontMetrics() 办法，获取绘制字体的倡议行距，而后依据倡议行距去绘制文本。

Paint.FontMetrics fontMetrics = paintCenterText.getFontMetrics(); 
float textHeight = (float) Math.ceil(fontMetrics.leading - fontMetrics.ascent); 
canvas.drawText(paintCenterText, "开始", 0F, textHeight / THREE);

7、实现抽奖性能

A. 实现 Component.TouchEventListener 接口，重写 onTouchEvent 办法，获取屏幕上点击的坐标，当点击的范畴在核心圆盘区域时，圆形转盘开始转动抽奖。

@Override 
public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
    final int seven = 7; 
    switch (touchEvent.getAction()) { 
        case TouchEvent.PRIMARY_POINT_DOWN: 
            // 获取屏幕上点击的坐标 
            float floatX = touchEvent.getPointerPosition(touchEvent.getIndex()).getX(); 
            float floatY = touchEvent.getPointerPosition(touchEvent.getIndex()).getY(); 
            float radius = centerX / seven + padding / TWO; 
            boolean isScopeX = centerX - radius < floatX && centerX + radius > floatX; 
            boolean isScopeY = centerY - radius < floatY && centerY + radius > floatY; 
            if (isScopeX && isScopeY && !animatorVal.isRunning()) {startAnimator(); 
            } 
            break; 
        case TouchEvent.PRIMARY_POINT_UP: 
            // 松开勾销 
            invalidate(); 
            break; 
        default: 
            break; 
    } 
    return true; 
}

2、圆形转盘开始转动抽奖：给转盘指定一个随机的转动角度 randomAngle，保障每次转动的角度是随机的（即每次抽到的奖品也是随机的），而后设置动画挪动的曲线类型，这里抽奖设置的是 Animator.CurveType.DECELERATE 示意动画疾速开始而后逐步加速的曲线。动画完结后，转盘进行转动（即抽奖完结），会弹出抽中的奖品提示信息。

        /**
     * 圆形转盘开始转动抽奖
     */
    private void startAnimator() { 
        final int angle = 270; 
        startAngle = 0; 
        // 动画时长 
        final long animatorDuration = 4000L; 
        // 随机角度 
        int randomAngle = new SecureRandom().nextInt(CIRCLE);
        animatorVal.setCurveType(Animator.CurveType.DECELERATE);
        animatorVal.setDuration(animatorDuration); 
        animatorVal.setValueUpdateListener((AnimatorValue animatorValue, float value) -> {startAngle = value * (CIRCLE * FIVE - randomAngle + angle); 
            invalidate();}); 
        stateChangedListener(animatorVal, randomAngle); 
        animatorVal.start();}

四、运行

附带源码

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com

退出移动版