ArkUI实战，自定义饼状图组件PieChart

news2024/11/24 5:46:46

本节笔者带领读者实现一个饼状图 PieChart 组件，该组件是根据笔者之前封装的 MiniCanvas 实现的， PieChart 的最终演示效果如下图所示：
PieChart

饼状图实现的拆分

根据上图的样式效果，实现一个饼状图，实质就是绘制一个个的实心圆弧加上圆弧对应颜色就搞定了，圆弧的大小是根据饼状的数据分布计算出来的，对应的颜色自己指定就可以了，其次手指点击到饼状图，需要找到对应的饼状块并突出显示，找到饼状块先计算手指点击坐标和圆弧中心的夹角，根据夹角和每个圆弧的大小找到对应的圆弧，找到圆弧后计算圆弧的突出偏移量并重置所有饼状块的圆弧起始值就可以了。

  • 计算夹角
    计算夹角就是计算手指点击饼状图上的坐标 (x, y) 和饼状图的圆心坐标 (centerX, centerY) 之间的顺时针角度，计算方法如下所示：
private getTouchedAngle(centerX: number, centerY, x: number, y: number) {
  var deltaX = x - centerX;
  var deltaY = centerY - y;
  var t = deltaY / Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  var angle = 0;
  if (deltaX > 0) {
    if (deltaY > 0) {
      angle = Math.asin(t);
    } else {
      angle = Math.PI * 2 + Math.asin(t);
    }
  } else if (deltaY > 0) {
    angle = Math.PI - Math.asin(t);
  } else {
    angle = Math.PI - Math.asin(t);
  }
  return 360 - (angle * 180 / Math.PI) % 360;
}
  • 找圆弧块
    计算出手指点击位置和圆心的夹角后，遍历每一个饼状块做比较就可以了，代码如下所示：
private getTouchedPieItem(angle: number): PieItem {
  for(var i = 0; i < this.pieItems.length; i++) {
    var item = this.pieItems[i];
    if(item.getStopAngle() < 360) {
      if(angle >= item.getStartAngle() && angle < item.getStopAngle()) {
        return item;
      }
    } else {
      if(angle >= item.getStartAngle() && angle < 360 || (angle >= 0 && angle < item.getStopAngle() - 360)) {
        return item;
      }
    }
  }
  return null;
}
  • 计算偏移量
    找到圆弧块后，根据圆弧块的圆弧大小，计算出该圆弧突出后的偏移量，代码如下所示：
private calculateRoteAngle(item: PieItem): number {
  var result = item.getStartAngle() + item.getAngle() / 2 + this.getDirectionAngle();
  if (result >= 360) {
    result -= 360;
  }
  if (result <= 180) {
    result = -result;
  } else {
    result = 360 - result;
  }
  return result;
}
  • 重置偏移量
    有了目标圆弧块的偏移角度后，重置每一个圆弧块的起始偏移量就可以了，代码如下所示：
private resetStartAngle(angle: number) {
  this.pieItems.forEach((item) => {
    item.setSelected(false);
    item.setStartAngle(item.getStartAngle() + angle);
  });
}
  • 重新绘制圆弧
    绘制圆弧使用 MiniCanvas 提供的 drawArc() 方法即可，代码如下所示：
drawPieItem() {
  this.pieItems.forEach((item) => {
    this.paint.setColor(item.color);
    var x = this.calculateCenterX(item.isSelected());
    var y = this.calculateCenterY(item.isSelected());
    this.canvas.drawArc(x, y, this.radius, item.getStartAngle(), item.getStopAngle(), this.paint);
  })
}

饼状图的实现

拆分完饼状图的步骤后，实现起来就方便多了， PieChart 的完整代码如下所示：

import { MiniCanvas, Paint, ICanvas } from './icanvas'

@Entry @Component struct PieChart {

  private delegate: PieChartDelegate;

  build() {
    Column() {
      MiniCanvas({
        attribute: {
          width: this.delegate.calculateWidth(),
          height: this.delegate.calculateHeight(),
          clickListener: (event) => {
            // 根据点击绘制突出的饼状块
            this.delegate.onClicked(event.x, event.y);
          }
        },
        onDraw: (canvas) => {
          // 开始绘制
          this.delegate.setCanvas(canvas);
          this.delegate.drawPieItem();
        }
      })
    }
    .padding(10)
    .size({width: "100%", height: "100%"})
  }

  aboutToAppear() {
    // mock测试数据
    var pieItems = PieItem.mock();
    // 初始化delegate
    this.delegate = new PieChartDelegate(pieItems, RotateDirection.BOTTOM);
  }
}

// 定义饼状块的属性，包括角度，起始角度，占比，颜色，是否选中突出
export class PieItem {
  private startAngle: number = 0;
  private rate: number = 0;
  private angle: number = 0;
  private selected: boolean = false;

  constructor(public count: number, public color: string) {
  }

  setSelected(selected: boolean) {
    this.selected = selected;
    return this;
  }

  isSelected() {
    return this.selected;
  }

  setStartAngle(startAngle: number) {
    this.startAngle = startAngle > 360 ? startAngle - 360 : startAngle < 0 ? 360 + startAngle : startAngle;
    return this;
  }

  getStartAngle() {
    return this.startAngle;
  }

  getStopAngle() {
    return  this.startAngle + this.angle;
  }

  setRate(rate: number) {
    this.rate = rate;
    return this;
  }

  getRate() {
    return this.rate;
  }

  setAngle(angle: number) {
    this.angle = angle;
    return this;
  }

  getAngle() {
    return this.angle;
  }

  // mock一份测试数据
  static mock(): Array<PieItem> {
    var pieItems = new Array<PieItem>();
    pieItems.push(new PieItem(21, "#6A5ACD"))
    pieItems.push(new PieItem(18, "#20B2AA"))
    pieItems.push(new PieItem(29, "#FFFF00"))
    pieItems.push(new PieItem(12, "#00BBFF"))
    pieItems.push(new PieItem(20, "#DD5C5C"))
    pieItems.push(new PieItem(13, "#8B668B"))
    return pieItems;
  }
}

// 饼状块的突出方向
export enum RotateDirection {
  LEFT,
  TOP,
  RIGHT,
  BOTTOM
}

// 饼状图绘制的具体实现类
class PieChartDelegate {

  private paint: Paint;
  private canvas: ICanvas;

  constructor(private pieItems: Array<PieItem>, private direction: RotateDirection = RotateDirection.BOTTOM, private offset: number = 10, private radius: number = 80) {
    this.calculateItemAngle();
  }

  setPitItems(pieItems: Array<PieItem>) {
    this.pieItems = pieItems;
  }

  setCanvas(canvas: ICanvas) {
    this.canvas = canvas;
    this.paint = new Paint();
  }

  onClicked(x: number, y: number) {
    if(this.canvas) {
      var touchedAngle = this.getTouchedAngle(this.radius, this.radius, x, y);
      var touchedItem = this.getTouchedPieItem(touchedAngle);
      if(touchedItem) {
        var rotateAngle = this.calculateRoteAngle(touchedItem);
        this.resetStartAngle(rotateAngle);
        touchedItem.setSelected(true)
        this.clearCanvas();
        this.drawPieItem();
      }
    } else {
      console.warn("canvas invalid!!!")
    }
  }

  clearCanvas() {
    this.canvas.clear();
  }

  drawPieItem() {
    this.pieItems.forEach((item) => {
      this.paint.setColor(item.color);
      var x = this.calculateCenterX(item.isSelected());
      var y = this.calculateCenterY(item.isSelected());
      this.canvas.drawArc(x, y, this.radius, item.getStartAngle(), item.getStopAngle(), this.paint);
    })
  }

  calculateWidth(): number {
    if (this.direction == RotateDirection.LEFT || this.direction == RotateDirection.RIGHT) {
      return this.radius * 2 + this.offset;
    } else {
      return this.radius * 2;
    }
  }

  calculateHeight(): number {
    if (this.direction == RotateDirection.TOP || this.direction == RotateDirection.BOTTOM) {
      return this.radius * 2 + this.offset;
    } else {
      return this.radius * 2;
    }
  }

  private calculateCenterX(hint: boolean): number {
    if(this.direction == RotateDirection.LEFT) {
      return hint ? this.radius : this.radius + this.offset;
    } else if(this.direction == RotateDirection.TOP) {
      return this.radius;
    } else if(this.direction == RotateDirection.RIGHT) {
      return hint ? this.radius + this.offset : this.radius;
    } else {
      return this.radius;
    }
  }

  private calculateCenterY(hint: boolean): number {
    if(this.direction == RotateDirection.LEFT) {
      return this.radius;
    } else if(this.direction == RotateDirection.TOP) {
      return hint ? this.radius : this.radius + this.offset;
    } else if(this.direction == RotateDirection.RIGHT) {
      return this.radius;
    } else {
      return hint ? this.radius + this.offset : this.radius;
    }
  }

  private resetStartAngle(angle: number) {
    this.pieItems.forEach((item) => {
      item.setSelected(false);
      item.setStartAngle(item.getStartAngle() + angle);
    });
  }

  private calculateRoteAngle(item: PieItem): number {
    var result = item.getStartAngle() + item.getAngle() / 2 + this.getDirectionAngle();
    if (result >= 360) {
      result -= 360;
    }
    if (result <= 180) {
      result = -result;
    } else {
      result = 360 - result;
    }
    return result;
  }

  private calculateItemAngle() {
    var total = 0;
    this.pieItems.forEach((item) => {
      total += item.count;
    })

    for(var i = 0; i < this.pieItems.length; i++) {
      var data = this.pieItems[i];
      data.setRate(data.count / total);
      data.setAngle(data.getRate() * 360);
      if (i == 0) {
        data.setStartAngle(0);
      } else {
        var preData = this.pieItems[i - 1];
        data.setStartAngle(preData.getStopAngle());
      }
    }
  }

  private getDirectionAngle(): number {
    var result = 270;
    if (this.direction == RotateDirection.RIGHT) {
      result = 0;
    }
    if (this.direction == RotateDirection.BOTTOM) {
      result = 270;
    }
    if (this.direction == RotateDirection.LEFT) {
      result = 180;
    }
    if (this.direction == RotateDirection.TOP) {
      result = 90;
    }
    return result;
  }

  private getTouchedAngle(centerX: number, centerY, x: number, y: number) {
    var deltaX = x - centerX;
    var deltaY = centerY - y;
    var t = deltaY / Math.sqrt(deltaX * deltaX + deltaY * deltaY);
    var angle = 0;
    if (deltaX > 0) {
      if (deltaY > 0) {
        angle = Math.asin(t);
      } else {
        angle = Math.PI * 2 + Math.asin(t);
      }
    } else if (deltaY > 0) {
      angle = Math.PI - Math.asin(t);
    } else {
      angle = Math.PI - Math.asin(t);
    }
    return 360 - (angle * 180 / Math.PI) % 360;
  }

  private getTouchedPieItem(angle: number): PieItem {
    for(var i = 0; i < this.pieItems.length; i++) {
      var item = this.pieItems[i];
      if(item.getStopAngle() < 360) {
        if(angle >= item.getStartAngle() && angle < item.getStopAngle()) {
          return item;
        }
      } else {
        if(angle >= item.getStartAngle() && angle < 360 || (angle >= 0 && angle < item.getStopAngle() - 360)) {
          return item;
        }
      }
    }
    return null;
  }
}

以上就是笔者介绍的实现一个饼状图的思路和实现，读者可以阅读源码，目前 PieChart 在选中饼状块并突出时没有动画特效而是直接旋转过来了，后续笔者会把旋转的动效加上。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/365755.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何保护 IP 地址的隐私问题

如何保护 IP 地址的隐私问题

是不是只有运营商才能查到某个人的住址信息呢&#xff1f;在大数据时代的今天&#xff0c;各种互联网应用收集了大量的数据信息&#xff0c;它们其实也可以根据这些信息&#xff0c;推断出某个人的大致地址位置。例如百度地图会一直用 App SDK 以及网页的方式记录 IP 和地址位置…
阅读更多...
MySQL-redo log和undo log

MySQL-redo log和undo log

什么是事务 事务是由数据库中一系列的访问和更新组成的逻辑执行单元 事务的逻辑单元中可以是一条SQL语句&#xff0c;也可以是一段SQL逻辑&#xff0c;这段逻辑要么全部执行成功&#xff0c;要么全部执行失败 举个最常见的例子&#xff0c;你早上出去买早餐&#xff0c;支付…
阅读更多...
位运算(C/C++)

位运算(C/C++)

1. 基础知识 程序中的所有数在计算机内存中都是以二进制的形式储存的。位运算就是直接对整数在内存中的二进制位进行操作。比如&#xff0c;and运算本来是一个逻辑运算符&#xff0c;但整数与整数之间也可以进行and运算。举个例子&#xff0c;6的二进制是110&#xff0c;11的二…
阅读更多...
Python概述 基础语法 判断 循环

Python概述 基础语法 判断 循环

Python概述常用快捷键第二章-Python基础语法01-字面量02-注释03-变量04-数据类型05-数据类型转换06-标识符07-运算符08-字符串的三种定义方式09-字符串的拼接10-字符串格式化11-字符串格式化的精度控制 12-字符串格式化-快速写法13-对表达式进行格式化14-字符串格式化练习题讲解…
阅读更多...
【Jmeter】ForEach控制器

【Jmeter】ForEach控制器

一、什么是ForEach控制器 ForEach控制器是遍历某个数组读取不同的变量值&#xff0c;来控制其下的采样器或控制器执行一次或多次。而这个数组可以是用户自定义变量&#xff0c;也可以是从前面接口请求中提取到需要的数据&#xff0c;然后进行遍历循环。 二、ForEach控制器相关…
阅读更多...
【概念辨析】二维数组传参的几种可能性

【概念辨析】二维数组传参的几种可能性

一、二维数组传参竟然不是用二级指针进行接收&#xff1f; 今天进行再一次的二级指针学习时&#xff0c;发现了一条以前没怎么注意过的知识点&#xff1a;二维数组进行传参只能用二维数组&#xff08;不能省略列&#xff09;进行接收或者是数组指针。 问题复现代码如下&#xf…
阅读更多...
深度卷积对抗神经网络 进阶 第三部分 GANs Unpaired Translation with Cycle GAN 模型

深度卷积对抗神经网络 进阶 第三部分 GANs Unpaired Translation with Cycle GAN 模型

非配对的图像转换应用 Unpaired Image-to-Image Translation Unpaired image-to-image translation 主要用于学习两组图像之间的对应关系&#xff0c;检查和寻找两堆数据中的共同内容&#xff08;content&#xff09;以及每堆独有的特点&#xff08;style&#xff09;。而这个…
阅读更多...
FinClip 的 2022 与 2023

FinClip 的 2022 与 2023

相比往年&#xff0c;今年复盘去年与展望新年的文章来的稍慢一点。不过也希望能够借这篇文章&#xff0c;和关注 FinClip 的用户朋友们一起聊聊&#xff0c;我们在去年和今年的想法与计划。 2022 在过去的一年中&#xff0c;我们的身边发生了很多事情&#xff0c;这些事情在不…
阅读更多...
英语二-电子邮件邀请短文写作

英语二-电子邮件邀请短文写作

1. 邮件模板 Dear 邀请人, Hope you have a great day. I am writing this email to invite you to attend 主题. Please kindly find the following information for your reference: Time: 时间 Address: 地点 We hope that nothing will prevent you from coming, as…
阅读更多...
如何轻松学习Python数据分析？

如何轻松学习Python数据分析？

今天这篇文章来聊聊如何轻松学习『Python数据分析』&#xff0c;我会以一个数据分析师的角度去聊聊做数据分析到底有没有必要学习编程、学习Python&#xff0c;如果有必要&#xff0c;又该如何学习才能做到毫不费力。 1.实际的工作 如果你是一名数据分析师&#xff0c;我相信你…
阅读更多...
【Linux】环境变量与进程优先级

【Linux】环境变量与进程优先级

文章目录&#x1f3aa; 进程优先级&#x1f680;1.孤儿进程&#x1f680;2.优先级查看&#x1f680;3.优先级修改&#x1f3aa; 环境变量&#x1f680;1.常见环境变量&#x1f680;2.环境变量获取&#x1f680;3.main中的命令行参数&#x1f3aa; 进程优先级 每个进程都有相应…
阅读更多...
Idea修改Git账号及密码的方法

Idea修改Git账号及密码的方法

IDEA修改git账号及密码的方法&#xff1a;1、file->settings->passwords2、重启IDEA3、执行一次提交或更新当执行提交或更新之后&#xff0c;idea会自动提示输入账号、密码&#xff0c;如下&#xff1a;4、以上如果还修改不了&#xff0c;请尝试如下方式解决办法&#xf…
阅读更多...
一文揭晓：手机号码归属地api的作用是什么?

一文揭晓：手机号码归属地api的作用是什么?

随着手机的普及&#xff0c;手机号码的归属地已经成为很多网站和App中调用的重要数据资源。而手机号码归属地API可以帮助开发者快速获取手机号码归属地信息。目前&#xff0c;这种API已经被广泛地使用&#xff0c;用于各种不同的应用场景。这对于用户及开发者来说是非常重要的&…
阅读更多...
nodejs基于vue个人需求和地域特色的外卖订餐推荐系统

nodejs基于vue个人需求和地域特色的外卖订餐推荐系统

1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 3 系统分析 6 3.1系统可行性分析 6 3.1.1经济可行性 6 3.1.2技术可行性 6 3.1.3运行可行性 6 3.2系统现状分析 63.3功能需求分析 7 3.4系统设计规则与运行环境 8 3.5系统流程…
阅读更多...
BP神经网络参数总结，BP神经训练窗口详解，基于BP神经网络的火灾识别，1000案例之17

BP神经网络参数总结，BP神经训练窗口详解，基于BP神经网络的火灾识别，1000案例之17

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于B P神经网络的火灾识别 数据集 MATLAB编程BP神经网络代码&#xff0c;并附有GUI窗口 效果图…
阅读更多...
Android 实现 NFC 读取卡片信息

Android 实现 NFC 读取卡片信息

效果图&#xff1a;因为朋友需要个读取NFC卡片数据的功能,所以最近看了一下Android 系统下NFC 读取卡片信息的操作。NFC(近距离无线通信 ) 是一组近距离无线技术,通常只有在距离不超过 4 厘米时才能启动连接.借助 NFC&#xff0c;您可以在 NFC 标签与 Android 设备之间或者两台…
阅读更多...
jenkins使用SSH拉取gitlab代码

jenkins使用SSH拉取gitlab代码

jenkins机器上操作 1 创建密钥对 ssh-keygen (一路回车生成密钥对) ssh-copy-id -i id_rsa.pub xxx.xxx.xxx.xxx 2 查看公钥配置gitlab ssh cat /root/.ssh/id_rsa.pub 配置gitlab ssh 3 在jenkins配置私钥 cat /root/.ssh/id_rsa 完成以上操作后 在jenkins机器上执行git…
阅读更多...
线程的执行

线程的执行

承接上文CPU原理简介程序的执行是由控制器发信号推动整个程序一步一步向前走&#xff0c;将数据存储在寄存器&#xff0c;从程序计数器中获取指令&#xff0c;比如先把3放到寄存器&#xff0c;再把5放到寄存器&#xff0c;再做一个加法&#xff0c;加法就是一个指令&#xff0c…
阅读更多...
Redis官方可视化工具使用体验

Redis官方可视化工具使用体验

前言 我们在使用redis不可避免的使用一些可视化工具&#xff0c;本文来介绍一下官方的可视化工具RedisInsight的使用体验 官方网址&#xff1a;https://docs.redis.com/latest/ri/ 傻瓜式下载安装&#xff0c;此处不作赘述 使用 安装完成后我们当然要先创建一个连接体验一…
阅读更多...
九龙证券|全面注册制落地后IPO新增注册准备程序

九龙证券|全面注册制落地后IPO新增注册准备程序

历经科创板、北交所以及存量商场创业板试点注册制改革&#xff0c;资本商场总算迎来了全面注册制时代。 为确保全面注册制改革技能预备作业的顺利推进&#xff0c;近日&#xff0c;证监会拟定、发布了《监管规矩适用指引——发行类第8号&#xff1a;股票发行上市注册作业规程》…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023