开发案例:使用canvas实现图表系列之折线图

一、功能结构

实现一个公共组件的时候,首先分析一下大概的实现结构以及开发思路,方便我们少走弯路,也可以使组件更加容易拓展,维护性更强。然后我会把功能逐个拆开来讲,这样大家才能学习到更详细的内容。下面简单阐述下折线图组件的功能结构:

以上是基础的功能结构框架,包含一些比较简单的基础功能,后续还有点击触发、动画等功能也会规划进去。这一期我们先实现上面这些基础的功能,后续再慢慢拓展。

二、公共属性

  1. 一个组件肯定会有一些公共的属性作为动态参数,便于组件之间的信息传递,我们分别讲解一下五个公共属性的作用:画布的宽度(cWidth)和高度(cHeight),这个是最基本的。但是我这里控制是非必传,默认值都是 100%就可以了。
  2. 画布的内部留白间距(cSpace)。主要是用来控制内容区与画布外框的距离,避免绘画的内容被截掉。
  3. 字体大小(fontSize)。主要是来控制整个绘画内容的字体大小,全局性,避免每个小功能都需要传字体大小。
  4. 字体颜色(color)。与字体大小的功能一致。
  5. 图表数据(data)。用来存储图表内容的数组,其中 name 与 value 是必传的。

以下是具体的代码:

// 图表数据的特征接口
interface interface_data {
  name: string | number;
  value: string | number;
  [key: string]: any;
}

// 图表的特征接口
interface interface_option {
  cWidth?: string | number,
  cHeight?: string | number,
  fontSize?: string | number,
  color?: string,
  cSpace?: number,
  data?: interface_data[]
}

// option 默认值
const def_option: interface_option = {
  cWidth: '100%',
  cHeight: '100%',
  fontSize: 10,
  color: '#333',
  cSpace: 20,
  data: []
}

@Component
export struct McLineChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State options: interface_option = {}
  aboutToAppear() {
    this.options = Object.assign({}, def_option, this.options)
  }
  build() {
    Canvas(this.context)
      .width(this.options.cWidth)
      .height(this.options.cHeight)
      .onReady(() => {

      })
  }
}

三、绘画坐标轴

绘画图表内容区部分,首先是绘画坐标轴,坐标轴分为 X 轴跟 Y 轴,我们要先开始画 Y 轴,原因是:y 轴上要显示文本标签,如果一开始没有得到文本标签对应的宽度最大值,那么 Y 轴跟 X 轴的起点坐标就会有偏差,会导致绘画全部错位,下图是完整的坐标轴的效果。

1.绘画 Y 轴

Y 轴整体是由轴线、分割线、刻度线、文本标签四个部分组成的,四个部分都有先后关系,而且包含一定的算法逻辑,下面简单用一个概念图进行讲解。

首先用 500*500 的矩形作为我们这次的画布,我们可以在图上看到 Y 轴整体包含了文本标签、Y 轴线、分割线、刻度线四个部分。而 canvas 绘画基本都是通过坐标来定位的,Y 轴整体的四个部分的起点与结束坐标都互相有关系,甚至需要把内部间距、分割间距、y 轴线高度、文本最大的宽度四个属性计算在内。以上是概念与思路,接下来我们逐一讲解代码:

1、计算得到文本最长宽度(maxNameW ),我们可以从图中看到,不论是 y 轴线、刻度线还是分割线的起点坐标都是需要内容间距、文本标签、文本标签与分割线间隔相加计算得到,而为了保持对齐,所以我们需要计算出文本最长宽度。而 y 轴的文本一般都是数据(data)对应的数值,所以我们需要得到传入数据(data)中的最大值。然后讲最大值分割成五等分。以下就是计算获取最大文本宽度的代码,部分逻辑我也会写在代码上:

build() {
    Canvas(this.context)
      .width(this.options.cWidth)
      .height(this.options.cHeight)
      .backgroundColor(this.options.backgroundColor)
      .onReady(() => {
        const values: number[] = this.options.data.map((item) => Number(item.value || 0))
        const maxValue = Math.max(...values)
        let maxNameW = 0
        let cSpiltNum = 5 // 分割等分
        let cSpiltVal = maxValue / cSpiltNum // 计算分割间距
        for(var i = 0; i <= this.options.data.length; i++){
          // 用最大值除于分割等分得到每一个文本的间隔值,而每一次遍历用间隔值乘于i就能得到每个刻度对应的数值了,计算得到得知需要保留整数且转成字符串
          const text = (cSpiltVal * i).toFixed(0)
          const textWidth = this.context.measureText(text).width; // 获取文字的长度
          maxNameW = textWidth > maxNameW ? textWidth : maxNameW // 每次进行最大值的匹配
        }
      })
}

2、绘画文本标签,我们可以从图中看到文本标签的 x 坐标只跟内部间距有关,而且我们从上面代码就已经得到每个刻度的分割间距了,从而可以得到每个文本的 y 轴。

.onReady(() => {
   ....
   for(var i = 0; i <= this.options.data.length; i++){
     ...
     // 绘画文本标签
     this.context.fillText(text, this.options.cSpace, cSpiltVal * (this.options.data.length - i) + this.options.cSpace , 0);
   }
})

3、绘画刻度线。我们可以从概念图得到,刻度线的起点 x 坐标算法是:内部间距(cSpace)加最长文本宽度(maxNameW )加上文本与刻度线的间距,起点 y 坐标则跟文本一样,通过分割间距与下角标的关系得到每个刻度的 y 坐标;而终点 x 坐标则是刻度线的长度,终点 y 坐标则跟起点的 y 坐标一样,我设置默认长度是 5,这样就能得到我们的刻度线了。代码如下:

.onReady(() => {
  ....
  const length = this.options.data.length
  for(var i = 0; i <= length; i++){
    ...
  }
  // 上面是获取最长文本宽度的代码
  // 画线的方法
  function drawLine(x, y, X, Y){
    this.context.beginPath();
    this.context.moveTo(x, y);
    this.context.lineTo(X, Y);
    this.context.stroke();
    this.context.closePath();
  }
  for(var i = 0; i <= length; i++){
    const item = this.options.data[i]
    // 绘画文本标签
    ctx.fillText(text, this.options.cSpace,  cSpiltVal * (this.data.length - i) + this.options.cSpace, 0);
    // 内部间距+文本长度
    const scaleX = this.options.cSpace + maxNameW
    // 通过数据最大值算出等分间隔,从而计算出每一个的终点坐标
    const scaleY = cSpiltVal * (length - i) + this.options.cSpace
    // 这里的5就是我设置文本跟刻度线的间隔与刻度线的长度
    drawLine(scaleX, scaleY, scaleX + 5 + 5, scaleY);
  }
})

4、绘画 y 轴线。继续分析概览图,从图中我们可以得到:y 轴线的起点 x 坐标的算法是:内部间距(cSpace)加最长文本宽度(maxNameW )加上文本与刻度线的间距以及刻度线长度,起点 y 坐标则是内部上间距;而终点 x 坐标与起点 x 坐标相同,终点 y 坐标算法是:画布高度减去上下两边的内部间距。通过以上计算关系就能绘画出 y 轴线了。代码如下:

.onReady(() => {
  ...
  // 上面是绘画其他组成部分代码
   const startX = this.options.cSpace + maxNameW + 5 + 5
   const startY = this.options.cSpace
   const endX = startX
   const endY = this.context.height - (this.options.cSpace * 2)
   drawLine(startX, startY, endX, endY); // 绘画y轴
})

5、绘画分割线。其实从图中可以看出分割线与刻度线差不多,起点 x 坐标算法是:在刻度线起点 x 坐标基础上加刻度线长度;起点 y 轴与刻度线相同。而终点的 x 坐标算法:画布宽度减去起点 x 坐标;终点的 y 坐标与起点的 y 坐标相同。具体代码如下:

.onReady(() => {
  ....
  // 上面是获取最长文本宽度的代码
  for(var i = 0; i <= length; i++){
    const item = this.options.data[i]
    // 绘画文本标签跟刻度
    ...
    // 绘画分割线
    const splitX = scaleX + 5 + 5
    const splitY = scaleY
    drawLine(splitX, splitY, this.context.width - splitX - this.options.cSpace, splitY);
  }
})

2.绘画 X 轴

绘画完 Y 轴之后,我们接着绘画 X 轴, X 轴与 Y 轴绘画逻辑一致,只是方向不同而已。具体的算法就不一一详解,可以参考一下概念图。

而与绘画 Y 轴不一致的在于:

  1. 最长对象不一样。Y 轴最长是文本宽度;而 X 轴需要获取的最长是文本高度。
  2. 间隔分割数不一样。Y 轴是自定义的分割数;而 X 轴分割线是实际数据的长度。
  3. 分割间距长度算法不一样。Y 轴算法是用数据最大值处于自定义的分割数;而 X 轴算法是用画布宽度减去(左右两边的内部间隙以及 Y 轴宽度(文本最长宽度加上刻度线宽度)),再除去数据的长度,得到每个间隔的长度。

除了上面三点需要注意的,其他的就是调换一下计算的位置。X 轴整体的代码如下:

.onReady(() => {

  const cSpace = this.options.cSpace

  // 上面是绘制y轴的代码
  ....

  // 绘制x轴

  // 获取每个分割线的间距:this.context.width - 20为x轴的长度

  let xSplitSpacing = parseInt(String((this.context.width - cSpace * 2 - maxNameW) / this.options.data.length))

  let x = 0;

  for(var i = 0; i <= this.options.data.length; i++){

    // 绘画分割线

    x = xSplitSpacing * (i + 1) // 计算每个数值的x坐标值

    this.drawLine(x + cSpace + maxNameW, this.context.height - cSpace, x + cSpace + maxNameW, cSpace);

    // 绘制刻度

    this.drawLine(x + cSpace + maxNameW, this.context.height - cSpace, x + cSpace + maxNameW, this.context.height - cSpace);

    // 绘制文字刻度标签

    const text = this.options.data[i].name

    const textWidth = this.context.measureText(text).width; // 获取文字的长度

    // 这里文本的x坐标需要减去本身文本宽度的一半,这样才能居中显示, y坐标这是画布高度减去内部间距即可

    this.context.fillText(text, x + cSpace + maxNameW - textWidth / 2, this.context.height - cSpace, 0);

  }

this.context.save();

  this.context.rotate(-Math.PI/2);

  this.context.restore();

})

四、绘画折线区

绘画完坐标轴之后,就可以来绘画折线区的内容了。也是整个画布重点的部分。折线区分为三个部分:绘画折线、绘画标点、绘画文本。

1.绘画折线

从上面的图可以看出折线直接就是把实际数据的数值转成 x 跟 y 坐标,再通过连线连接起来。而每一个转折点的 x 坐标算法跟 x 轴的刻度或者文本是一样的,而 y 坐标是实际数值通过一定算法转成我们需要的高度。x 坐标我们已经获取了,只要是攻克我们的 y 坐标即可。可以通过图来观察一下在画布中与实际数据的关系:

首先 Y 轴的高度代表的是实际数据的最大值,这个我们绘画 Y 轴的时候就得到的结果,那我们则可以算出 Y 轴高度与实际数据的缩放倍数(scale),而折线的的每个 y 坐标对应的也是实际数值,需要把实际数值转换成画布中高度,那么就用实际数值乘与刚刚得到的缩放倍数(scale)就能得到转化后的高度了。

虽然我们已经得到每个转折点缩放后的高度,但是如果要跟 Y 轴坐标一一对应的 y 坐标的画,还需要用画布的高度减去下边内部高度加 x 轴高度,再减去缩放后的实际高度。这样算出来的才是我们想要的 y 坐标值,大概算法关系已经知道了,以下是最终代码:

.onReady(() => {
  ...
  // 上面是绘制x轴跟y轴的代码
  // 绘画折线
  const ySacle = (this.context.height - cSpace *2) / maxValue // 计算出y轴与实际最大值的缩放倍数
  //连线
  this.context.beginPath();
  for(var i=0; i< this.options.data.length; i++){
    const dotVal = String(this.options.data[i].value);
    const x = xSplitSpacing * (i + 1) + cSpace + maxNameW // 计算每个数值的x坐标值
    const y = this.context.height - cSpace - parseInt(dotVal * ySacle); // 画布的高度减去下边内部高度加x轴高度,再减去缩放后的实际高度
    if(i==0){
      // 第一个作为起点
      this.context.moveTo( x, y );
    }else{
      this.context.lineTo( x, y );
    }
  }
  ctx.stroke();
})

2.绘画标点、文本标签

画完折线我们基本能得到很多东西,比如折线上每个转折点的 x 跟 y 坐标值。这样对我们绘画标点与文本标签就很方便了:

.onReady(() => {
  ...
  // 上面是绘制x轴跟y轴的代码
  // 绘画折线
  const ySacle = (this.context.height - cSpace *2) / maxValue // 计算出y轴与实际最大值的缩放倍数
  this.context.beginPath();
  for(var i=0; i< this.options.data.length; i++){
    // 绘画折线代码
    ...
    // 绘制标点
    drawArc(x, y);
    // 绘制文本标签
    const textWidth = this.context.measureText(dotVal).width; // 获取文字的长度
    const textHeight = this.context.measureText(dotVal).height; // 获取文字的长度
    this.context.fillText(dotVal, x - textWidth / 2, y - textHeight / 2); // 文字
  }

  function drawArc( x, y ){
    this.context.beginPath();
    this.context.arc( x, y, 3, 0, Math.PI*2 );
    this.context.fill();
    this.context.closePath();
  }
  this.context.stroke();
})

最终效果如下:

五、总结

以上是本次技术分析,希望能对大家有所启发

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术,这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看:https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. 应用开发导读(Java)

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一个Redis实例最多能存放多少keys

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

【Qt QML入门】Image

Image类型显示一个图像。 使用source属性将图像的源指定为URL。图像可以以Qt支持的任何标准图像格式提供&#xff0c;包括位图格式&#xff0c;如PNG和JPEG&#xff0c;以及矢量图形格式&#xff0c;如SVG。 如果没有指定宽度和高度属性&#xff0c;图像将自动使用加载图像的大…

如果我忽然嗝屁了,家人怎么继承我的财产

前言 笔者很喜欢的电影《寻梦环游记》有这么一句经典台词&#xff1a;“真正的死亡是世界上没有一个人记得你”。 然而&#xff0c;现实中我们所说的“死亡”&#xff0c;其实就是 他再不能与这个世界、与自己在乎的人有新的互动了。 本文&#xff0c;笔者想写一写 关于死亡的…

iOS16.5 以上12小时制/24小时制 HH/hh引起的时间计算错误

iOS16.5以上的版本&#xff0c;如果用yyy-MM-dd HH:mm:ss转换时间&#xff0c;则有肯能发生错误。 先上代码&#xff1a; NSString * timeStr "2023-01-01 11:13:32"; NSDateFormatter * dateFormatter [[NSDateFormatter alloc] init]; [dateFormatter setDateFo…

windows10下jdk安装

文章目录 windows10下jdk安装说明what安装包下载执行安装包验证是否安装成功 windows10下jdk安装 说明 操作系统&#xff1a;windows10 版本&#xff1a;1.8 what JDK(Java Development Kit) 是 Java 语言的软件开发工具包 安装包下载 https://www.oracle.com/java/techn…

Proxmox服务安装

文章目录 系统盘制作 TODO安装系统安装Proxmox系统安装wpa服务配置wifi通过IP访问Proxmox创建服务器配置服务器网络连接虚拟机方式第一种方法&#xff1a;通过建设OpenVPN方式连接虚拟机第二种方法&#xff1a;通过端口转发直连虚拟机设置安装ubuntu服务器允许root用户远程登录…

.net core提示The xx field is required,One or more validation errors occurred

访问接口时缺少model中的参数时&#xff0c;会提示&#xff1a; The xx field is required One or more validation errors occurred原因是.net core webapi默认参数为不可空&#xff0c;因此会验证并报错。 解决方案&#xff1a; 在项目的.csproj中&#xff0c;修改Nullable…

Android--Jetpack--数据库Room详解二

本是青灯不归客&#xff0c;却因浊酒恋红尘 一&#xff0c;基本使用 关于Room数据库的基本使用&#xff0c;请参考文章Android--Jetpack--数据库Room详解一-CSDN博客 二&#xff0c;Room与ViewModle,LiveData的结合使用 LiveData与ViewModle的使用&#xff0c;请参考文章Andr…

谷歌上架应用的机审流程或审核机制是怎么样的?

Google play是全球最大安卓应用市场&#xff0c;拥有巨大的流量&#xff0c;是开发者们上架应用的首选平台。不过&#xff0c;开发者们的应用需要经过谷歌严格审核&#xff0c;确保符合谷歌应用相关政策和法律法规才能成功上架。 众所周知&#xff0c;谷歌审核系统&#xff0c…

基于ssm民宿管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本民宿管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…

c语言结构体调用格式与对齐

1.声明形式&#xff1a; struct 结构体名字 { 结构体成员 }结构体变量名&#xff1b; 2.赋值方法 3.结构体对齐&#xff1a; 1.起始偏移量&#xff1a;默认结构体第一个元素对齐0起始偏移量&#xff0c;第一个元素占一个字节&#xff0c;此时偏移量为1. 2.标准数&#xff…

基于stm32 FP-AUD-SMARTMIC1 音频系统开发

基于stm32 FP-AUD-SMARTMIC1 音频系统开发 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?可加我微信hezkz17, 本群提供音频技术答疑服务,+群赠送语音信号处理降噪算法,蓝牙耳机音频,DSP音频项目核心开发资料, FP-AUD-SMARTMIC1 是一个用于 STM32F4Discovery …

Tcl语言语法精炼总结

一、置换符号 1.变量置换 $ TCl解释器会将认为$后面为变量名&#xff0c;将变量名置换成它的值 2.命令置换 [] []内是一个独立的TCL语句 3.反斜杠置换 \ 换行符、空格、[、$等被TCL解释器当作特殊符号处理。加上反斜杠后变成普通字符 \t TAB \n 换行符 4.双引号 “” “…

spring国际化 - i18n

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 本…

[LCTF 2018]bestphp‘s revenge

文章目录 前置知识call_user_func()函数session反序列化PHP原生类SoapClient 解题步骤 前置知识 call_user_func()函数 把第一个参数作为回调函数调用 eg:通过函数的方式回调 <?php function barber($type){echo "you wanted a $type haircut, no problem\n";}c…

20231213给Ubuntu18.04.6LTS新加一块HDD机械硬盘

20231213给Ubuntu18.04.6LTS新加一块HDD机械硬盘 2023/12/13 22:50 rootrootrootroot-X99-Turbo:~$ cat /etc/issue Ubuntu 18.04.6 LTS \n \l sudo fdisk -l rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ sudo fdisk -lu Disk /dev/sda: 2.7 TiB, 300059298…

Nginx.conf核⼼配置⽂件解读

Nginx的核⼼配置⽂件conf/nginx.conf包含三块内容&#xff1a;全局块、events块、http块 全局块 从配置⽂件开始到events块之间的内容&#xff0c;此处的配置影响nginx服务器整体的运⾏&#xff0c;⽐如worker进程的数量、错误⽇志的位置等。 运行用户是指操作nginx的用户意…

改进YOLOv8注意力系列二:结合CBAM、Coordinate Attention、deformable_LKA_Attention可变形大核注意力

改进YOLOv8注意力系列二:结合ACmix、Biformer、BAM注意力机制 代码CBAM注意力Coordinate Attention坐标注意力deformable_LKA_Attention可变形大核注意力加入方法各种yaml加入结构本文提供了改进 YOLOv8注意力系列包含不同的注意力机制以及多种加入方式,在本文中具有完整的代…

前端反向代理的神奇世界:加速、安全与缓存的秘密(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

V友故事·感恩节特辑|Vol.7 用 EasyV 开启不受限的可视化设计体验

本期嘉宾 张啸天&#xff08;站酷 ID&#xff1a;张张张夏天&#xff09;&#xff0c;从事设计行业已经 4 年多&#xff0c;接触可视化设计工作大概有 2 年时间。目前就职于卓见云的可视化业务部门&#xff0c;所在团队大概 15 人左右&#xff0c;包含了产品、设计、开发、引擎…
最新文章