返回发烧友论坛
发 帖  

[文章]通过一个圆形抽奖转盘演示HarmonyOS自定义组件的实现

红旧衫
2021-09-22 14:41:33
阅读量0
HarmonyOS自定义组件
0
4
1. 介绍      
当系统提供的组件无法满足设计需求时，您可以创建自定义组件，根据设计需求自定义组件的属性及响应事件，并绘制组件。自定义组件是在组件预留的两个自定义图层中实现绘制，通过addDrawTask方法添加绘制任务，最终与组件的其它图层合成在一起呈现在界面中。

实现思路：
  • 创建自定义组件的类，并继承Component或其子类，添加构造方法。
  • 实现Component.DrawTask接口，在onDraw方法中进行绘制。
  • 根据自定义组件需要完成的功能，去选择实现相应的接口。例如可实现Component.EstimateSizeListener响应测量事件、Component.TouchEventListener响应触摸事件、Component.ClickedListener响应点击事件、Component.LongClickedListener响应长按事件、Component.DoubleClickedListener响应双击事件等。
  • 本教程实现圆形抽奖转盘功能，要实现如下接口：
    a) 需要实现获取屏幕宽高度、中心点坐标，所以实现Component.EstimateSizeListener接口，重写onEstimateSize方法。
    b) 需要实现点击中心圆盘区域位置开始抽奖功能，所以实现Component.TouchEventListener，重写onTouchEvent方法。
说明
使用自定义组件实现Component.EstimateSizeListener接口需要HarmonyOS SDK版本在2.1.0.13或以上。

本教程将通过以下内容为您展示如何使用自定义组件实现圆形抽奖转盘功能。

2. 搭建HarmonyOS环境
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

  • 安装DevEco Studio，详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境，DevEco Studio开发环境依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  • 开发者可以参考以下链接，完成设备调试的相关配置：
    • 使用真机进行调试
    • 使用模拟器进行调试
3. 基本步骤
  • 创建自定义组件的类，并继承Component或其子类，添加构造方法。
    1. public class LuckyCirclePanComponent extends Component implements Component.DrawTask,
    2.         Component.EstimateSizeListener, Component.TouchEventListener {
    3.         public LuckyCirclePanComponent(Context context) {
    4.                 super(context);
    5.                 this.context = context;
    6.                 // 初始化画笔
    7.                 initPaint();
    8.                 // 获取屏幕的宽高度、中心点坐标，调用onEstimateSize方法
    9.                 setEstimateSizeListener(this);
    10.                 // 添加绘制任务，调用onDraw方法
    11.                 addDrawTask(this);
    12.                 // 实现点击中心圆盘区域位置开始抽奖功能，调用onTouchEvent方法
    13.                 setTouchEventListener(this);
    14.         }
    15. }
    复制代码

  • 实现Component.DrawTask接口，在onDraw方法中进行绘制。
    1. [url=home.php?mod=space&uid=2735960]@Override[/url]
    2. public void onDraw(Component component, Canvas canvas) {
    3.         // 将画布沿X、Y轴平移指定距离
    4.         canvas.translate(centerX, centerY);
    5.         // 画外部圆盘的花瓣
    6.         drawFlower(canvas);
    7.         // 画外部圆盘、小圈圈、五角星
    8.         drawOutCircleAndFive(canvas);
    9.         // 画内部扇形抽奖区域
    10.         drawInnerArc(canvas);
    11.         // 画内部扇形区域文字
    12.         drawArcText(canvas);
    13.         // 画内部扇形区域奖品对应的图片
    14.         drawImage(canvas);
    15.         // 画中心圆盘和指针
    16.         drawCenter(canvas);
    17. }
    复制代码


4. 获取屏幕大小、中心点
实现Component.EstimateSizeListener接口，重写onEstimateSize方法，获取屏幕的宽高度width、height及中心点坐标centerX、centerY。
  1. @Override
  2. public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
  3.         int componentWidth = EstimateSpec.getSize(widthEstimateConfig);
  4.         int componentHeight = EstimateSpec.getSize(heightEstimateConfig);
  5.         this.width = componentWidth;
  6.         this.height = componentHeight;
  7.         centerX = this.width / TWO;
  8.         centerY = this.height / TWO;
  9.         setEstimatedSize(
  10.         
  11.         EstimateSpec.getChildSizeWithMode(componentWidth, componentWidth, EstimateSpec.PRECISE),
  12.         
  13.         EstimateSpec.getChildSizeWithMode(componentHeight, componentHeight, EstimateSpec.PRECISE)
  14.         );
  15.         return true;
  16. }
复制代码

5. 画外部圆盘
  • 画外部圆盘的花瓣：通过调用Canvas的rotate()方法，将画布旋转指定角度。通过调用Canvas的save()和restore()方法，使画布保存最新的绘制状态。根据想要绘制的花瓣个数，改变旋转角度，循环画出花瓣效果。
    1. private void drawFlower(Canvas canvas) {
    2.         float beginAngle = startAngle + avgAngle;
    3.         float radius = centerX - padding;
    4.         for (int i = 0; i < COUNT; i++) {
    5.                 canvas.save();
    6.                 canvas.rotate(beginAngle, 0F, 0F);
    7.                 paintFlower.setColor(ColorUtils.PAINT_FLOWER_YELLOW);
    8.                 canvas.drawCircle(-radius / TWO, radius / TWO, radius / TWO, paintFlower);

    10.                 paintFlower.setColor(ColorUtils.PAINT_FLOWER_PINK);
    11.                 canvas.drawCircle(-radius / TWO, radius / TWO, (radius - padding) / TWO, paintFlower);
    12.                 beginAngle += avgAngle;
    13.                 canvas.restore();
    14.         }
    15. }
    复制代码

  • 画外部圆盘：在指定的X、Y（0F, 0F）坐标处，画一个半径为centerX - padding的圆形（其实就是绘制一个红色的圆盘）。
    1. paintOutCircle.setColor(ColorUtils.PAINT_OUT_CIRCLE);
    2. canvas.drawCircle(0F, 0F, centerX - padding, paintOutCircle);
    复制代码

  • 画外部圆盘边上的小圈圈和五角星：接下来一个for循环，且角度每次递增(avgAngle / THREE)，就是绘制圆环上的小圈圈和五角星了。因为是交替绘制五角星和小圈圈，所以用一个条件判断语句去绘制。
    1. float beginAngle = startAngle + avgAngle / THREE;
    2. for (int i = 0; i < COUNT * THREE; i++) {
    3.         canvas.save();
    4.         canvas.rotate(beginAngle, 0F, 0F);
    5.         if (0 == i % TWO) {
    6.                 paintOutCircle.setColor(Color.WHITE);
    7.                 canvas.drawCircle(centerX - padding - padding / TWO, 0F, vp2px(FIVE), paintOutCircle);
    8.         } else {
    9.                 paintFiveStart(canvas);
    10.         }
    11.         beginAngle += avgAngle / THREE;
    12.         canvas.restore();
    13. }
    复制代码

  • 画五角星：通过计算获取到五角星的5个顶点位置（计算依据：五角星每个角的角度为36°，然后根据三角函数即可算出各个点的坐标），再使用Canvas、Path、Paint将5个顶点通过画线连接在一起，就完成了五角星的绘制。
    1. private void paintFiveStart(Canvas canvas) {
    2.         // 画五角星的path
    3.         Path path = new Path();
    4.         float[] points = fivePoints(centerX - padding - padding / TWO, 0F, padding);
    5.         for (int i = 0; i < points.length - 1; i = i + TWO) {
    6.                 path.lineTo(points[i], points[i + 1]);
    7.         }
    8.         path.close();
    9.         canvas.drawPath(path, paintFive);
    10. }
    11. /**
    12. * fivePoints 获取五角星的五个顶点
    13. *
    14. * [url=home.php?mod=space&uid=3142012]@param[/url] pointXa 起始点A的x轴绝对位置
    15. * @param pointYa 起始点A的y轴绝对位置
    16. * @param sideLength 五角星的边长
    17. * [url=home.php?mod=space&uid=1141835]@Return[/url] 五角星5个顶点坐标
    18. */
    19. private static float[] fivePoints(float pointXa, float pointYa, float sideLength) {
    20.         final int eighteen = 18;
    21.         float pointXb = pointXa + sideLength / TWO;
    22.         double num = sideLength * Math.sin(Math.toRadians(eighteen));
    23.         float pointXc = (float) (pointXa + num);
    24.         float pointXd = (float) (pointXa - num);
    25.         float pointXe = pointXa - sideLength / TWO;
    26.         float pointYb = (float) (pointYa + Math.sqrt(Math.pow(pointXc - pointXd, TWO)
    27.                         - Math.pow(sideLength / TWO, TWO)));
    28.         float pointYc = (float) (pointYa + Math.cos(Math.toRadians(eighteen)) * sideLength);
    29.         float pointYd = pointYc;
    30.         float pointYe = pointYb;
    31.         float[] points = new float[]{pointXa, pointYa, pointXd, pointYd, pointXb, pointYb,
    32.                 pointXe, pointYe, pointXc, pointYc, pointXa, pointYa};
    33.         return points;
    34. }
    复制代码


6. 画内部扇形抽奖区域
  • 画抽奖区域扇形：使用RectFloat和Arc对象绘制弧，rect表示圆弧包围矩形的左上角和右下角的坐标，参数new Arc(startAngle, avgAngle, true)表示圆弧参数，例如起始角度、后掠角以及是否从圆弧的两个端点到其中心绘制直线。
    1. private void drawInnerArc(Canvas canvas) {
    2.         float radius = Math.min(centerX, centerY) - padding * TWO;
    3.         RectFloat rect = new RectFloat(-radius, -radius, radius, radius);
    4.         for (int i = 0; i < COUNT; i++) {
    5.                 paintInnerArc.setColor(colors[i]);
    6.                 canvas.drawArc(rect, new Arc(startAngle, avgAngle, true), paintInnerArc);
    7.                 startAngle += avgAngle;
    8.         }
    9. }
    复制代码

  • 画抽奖区域文字：利用Path，创建绘制路径，添加Arc，然后设置水平和垂直的偏移量。垂直偏移量radius / FIVE就是当前Arc朝着圆心移动的距离；水平偏移量，就是顺时针去旋转，水平偏移(Math.sin(avgAngle / CIRCLE * Math.PI) * radius) - measureWidth / TWO，是为了让文字在当前弧范围文字居中。最后，用path去绘制文本。
    1. private void drawArcText(Canvas canvas) {
    2.         for (int i = 0; i < COUNT; i++) {
    3.                 // 创建绘制路径
    4.                 Path circlePath = new Path();
    5.                 float radius = Math.min(centerX, centerY) - padding * TWO;
    6.                 RectFloat rect = new RectFloat(-radius, -radius, radius, radius);
    7.                 circlePath.addArc(rect, startAngle, avgAngle);
    8.                 float measureWidth = paintArcText.measureText(textArrs[i]);
    9.                 // 偏移量
    10.                 float advance = (float) ((Math.sin(avgAngle / CIRCLE * Math.PI) * radius) - measureWidth / TWO);
    11.                 canvas.drawTextOnPath(paintArcText, textArrs[i], circlePath, advance, radius / FIVE);
    12.                 startAngle += avgAngle;
    13.         }
    14. }
    复制代码

  • 画抽奖区域文字对应图片：pixelMaps表示文字对应的图片ResourceId转换成PixelMap的数组，pixelMapHolderList表示将PixelMap转换成PixelMapHolder图片List，dst表示PixelMapHolder对象的左上角（ -imageHeight / TWO，imageHeight / TWO）和右下角（centerX / THREE + imageWidth，centerX / THREE）的坐标。
    1. private void drawImage(Canvas canvas) {
    2.         float beginAngle = startAngle + avgAngle / TWO;
    3.         for (int i = 0; i < COUNT; i++) {
    4.                 int imageWidth = pixelMaps[i].getImageInfo().size.width;
    5.                 int imageHeight = pixelMaps[i].getImageInfo().size.height;
    6.                 canvas.save();
    7.                 canvas.rotate(beginAngle, 0F, 0F);
    8.                 // 指定图片在屏幕上显示的区域
    9.                 RectFloat dst = new RectFloat(centerX / THREE, -imageHeight / TWO,
    10.                                 centerX / THREE + imageWidth, imageHeight / TWO);
    11.                 canvas.drawPixelMapHolderRect(pixelMapHolderList.get(i), dst, paintImage);
    12.                 beginAngle += avgAngle;
    13.                 canvas.restore();
    14.         }
    15. }
    复制代码


7. 画中心圆盘和指针
  • 画中心圆盘大指针：通过Path ，确定要移动的三个点的坐标(-centerX / nine, 0F)、(centerX / nine, 0F)、(0F, -centerX / THREE)，去绘制指针。
    1. Path path = new Path();
    2. path.moveTo(-centerX / nine, 0F);
    3. path.lineTo(centerX / nine, 0F);
    4. path.lineTo(0F, -centerX / THREE);
    5. path.close();
    6. canvas.drawPath(path, paintPointer);
    复制代码

  • 画内部大圆和小圆：在圆盘圆心处，绘制两个半径分别为centerX / seven + padding / TWO、centerX / seven的中心圆盘。
    1. // 画内部大圆
    2. paintCenterCircle.setColor(ColorUtils.PAINT_POINTER);
    3. canvas.drawCircle(0F, 0F, centerX / seven + padding / TWO, paintCenterCircle);
    4. // 画内部小圆
    5. paintCenterCircle.setColor(Color.WHITE);
    6. canvas.drawCircle(0F, 0F, centerX / seven, paintCenterCircle);
    复制代码

  • 画中心圆盘小指针：与步骤1中画中心圆盘大指针类似，通过Path去绘制中心圆盘小指针。
    1. Path smallPath = new Path();
    2. smallPath.moveTo(-centerX / eighteen, 0F);
    3. smallPath.lineTo(centerX / eighteen, 0F);
    4. smallPath.lineTo(0F, -centerX / THREE + padding / TWO);
    5. smallPath.close();
    6. canvas.drawPath(smallPath, paintSmallPoint);
    复制代码

  • 画中心圆弧文字：通过Paint的getFontMetrics()方法，获取绘制字体的建议行距，然后根据建议行距去绘制文本。
    1. Paint.FontMetrics fontMetrics = paintCenterText.getFontMetrics();
    2. float textHeight = (float) Math.ceil(fontMetrics.leading - fontMetrics.ascent);
    3. canvas.drawText(paintCenterText, "开始", 0F, textHeight / THREE);
    复制代码


8. 实现抽奖功能
  • 实现Component.TouchEventListener接口，重写onTouchEvent方法，获取屏幕上点击的坐标，当点击的范围在中心圆盘区域时，圆形转盘开始转动抽奖。
    1. @Override
    2. public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
    3.         final int seven = 7;
    4.         switch (touchEvent.getAction()) {
    5.                 case TouchEvent.PRIMARY_POINT_DOWN:
    6.                         // 获取屏幕上点击的坐标
    7.                         float floatX = touchEvent.getPointerPosition(touchEvent.getIndex()).getX();
    8.                         float floatY = touchEvent.getPointerPosition(touchEvent.getIndex()).getY();
    9.                         float radius = centerX / seven + padding / TWO;
    10.                         boolean isScopeX = centerX - radius < floatX && centerX + radius > floatX;
    11.                         boolean isScopeY = centerY - radius < floatY && centerY + radius > floatY;
    12.                         if (isScopeX && isScopeY && !animatorVal.isRunning()) {
    13.                                 startAnimator();
    14.                         }
    15.                         break;
    16.                 case TouchEvent.PRIMARY_POINT_UP:
    17.                         // 松开取消
    18.                         invalidate();
    19.                         break;
    20.                 default:
    21.                         break;
    22.         }
    23.         return true;
    24. }
    复制代码

  • 圆形转盘开始转动抽奖：给转盘指定一个随机的转动角度randomAngle，保证每次转动的角度是随机的（即每次抽到的奖品也是随机的），然后设置动画移动的曲线类型，这里抽奖设置的是Animator.CurveType.DECELERATE表示动画快速开始然后逐渐减速的曲线。动画结束后，转盘停止转动（即抽奖结束），会弹出抽中的奖品提示信息。
    1. private void startAnimator() {
    2.         final int angle = 270;
    3.         startAngle = 0;
    4.         // 动画时长
    5.         final long animatorDuration = 4000L;
    6.         // 随机角度
    7.         int randomAngle = new SecureRandom().nextInt(CIRCLE);
    8.         animatorVal.setCurveType(Animator.CurveType.DECELERATE);
    9.         animatorVal.setDuration(animatorDuration);
    10.         animatorVal.setValueUpdateListener((AnimatorValue animatorValue, float value) -> {
    11.                 startAngle = value * (CIRCLE * FIVE - randomAngle + angle);
    12.                 invalidate();
    13.         });
    14.         stateChangedListener(animatorVal, randomAngle);
    15.         animatorVal.start();
    16. }
    复制代码


9. 最终实现效果      
         
   

10. 代码示例      
代码结构解读
为了方便您的学习，我们提供了自定义圆形抽奖转盘示例工程的代码，代码的工程结构描述如下：

  • customcomponent：LuckyCirclePanComponent自定义圆形抽奖转盘组件类，绘制圆形抽奖转盘，并实现抽奖效果。
  • slice：MainAbilitySlice本示例教程起始页面，提供界面入口。
  • utils：工具类
    • ColorUtils颜色工具类，对绘制圆盘所需RGB颜色进行封装。
    • LogUtils日志打印类，对HiLog日志进行了封装。
    • PixelMapUtils图片工具类，主要是加载本地图片资源，通过本地图片资源的resourceId，将图片转换成PixelMap类型。
    • ToastUtils弹窗工具类，抽奖结束后，弹出抽奖结果信息。
  • MainAbility：主程序入口，DevEco Studio生成，未添加逻辑，无需变更。
  • MyApplication：DevEco Studio自动生成，无需变更。
  • resources：存放工程使用到的资源文件
    • resourcesbaseelement中存放DevEco studio自动生成的配置文件string.json，无需变更。
    • resourcesbasegraphic中存放页面样式文件，本示例教程通过自定义组件完成，没有定义页面样式，无需变更。
    • resourcesbaselayout中布局文件，本示例教程通过自定义组件完成，没有定义页面布局，无需变更。
    • resourcesbasemedia下存放图片资源，本示例教程使用了5张.png图片，用于设置与奖品相对应的图片，开发者可自行准备；icon.png由DevEco Studio自动生成，无需变更。
  • config.json：配置文件。
编写布局与样式
  • ability_main.xml布局文件。
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <DirectionalLayout
    3.         xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4.         ohos:height="match_parent"
    5.         ohos:width="match_parent"
    6.         ohos:orientation="vertical">
    7.     <Text
    8.             ohos:id="$+id:text_helloworld"
    9.             ohos:height="match_content"
    10.             ohos:width="match_content"
    11.             ohos:background_element="$graphic:background_ability_main"
    12.             ohos:layout_alignment="horizontal_center"
    13.             ohos:text="Hello World"
    14.             ohos:text_size="50"
    15.     />
    16. </DirectionalLayout>
    复制代码

  • background_ability_main.xml样式文件。
    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    3.        ohos:shape="rectangle">
    4.     <solid
    5.             ohos:color="#FFFFFF"/>
    6. </shape>
    复制代码

业务逻辑代码
  • 新建LuckyCirclePanComponent类，实现自定义组件，绘制圆形抽奖转盘，并实现抽奖效果。
    1. public class LuckyCirclePanComponent extends Component implements Component.DrawTask,
    2.         Component.EstimateSizeListener, Component.TouchEventListener {
    3.     private static final int CIRCLE = 360;
    4.     private static final int TWO = 2;
    5.     private static final int THREE = 3;
    6.     private static final int FIVE = 5;

    8.     // 盘块的个数
    9.     private static final int COUNT = 6;

    11.     // 开始角度
    12.     private float startAngle = 0;

    14.     // 平均每份的角度
    15.     private float avgAngle = CIRCLE / COUNT;

    17.     // 边框间距
    18.     private int padding;

    20.     // 宽度和高度
    21.     private float width;
    22.     private float height;

    24.     // 中心的X，Y坐标
    25.     private float centerX;
    26.     private float centerY;

    28.     // 画内部扇形的画笔
    29.     private Paint paintInnerArc;

    31.     // 画内部扇形文字的画笔
    32.     private Paint paintArcText;

    34.     // 外部圆弧的画笔
    35.     private Paint paintOutCircle;

    37.     // 内部圆弧的画笔
    38.     private Paint paintCenterCircle;

    40.     // 中间文字的画笔
    41.     private Paint paintCenterText;

    43.     // 画转盘大指针的画笔
    44.     private Paint paintPointer;

    46.     // 画转盘小指针的画笔
    47.     private Paint paintSmallPoint;

    49.     // 画图片的画笔
    50.     private Paint paintImage;

    52.     // 画外圆外面的花瓣
    53.     private Paint paintFlower;

    55.     // 画五角星的画笔
    56.     private Paint paintFive;

    58.     // 每个盘块的颜色
    59.     private Color[] colors = {ColorUtils.ARC_PINK, ColorUtils.ARC_YELLOW, ColorUtils.ARC_BLUE,
    60.         ColorUtils.ARC_PINK, ColorUtils.ARC_YELLOW, ColorUtils.ARC_BLUE, };

    62.     // 抽奖的文字
    63.     private String[] textArrs = {"华为手表", "华为平板", "恭喜发财", "华为手机", "华为耳机", "恭喜发财"};

    65.     // 与文字对应的图片
    66.     private PixelMap[] pixelMaps = {PixelMapUtils.createPixelMapByResId(ResourceTable.Media_watch, getContext()).get(),
    67.             PixelMapUtils.createPixelMapByResId(ResourceTable.Media_tablet, getContext()).get(),
    68.             PixelMapUtils.createPixelMapByResId(ResourceTable.Media_thanks, getContext()).get(),
    69.             PixelMapUtils.createPixelMapByResId(ResourceTable.Media_phone, getContext()).get(),
    70.             PixelMapUtils.createPixelMapByResId(ResourceTable.Media_headset, getContext()).get(),
    71.             PixelMapUtils.createPixelMapByResId(ResourceTable.Media_thanks, getContext()).get()};

    73.     private List<PixelMapHolder> pixelMapHolderList;
    74.     private Context context;

    76.     // 动画
    77.     private AnimatorValue animatorVal = new AnimatorValue();

    79.     /**
    80.      * constructor of LuckyCirclePanComponent
    81.      *
    82.      * @param context context
    83.      */
    84.     public LuckyCirclePanComponent(Context context) {
    85.         super(context);
    86.         this.context = context;
    87.         // 初始化画笔
    88.         initPaint();
    89.         // 获取屏幕的宽高度、中心点坐标，调用onEstimateSize方法
    90.         setEstimateSizeListener(this);
    91.         // 添加绘制任务，调用onDraw方法
    92.         addDrawTask(this);
    93.         // 实现点击中心圆盘区域位置开始抽奖功能，调用onTouchEvent方法
    94.         setTouchEventListener(this);
    95.     }

    97.     private void initPaint() {
    98.         final int size = 20;
    99.         padding = vp2px(size);

    101.         pixelMapToPixelMapHolder();

    103.         paintInnerArc = new Paint();
    104.         paintInnerArc.setAntiAlias(true);
    105.         paintInnerArc.setStyle(Paint.Style.FILL_STYLE);

    107.         paintArcText = new Paint();
    108.         paintArcText.setAntiAlias(true);
    109.         paintArcText.setTextSize(padding);
    110.         paintArcText.setStyle(Paint.Style.FILL_STYLE);
    111.         paintArcText.setColor(ColorUtils.TEXT);

    113.         paintOutCircle = new Paint();
    114.         paintOutCircle.setAntiAlias(true);
    115.         paintOutCircle.setStyle(Paint.Style.FILL_STYLE);

    117.         paintCenterCircle = new Paint();
    118.         paintCenterCircle.setAntiAlias(true);
    119.         paintCenterCircle.setStyle(Paint.Style.FILL_STYLE);

    121.         paintPointer = new Paint();
    122.         paintPointer.setAntiAlias(true);
    123.         paintPointer.setStyle(Paint.Style.FILL_STYLE);
    124.         paintPointer.setColor(ColorUtils.PAINT_POINTER);

    126.         paintCenterText = new Paint();
    127.         paintCenterText.setAntiAlias(true);
    128.         paintCenterText.setTextSize(padding);
    129.         paintCenterText.setStyle(Paint.Style.FILL_STYLE);
    130.         paintCenterText.setColor(ColorUtils.TEXT);
    131.         paintCenterText.setTextAlign(TextAlignment.CENTER);

    133.         paintImage = new Paint();
    134.         paintImage.setAntiAlias(true);
    135.         paintImage.setStrokeCap(Paint.StrokeCap.ROUND_CAP);
    136.         paintImage.setStyle(Paint.Style.STROKE_STYLE);

    138.         paintFlower = new Paint();
    139.         paintFlower.setAntiAlias(true);
    140.         paintFlower.setStyle(Paint.Style.FILL_STYLE);

    142.         paintFive = new Paint();
    143.         paintFive.setAntiAlias(true);
    144.         paintFive.setStyle(Paint.Style.FILL_STYLE);
    145.         paintFive.setColor(Color.YELLOW);

    147.         paintSmallPoint = new Paint();
    148.         paintSmallPoint.setStyle(Paint.Style.FILL_STYLE);
    149.         paintSmallPoint.setColor(Color.WHITE);
    150.     }

    152.     @Override
    153.     public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
    154.         int componentWidth = EstimateSpec.getSize(widthEstimateConfig);
    155.         int componentHeight = EstimateSpec.getSize(heightEstimateConfig);
    156.         this.width = componentWidth;
    157.         this.height = componentHeight;
    158.         centerX = this.width / TWO;
    159.         centerY = this.height / TWO;
    160.         setEstimatedSize(
    161.                 EstimateSpec.getChildSizeWithMode(componentWidth, componentWidth, EstimateSpec.PRECISE),
    162.                 EstimateSpec.getChildSizeWithMode(componentHeight, componentHeight, EstimateSpec.PRECISE)
    163.         );
    164.         return true;
    165.     }

    167.     @Override
    168.     public void onDraw(Component component, Canvas canvas) {
    169.         // 将画布沿X、Y轴平移指定距离
    170.         canvas.translate(centerX, centerY);
    171.         // 画外部圆盘的花瓣
    172.         drawFlower(canvas);
    173.         // 画外部圆盘、小圈圈、五角星
    174.         drawOutCircleAndFive(canvas);
    175.         // 画内部扇形抽奖区域
    176.         drawInnerArc(canvas);
    177.         // 画内部扇形区域文字
    178.         drawArcText(canvas);
    179.         // 画内部扇形区域奖品对应的图片
    180.         drawImage(canvas);
    181.         // 画中心圆盘和指针
    182.         drawCenter(canvas);
    183.     }

    185.     private void drawFlower(Canvas canvas) {
    186.         float beginAngle = startAngle + avgAngle;
    187.         float radius = centerX - padding;
    188.         for (int i = 0; i < COUNT; i++) {
    189.             canvas.save();
    190.             canvas.rotate(beginAngle, 0F, 0F);
    191.             paintFlower.setColor(ColorUtils.PAINT_FLOWER_YELLOW);
    192.             canvas.drawCircle(-radius / TWO, radius / TWO, radius / TWO, paintFlower);

    194.             paintFlower.setColor(ColorUtils.PAINT_FLOWER_PINK);
    195.             canvas.drawCircle(-radius / TWO, radius / TWO, (radius - padding) / TWO, paintFlower);
    196.             beginAngle += avgAngle;
    197.             canvas.restore();
    198.         }
    199.     }

    201.     private void drawOutCircleAndFive(Canvas canvas) {
    202.         paintOutCircle.setColor(ColorUtils.PAINT_OUT_CIRCLE);
    203.         canvas.drawCircle(0F, 0F, centerX - padding, paintOutCircle);
    204.         float beginAngle = startAngle + avgAngle / THREE;
    205.         for (int i = 0; i < COUNT * THREE; i++) {
    206.             canvas.save();
    207.             canvas.rotate(beginAngle, 0F, 0F);
    208.             if (0 == i % TWO) {
    209.                 paintOutCircle.setColor(Color.WHITE);
    210.                 canvas.drawCircle(centerX - padding - padding / TWO, 0F, vp2px(FIVE), paintOutCircle);
    211.             } else {
    212.                 paintFiveStart(canvas);
    213.             }
    214.             beginAngle += avgAngle / THREE;
    215.             canvas.restore();
    216.         }
    217.     }

    219.     private void paintFiveStart(Canvas canvas) {
    220.         // 画五角星的path
    221.         Path path = new Path();
    222.         float[] points = fivePoints(centerX - padding - padding / TWO, 0F, padding);
    223.         for (int i = 0; i < points.length - 1; i = i + TWO) {
    224.             path.lineTo(points[i], points[i + 1]);
    225.         }
    226.         path.close();
    227.         canvas.drawPath(path, paintFive);
    228.     }

    230.     private void drawInnerArc(Canvas canvas) {
    231.         float radius = Math.min(centerX, centerY) - padding * TWO;
    232.         RectFloat rect = new RectFloat(-radius, -radius, radius, radius);
    233.         for (int i = 0; i < COUNT; i++) {
    234.             paintInnerArc.setColor(colors[i]);
    235.             canvas.drawArc(rect, new Arc(startAngle, avgAngle, true), paintInnerArc);
    236.             startAngle += avgAngle;
    237.         }
    238.     }

    240.     private void drawArcText(Canvas canvas) {
    241.         for (int i = 0; i < COUNT; i++) {
    242.             // 创建绘制路径
    243.             Path circlePath = new Path();
    244.             float radius = Math.min(centerX, centerY) - padding * TWO;
    245.             RectFloat rect = new RectFloat(-radius, -radius, radius, radius);
    246.             circlePath.addArc(rect, startAngle, avgAngle);
    247.             float measureWidth = paintArcText.measureText(textArrs[i]);
    248.             // 偏移量
    249.             float advance = (float) ((Math.sin(avgAngle / CIRCLE * Math.PI) * radius) - measureWidth / TWO);
    250.             canvas.drawTextOnPath(paintArcText, textArrs[i], circlePath, advance, radius / FIVE);
    251.             startAngle += avgAngle;
    252.         }
    253.     }

    255.     private void drawImage(Canvas canvas) {
    256.         float beginAngle = startAngle + avgAngle / TWO;
    257.         for (int i = 0; i < COUNT; i++) {
    258.             int imageWidth = pixelMaps[i].getImageInfo().size.width;
    259.             int imageHeight = pixelMaps[i].getImageInfo().size.height;
    260.             canvas.save();
    261.             canvas.rotate(beginAngle, 0F, 0F);
    262.             // 指定图片在屏幕上显示的区域
    263.             RectFloat dst = new RectFloat(centerX / THREE, -imageHeight / TWO,
    264.                     centerX / THREE + imageWidth, imageHeight / TWO);
    265.             canvas.drawPixelMapHolderRect(pixelMapHolderList.get(i), dst, paintImage);
    266.             beginAngle += avgAngle;
    267.             canvas.restore();
    268.         }
    269.     }

    271.     // 将pixelMap转换成PixelMapHolder
    272.     private void pixelMapToPixelMapHolder() {
    273.         pixelMapHolderList = new ArrayList<>(pixelMaps.length);
    274.         for (PixelMap pixelMap : pixelMaps) {
    275.             pixelMapHolderList.add(new PixelMapHolder(pixelMap));
    276.         }
    277.     }

    279.     private void drawCenter(Canvas canvas) {
    280.         final int nine = 9;
    281.         final int seven = 7;
    282.         final int eighteen = 18;
    283.         // 画大指针
    284.         Path path = new Path();
    285.         path.moveTo(-centerX / nine, 0F);
    286.         path.lineTo(centerX / nine, 0F);
    287.         path.lineTo(0F, -centerX / THREE);
    288.         path.close();
    289.         canvas.drawPath(path, paintPointer);

    291.         // 画内部大圆
    292.         paintCenterCircle.setColor(ColorUtils.PAINT_POINTER);
    293.         canvas.drawCircle(0F, 0F, centerX / seven + padding / TWO, paintCenterCircle);
    294.         // 画内部小圆
    295.         paintCenterCircle.setColor(Color.WHITE);
    296.         canvas.drawCircle(0F, 0F, centerX / seven, paintCenterCircle);

    298.         // 画小指针
    299.         Path smallPath = new Path();
    300.         smallPath.moveTo(-centerX / eighteen, 0F);
    301.         smallPath.lineTo(centerX / eighteen, 0F);
    302.         smallPath.lineTo(0F, -centerX / THREE + padding / TWO);
    303.         smallPath.close();
    304.         canvas.drawPath(smallPath, paintSmallPoint);

    306.         // 画中心圆弧文字
    307.         Paint.FontMetrics fontMetrics = paintCenterText.getFontMetrics();
    308.         float textHeight = (float) Math.ceil(fontMetrics.leading - fontMetrics.ascent);
    309.         canvas.drawText(paintCenterText, "开始", 0F, textHeight / THREE);
    310.     }

    312.     /**
    313.      * vp2px 将vp转换成px
    314.      *
    315.      * @param size size
    316.      * @return int
    317.      */
    318.     public int vp2px(int size) {
    319.         int density = getResourceManager().getDeviceCapability().screenDensity / DeviceCapability.SCREEN_MDPI;
    320.         return size * density;
    321.     }

    323.     /**
    324.      * fivePoints 获取五角星的五个顶点
    325.      *
    326.      * @param pointXa 起始点A的x轴绝对位置
    327.      * @param pointYa 起始点A的y轴绝对位置
    328.      * @param sideLength 五角星的边长
    329.      * @return 五角星5个顶点坐标
    330.      */
    331.     private static float[] fivePoints(float pointXa, float pointYa, float sideLength) {
    332.         final int eighteen = 18;
    333.         float pointXb = pointXa + sideLength / TWO;
    334.         double num = sideLength * Math.sin(Math.toRadians(eighteen));
    335.         float pointXc = (float) (pointXa + num);
    336.         float pointXd = (float) (pointXa - num);
    337.         float pointXe = pointXa - sideLength / TWO;
    338.         float pointYb = (float) (pointYa + Math.sqrt(Math.pow(pointXc - pointXd, TWO)
    339.                 - Math.pow(sideLength / TWO, TWO)));
    340.         float pointYc = (float) (pointYa + Math.cos(Math.toRadians(eighteen)) * sideLength);
    341.         float pointYd = pointYc;
    342.         float pointYe = pointYb;
    343.         float[] points = new float[]{pointXa, pointYa, pointXd, pointYd, pointXb, pointYb,
    344.             pointXe, pointYe, pointXc, pointYc, pointXa, pointYa};
    345.         return points;
    346.     }

    348.     @Override
    349.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
    350.         final int seven = 7;
    351.         switch (touchEvent.getAction()) {
    352.             case TouchEvent.PRIMARY_POINT_DOWN:
    353.                 // 获取屏幕上点击的坐标
    354.                 float floatX = touchEvent.getPointerPosition(touchEvent.getIndex()).getX();
    355.                 float floatY = touchEvent.getPointerPosition(touchEvent.getIndex()).getY();
    356.                 float radius = centerX / seven + padding / TWO;
    357.                 boolean isScopeX = centerX - radius < floatX && centerX + radius > floatX;
    358.                 boolean isScopeY = centerY - radius < floatY && centerY + radius > floatY;
    359.                 if (isScopeX && isScopeY && !animatorVal.isRunning()) {
    360.                     startAnimator();
    361.                 }
    362.                 break;
    363.             case TouchEvent.PRIMARY_POINT_UP:
    364.                 // 松开取消
    365.                 invalidate();
    366.                 break;
    367.             default:
    368.                 break;
    369.         }
    370.         return true;
    371.     }

    373.     private void startAnimator() {
    374.         final int angle = 270;
    375.         startAngle = 0;
    376.         // 动画时长
    377.         final long animatorDuration = 4000L;
    378.         // 随机角度
    379.         int randomAngle = new SecureRandom().nextInt(CIRCLE);
    380.         animatorVal.setCurveType(Animator.CurveType.DECELERATE);
    381.         animatorVal.setDuration(animatorDuration);
    382.         animatorVal.setValueUpdateListener((AnimatorValue animatorValue, float value) -> {
    383.             startAngle = value * (CIRCLE * FIVE - randomAngle + angle);
    384.             invalidate();
    385.         });
    386.         stateChangedListener(animatorVal, randomAngle);
    387.         animatorVal.start();
    388.     }

    390.     private void stateChangedListener(AnimatorValue animatorValue, int randomAngle) {
    391.         final int four = 4;
    392.         final int six = 6;
    393.         animatorValue.setStateChangedListener(new Animator.StateChangedListener() {
    394.             @Override
    395.             public void onStart(Animator animator) {
    396.             }

    398.             @Override
    399.             public void onStop(Animator animator) {
    400.             }

    402.             @Override
    403.             public void onCancel(Animator animator) {
    404.             }

    406.             @Override
    407.             public void onEnd(Animator animator) {
    408.                 if (randomAngle >= 0 && randomAngle < avgAngle) {
    409.                     ToastUtils.showTips(context, "恭喜您中了一块华为手表");
    410.                 } else if (randomAngle >= avgAngle && randomAngle < TWO * avgAngle) {
    411.                     ToastUtils.showTips(context, "恭喜您中了一台华为平板");
    412.                 } else if (randomAngle >= TWO * avgAngle && randomAngle < THREE * avgAngle) {
    413.                     ToastUtils.showTips(context, "sorry，您没有中奖");
    414.                 } else if (randomAngle >= THREE * avgAngle && randomAngle < four * avgAngle) {
    415.                     ToastUtils.showTips(context, "恭喜您中了一部华为手机");
    416.                 } else if (randomAngle >= four * avgAngle && randomAngle < FIVE * avgAngle) {
    417.                     ToastUtils.showTips(context, "恭喜您中了一副华为耳机");
    418.                 } else if (randomAngle >= FIVE * avgAngle && randomAngle < six * avgAngle) {
    419.                     ToastUtils.showTips(context, "sorry，您没有中奖");
    420.                 } else {
    421.                     invalidate();
    422.                 }
    423.                 animator.release();
    424.             }

    426.             @Override
    427.             public void onPause(Animator animator) {
    428.             }

    430.             @Override
    431.             public void onResume(Animator animator) {
    432.             }
    433.         });
    434.     }
    435. }
    复制代码

  • 在MainAbilitySlice类中调用自定义圆形抽奖转盘组件类，显示圆形抽奖转盘。
    1. public class MainAbilitySlice extends AbilitySlice {
    2.     private DirectionalLayout myLayout = new DirectionalLayout(this);

    4.     @Override
    5.     public void onStart(Intent intent) {
    6.         super.onStart(intent);
    7.         DirectionalLayout.LayoutConfig config = new DirectionalLayout.LayoutConfig(
    8.                 DirectionalLayout.LayoutConfig.MATCH_PARENT, DirectionalLayout.LayoutConfig.MATCH_PARENT);
    9.         LuckyCirclePanComponent luckyCirclePanComponent = new LuckyCirclePanComponent(this);
    10.         luckyCirclePanComponent.setLayoutConfig(config);
    11.         myLayout.addComponent(luckyCirclePanComponent);
    12.         super.setUIContent(myLayout);
    13.     }

    15.     @Override
    16.     public void onActive() {
    17.         super.onActive();
    18.     }

    20.     @Override
    21.     public void onForeground(Intent intent) {
    22.         super.onForeground(intent);
    23.     }
    24. }
    复制代码

  • 新建ColorUtils类，对绘制圆盘所需RGB颜色进行封装。
    1. public class ColorUtils {
    2.     /**
    3.      * arc pink color
    4.      */
    5.     public static final Color ARC_PINK = new Color(Color.rgb(255, 163, 174));

    7.     /**
    8.      * arc yellow Color
    9.      */
    10.     public static final Color ARC_YELLOW = new Color(Color.rgb(255, 222, 78));

    12.     /**
    13.      * arc blue color
    14.      */
    15.     public static final Color ARC_BLUE = new Color(Color.rgb(118, 226, 219));

    17.     /**
    18.      * text color
    19.      */
    20.     public static final Color TEXT = new Color(Color.rgb(234, 134, 164));

    22.     /**
    23.      * paint pointer Color
    24.      */
    25.     public static final Color PAINT_POINTER = new Color(Color.rgb(246, 200, 216));

    27.     /**
    28.      * paint flower yellow Color
    29.      */
    30.     public static final Color PAINT_FLOWER_YELLOW = new Color(Color.rgb(243, 180, 104));

    32.     /**
    33.      * paint flower pink Color
    34.      */
    35.     public static final Color PAINT_FLOWER_PINK = new Color(Color.rgb(229, 136, 185));

    37.     /**
    38.      * paint out circle color
    39.      */
    40.     public static final Color PAINT_OUT_CIRCLE = new Color(Color.rgb(237, 109, 86));

    42.     private ColorUtils() {
    43.     }
    44. }
    复制代码

  • 新建PixelMapUtils类，加载本地图片资源，通过本地图片资源的resourceId，将图片转换成PixelMap类型。
    1. public class PixelMapUtils {
    2.     private static final String TAG = "PixelMapUtils";

    4.     private PixelMapUtils() {
    5.     }

    7.     private static byte[] readResource(Resource resource) {
    8.         final int bufferSize = 1024;
    9.         final int ioEnd = -1;
    10.         byte[] byteArray;
    11.         byte[] buffers = new byte[bufferSize];
    12.         try (ByteArrayOutputStream output = new ByteArrayOutputStream()) {
    13.             while (true) {
    14.                 int readLen = resource.read(buffers, 0, bufferSize);
    15.                 if (readLen == ioEnd) {
    16.                     LogUtils.error(TAG, "readResource finish");
    17.                     byteArray = output.toByteArray();
    18.                     break;
    19.                 }
    20.                 output.write(buffers, 0, readLen);
    21.             }
    22.         } catch (IOException e) {
    23.             LogUtils.debug(TAG, "readResource failed " + e.getLocalizedMessage());
    24.             return new byte[0];
    25.         }
    26.         LogUtils.info(TAG, "readResource len: " + byteArray.length);
    27.         return byteArray;
    28.     }

    30.     /**
    31.      * Creates a {@code PixelMap} object based on the image resource ID.
    32.      *
    33.      * This method only loads local image resources. If the image file does not exist or the loading fails,
    34.      * {@code null} is returned.
    35.      *
    36.      * @param resourceId Indicates the image resource ID.
    37.      * @param slice Indicates the slice.
    38.      * @return Returns the image.
    39.      */
    40.     public static Optional<PixelMap> createPixelMapByResId(int resourceId, Context slice) {
    41.         final float rotateDegrees = 90F;
    42.         ResourceManager manager = slice.getResourceManager();
    43.         if (manager == null) {
    44.             return Optional.empty();
    45.         }
    46.         try (Resource resource = manager.getResource(resourceId)) {
    47.             if (resource == null) {
    48.                 return Optional.empty();
    49.             }
    50.             ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
    51.             srcOpts.formatHint = "image/png";
    52.             ImageSource imageSource = ImageSource.create(readResource(resource), srcOpts);
    53.             if (imageSource == null) {
    54.                 return Optional.empty();
    55.             }
    56.             ImageSource.DecodingOptions decodingOpts = new ImageSource.DecodingOptions();
    57.             decodingOpts.desiredSize = new Size(0, 0);
    58.             decodingOpts.desiredRegion = new Rect(0, 0, 0, 0);
    59.             decodingOpts.desiredPixelFormat = PixelFormat.ARGB_8888;
    60.             decodingOpts.rotateDegrees = rotateDegrees;

    62.             return Optional.of(imageSource.createPixelmap(decodingOpts));
    63.         } catch (NotExistException | IOException e) {
    64.             return Optional.empty();
    65.         }
    66.     }
    67. }
    复制代码

  • 新建LogUtils类，对HiLog日志进行封装。
    1. public class LogUtils {
    2.     private static final String TAG_LOG = "LogUtil";

    4.     private static final HiLogLabel LABEL_LOG = new HiLogLabel(0, 0, LogUtils.TAG_LOG);

    6.     private static final String LOG_FORMAT = "%{public}s: %{public}s";

    8.     private LogUtils() {
    9.     }

    11.     /**
    12.      * Print debug log
    13.      *
    14.      * @param tag log tag
    15.      * @param msg log message
    16.      */
    17.     public static void debug(String tag, String msg) {
    18.         HiLog.debug(LABEL_LOG, LOG_FORMAT, tag, msg);
    19.     }

    21.     /**
    22.      * Print info log
    23.      *
    24.      * @param tag log tag
    25.      * @param msg log message
    26.      */
    27.     public static void info(String tag, String msg) {
    28.         HiLog.info(LABEL_LOG, LOG_FORMAT, tag, msg);
    29.     }

    31.     /**
    32.      * Print warn log
    33.      *
    34.      * @param tag log tag
    35.      * @param msg log message
    36.      */
    37.     public static void warn(String tag, String msg) {
    38.         HiLog.warn(LABEL_LOG, LOG_FORMAT, tag, msg);
    39.     }

    41.     /**
    42.      * Print error log
    43.      *
    44.      * @param tag log tag
    45.      * @param msg log message
    46.      */
    47.     public static void error(String tag, String msg) {
    48.         HiLog.error(LABEL_LOG, LOG_FORMAT, tag, msg);
    49.     }
    50. }
    复制代码

  • 新建ToastUtils类，抽奖结束后，弹出中奖提示信息。

    1. public final class ToastUtils {
    2.     private static final int TEXT_SIZE = 48;
    3.     private static final int LEFT_PADDING = 30;
    4.     private static final int TOP_PADDING = 20;
    5.     private static final int RIGHT_PADDING = 30;
    6.     private static final int BOTTOM_PADDING = 20;
    7.     private static final int RGB_COLOR = 0x666666FF;
    8.     private static final int CORNER_RADIUS = 15;
    9.     private static final int DURATION = 4000;

    11.     private ToastUtils() {
    12.     }

    14.     /**
    15.      * Show tips
    16.      *
    17.      * @param context ability slice
    18.      * @param msg show msg
    19.      */
    20.     public static void showTips(Context context, String msg) {
    21.         Text text = new Text(context);
    22.         text.setWidth(MATCH_CONTENT);
    23.         text.setHeight(MATCH_CONTENT);
    24.         text.setTextSize(TEXT_SIZE);
    25.         text.setText(msg);
    26.         text.setPadding(LEFT_PADDING, TOP_PADDING, RIGHT_PADDING, BOTTOM_PADDING);
    27.         text.setMultipleLine(true);
    28.         text.setTextColor(Color.WHITE);
    29.         text.setTextAlignment(TextAlignment.CENTER);
    30.         DirectionalLayout.LayoutConfig config = new DirectionalLayout.LayoutConfig();
    31.         config.alignment = LayoutAlignment.CENTER;
    32.         text.setLayoutConfig(config);

    34.         ShapeElement style = new ShapeElement();
    35.         style.setShape(ShapeElement.RECTANGLE);
    36.         style.setRgbColor(new RgbColor(RGB_COLOR));
    37.         style.setCornerRadius(CORNER_RADIUS);
    38.         text.setBackground(style);

    40.         ToastDialog toastDialog = new ToastDialog(context);
    41.         toastDialog.setSize(MATCH_PARENT, MATCH_CONTENT);
    42.         toastDialog.setDuration(DURATION);
    43.         toastDialog.setAutoClosable(true);
    44.         toastDialog.setTransparent(true);

    46.         toastDialog.setAlignment(LayoutAlignment.CENTER);
    47.         toastDialog.setComponent(text);
    48.         toastDialog.show();
    49.     }
    50. }
    复制代码

说明
以上代码示例仅供参考使用，产品化的代码需要考虑数据校验和国际化。

11. 恭喜你      
通过本教程的学习，你已学会了如何使用自定义组件实现圆形抽奖转盘。
   

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友