HarmonyOS-MPChart绘制一条虚实相接的曲线

本文是基于鸿蒙三方库mpchart（OpenHarmony-SIG/ohos-MPChart）的使用，自定义绘制方法，绘制一条虚实相接的曲线。

mpchart本身的绘制功能是不支持虚实相接的曲线的，要么完全是实线，要么完全是虚线。那么当我们的需求是一半是虚线，一半是实线的曲线时，就需要自己定义方法进行绘制了。

首先，我们需要写一个MyLineDataSet类，继承自LineDataSet，也就是线型图的数据类。为什么需要这个类呢？因为我们需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的，这里MyLineDataSet类的构造方法比它的父类多了一个interval参数，也就是虚实分隔点。

import { EntryOhos, JArrayList, LineDataSet } from '@ohos/mpchart';export class MyLineDataSet extends LineDataSet {interval: number = 0;constructor(yVals: JArrayList<EntryOhos> | null, label: string, interval: number) {super(yVals, label);this.interval = interval;}
}

定义好自己的数据类之后，就要定义MyRender类了，实线具体的绘制功能，MyRender类继承自LineChartRenderer，因为是要绘制曲线，所以重写的是drawCubicBezier方法，MyRender类的代码如下：

import { EntryOhos, ILineDataSet, Style, Transformer, Utils, LineChartRenderer } from '@ohos/mpchart';
import { MyLineDataSet } from './MyLineDataSet';export default class MyRender extends LineChartRenderer{protected drawCubicBezier(c: CanvasRenderingContext2D, dataSet: MyLineDataSet) {if(dataSet.interval == undefined){super.drawCubicBezier(c, dataSet);return;}if (!this.mChart || !this.mXBounds) {return;}const phaseY: number = this.mAnimator ? this.mAnimator.getPhaseY() : 1;const trans: Transformer | null = this.mChart.getTransformer(dataSet.getAxisDependency());this.mXBounds.set(this.mChart, dataSet);const intensity: number = dataSet.getCubicIntensity();let cubicPath = new Path2D();//实线let solidLinePath = new Path2D();//虚线let dashedLinePath = new Path2D();if (this.mXBounds.range >= 1) {let prevDx: number = 0;let prevDy: number = 0;let curDx: number = 0;let curDy: number = 0;// Take an extra point from the left, and an extra from the right.// That's because we need 4 points for a cubic bezier (cubic=4), otherwise we get lines moving and doing weird stuff on the edges of the chart.// So in the starting `prev` and `cur`, go -2, -1// And in the `lastIndex`, add +1const firstIndex: number = this.mXBounds.min + 1;const lastIndex: number = this.mXBounds.min + this.mXBounds.range;let prevPrev: EntryOhos | null;let prev: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 2, 0));let cur: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 1, 0));let next: EntryOhos | null = cur;let nextIndex: number = -1;if (cur === null) return;Utils.resetContext2DWithoutFont(c, this.mRenderPaint);// let the spline startcubicPath.moveTo(cur.getX(), cur.getY() * phaseY);solidLinePath.moveTo(cur.getX(), cur.getY() * phaseY);for (let j: number = this.mXBounds.min + 1; j <= this.mXBounds.range + this.mXBounds.min; j++) {prevPrev = prev;prev = cur;cur = nextIndex === j ? next : dataSet.getEntryForIndex(j);nextIndex = j + 1 < dataSet.getEntryCount() ? j + 1 : j;next = dataSet.getEntryForIndex(nextIndex);prevDx = (cur.getX() - prevPrev.getX()) * intensity;prevDy = (cur.getY() - prevPrev.getY()) * intensity;curDx = (next.getX() - prev.getX()) * intensity;curDy = (next.getY() - prev.getY()) * intensity;cubicPath.bezierCurveTo(prev.getX() + prevDx,(prev.getY() + prevDy) * phaseY,cur.getX() - curDx,(cur.getY() - curDy) * phaseY,cur.getX(),cur.getY() * phaseY);if(j <= dataSet.interval){solidLinePath.bezierCurveTo(prev.getX() + prevDx,(prev.getY() + prevDy) * phaseY,cur.getX() - curDx,(cur.getY() - curDy) * phaseY,cur.getX(),cur.getY() * phaseY);if(j == dataSet.interval) {dashedLinePath.moveTo(cur.getX(),cur.getY() * phaseY);}}else{dashedLinePath.bezierCurveTo(prev.getX() + prevDx,(prev.getY() + prevDy) * phaseY,cur.getX() - curDx,(cur.getY() - curDy) * phaseY,cur.getX(),cur.getY() * phaseY);}}}// if filled is enabled, close the pathif (dataSet.isDrawFilledEnabled()) {let cubicFillPath: Path2D = new Path2D();// cubicFillPath.reset();cubicFillPath.addPath(cubicPath);if (c && trans) {this.drawCubicFill(c, dataSet, cubicFillPath, trans, this.mXBounds);}}this.mRenderPaint.setColor(dataSet.getColor());this.mRenderPaint.setStyle(Style.STROKE);if (trans && trans.pathValueToPixel(cubicPath)) {cubicPath = trans.pathValueToPixel(cubicPath);solidLinePath = trans.pathValueToPixel(solidLinePath);dashedLinePath = trans.pathValueToPixel(dashedLinePath);}Utils.resetContext2DWithoutFont(c, this.mRenderPaint);c.beginPath();c.stroke(solidLinePath);c.closePath();Utils.resetContext2DWithoutFont(c, this.mRenderPaint);c.beginPath();c.setLineDash([5,5,0]);c.stroke(dashedLinePath);c.closePath();this.mRenderPaint.setDashPathEffect(null);}}

这个方法主要内容就是定义了两条path2D，也就是线段来绘制实线和虚线。

//实线
let solidLinePath = new Path2D();
//虚线
let dashedLinePath = new Path2D();

绘制方法如下，

solidLinePath.bezierCurveTo(prev.getX() + prevDx,(prev.getY() + prevDy) * phaseY,cur.getX() - curDx,(cur.getY() - curDy) * phaseY,cur.getX(),cur.getY() * phaseY
);

就是调用path2D的方法bezierCurveTo方法，这个方法有6个参数，分别是控制点1的（x值，y值 ）和 控制点2的（x值，y值）以及目标点的（x值，y值）。直接把父类的方法抄过来即可。

我们需要有一个if判断，if(j <= dataSet.interval)就是当j小于dataSet.interval时，写绘制实线的方法，当j等于dataSet.interval时，虚线要moveTo当前位置；当j大于dataSet.interval时，就调用dashedLinePath.bezierCurveTo方法绘制虚线了。

最后绘制方法是调用c.stroke方法绘制的。c.setLineDash([5,5,0]);是设置虚线效果。

 Utils.resetContext2DWithoutFont(c, this.mRenderPaint);c.beginPath();c.stroke(solidLinePath);c.closePath();Utils.resetContext2DWithoutFont(c, this.mRenderPaint);c.beginPath();c.setLineDash([5,5,0]);c.stroke(dashedLinePath);c.closePath();

 最后就是使用了，代码如下：

import {JArrayList,EntryOhos,ILineDataSet,LineData,LineChart,LineChartModel,Mode,
} from '@ohos/mpchart';
import { MyLineDataSet } from './MyLineDataSet';
import MyRender from './MyRender';
import data from '@ohos.telephony.data';@Entry
@Component
struct Index {private model: LineChartModel = new LineChartModel();aboutToAppear() {// 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();// 循环生成 1 到 20 的随机数据，并添加到 values 中for (let i = 1; i <= 20; i++) {values.add(new EntryOhos(i, Math.random() * 100));}// 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet'let dataSet = new MyLineDataSet(values, 'DataSet', 6);dataSet.setMode(Mode.CUBIC_BEZIER);dataSet.setDrawCircles(false);dataSet.setColorByColor(Color.Blue)let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();dataSetList.add(dataSet);// 创建 LineData 对象，使用 dataSetList数据，并将其传递给modellet lineData: LineData = new LineData(dataSetList);this.model?.setData(lineData);this.model.setRenderer(new MyRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler()))}build() {Column() {LineChart({ model: this.model }).width('100%').height('100%').backgroundColor(Color.White)}}
}

其中最重要的就是let dataSet = new MyLineDataSet(values, 'DataSet', 6);设置了分隔点为6，以及这行代码设置了renderer类为自定义的render类：this.model.setRenderer(new MyRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler())) 。

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

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

相关文章

根据多个坐标经纬度获取到中心点的经纬度，scala语言

根据多个坐标经纬度获取到中心点的经纬度，scala语言

文章目录 前言scala 代码 总结 前言 Scala 语言 通过多个经纬度坐标点, 计算出中心点, 这里使用的是 Scala 语言,其他的语言需要自行转换。求出来的并不是原有的点&#xff0c;而是原有点的中心位置的点。 scala 代码 package com.dw.process.midimport java.lang.Double.pa…
阅读更多...
C语言 | Leetcode C语言题解之第97题交错字符串

C语言 | Leetcode C语言题解之第97题交错字符串

题目&#xff1a; 题解&#xff1a; bool isInterleave(char* s1, char* s2, char* s3) {int n strlen(s1), m strlen(s2), t strlen(s3);int f[m 1];memset(f, 0, sizeof(f));if (n m ! t) {return false;}f[0] true;for (int i 0; i < n; i) {for (int j 0; j &l…
阅读更多...
基于UDP的tftp的文件传输

基于UDP的tftp的文件传输

#define SER_PORT 69 #define SER_IP "192.168.125.71" #define CLT_PORT 6666 #define CLT_IP "192.168.125.158" int main(int argc, const char *argv[]) {//创建套接字文件描述符int cfd socket(AF_INET,SOCK_DGRAM,0);if(cfd -1){perror("sock…
阅读更多...
vue2-computed，vue3+watch 前端实现列表搜索，结合filter+some+indexOf

vue2-computed，vue3+watch 前端实现列表搜索，结合filter+some+indexOf

vue2 computed实现 computed: {FBAAddressListComputed () {if (!this.fbaInput) return this.FBAAddressListconst lowerCaseInput this.fbaInput.toLowerCase()return this.FBAAddressList.filter((item) > {return [item.fbaCode, item.zipCode, item.countryCode, ite…
阅读更多...
Python列表,元组,集合,字典详解一篇搞懂

Python列表,元组,集合,字典详解一篇搞懂

目录 介绍 列表(List) 集合(Set) 字典(Dict) 元组(Tuple) 列表 列表定义 ​编辑 列表切片 列表常用方法 append extend ​编辑 insert ​编辑 remove pop ​编辑 clear ​编辑 列表修改元素 sort 升序 倒序 reverse count ​编辑 index 浅拷贝和深拷贝 …
阅读更多...
《书生·浦语大模型实战营》第一课 学习笔记：书生·浦语大模型全链路开源体系

《书生·浦语大模型实战营》第一课 学习笔记：书生·浦语大模型全链路开源体系

文章大纲 1. 简介与背景智能聊天机器人与大语言模型目前的开源智能聊天机器人与云上运行模式 2. InternLM2 大模型 简介3. 视频笔记&#xff1a;书生浦语大模型全链路开源体系内容要点从模型到应用典型流程全链路开源体系 4. 论文笔记:InternLM2 Technical Report简介软硬件基础…
阅读更多...
基于Java的地震震中附近城市分析实战

基于Java的地震震中附近城市分析实战

目录 前言 一、空间数据说明 1、空间查询 二、Java后台开发 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、附近城市展示 3、成果展示 总结 前言 随着全球气候变化和地壳活动的不断演变&#xff0c;地震作为一种自然灾害&…
阅读更多...
第十三节:带你梳理Vue2 : watch侦听器

第十三节:带你梳理Vue2 : watch侦听器

官方解释:> 观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式&#xff0c;用一个函数取代<br/>## 1. 侦听器的基本使用侦听器可以监听data对象属性或者计算属性的变化watch是观察属性的…
阅读更多...
现代C++ 如何使用 Lambda 使代码更具表现力、更容易理解？

现代C++ 如何使用 Lambda 使代码更具表现力、更容易理解？

使用 Lambda 使代码更具表现力 一、Lambda VS. 仿函数二、总结 一、Lambda VS. 仿函数 Lambda 是 C11 中最引人注目的语言特性之一。它是一个强大的工具&#xff0c;但必须正确使用才能使代码更具表现力&#xff0c;而不是更难理解。 首先&#xff0c;要明确的是&#xff0c;…
阅读更多...
向npm发布自己写的vue组件，使用vite创建项目

向npm发布自己写的vue组件，使用vite创建项目

向npm发布自己写的vue组件&#xff0c;使用vite创建项目 创建项目 pnpm create vite输入项目名称 由于我的组件是基于 ant-design-vue和vue的&#xff0c;需要解析.vue文件&#xff0c;我又安装了下面4个。 然后执行 pnpm i安装依赖 vite.config.ts import { defineC…
阅读更多...
防范TOCTOU竞态条件攻击

防范TOCTOU竞态条件攻击

防范TOCTOU竞态条件攻击 在软件开发过程中&#xff0c;我们常常会遇到需要在使用资源之前检查其状态的情况。然而&#xff0c;如果资源的状态在检查和使用之间发生了变化&#xff0c;那么检查的结果可能会失效&#xff0c;导致软件在资源处于非正常状态时执行无效操作。这种时…
阅读更多...
[datawhale202405]从零手搓大模型实战：TinyAgent

[datawhale202405]从零手搓大模型实战：TinyAgent

结论速递 TinyAgent项目实现了一个简单的Agent智能体&#xff0c;主要是实现了ReAct策略&#xff08;推理调用工具的能力&#xff09;&#xff0c;及封装了一个Tool。 项目实现有一定的疏漏。为了正确运行代码&#xff0c;本次对代码Agent部分进行了简单修改&#xff08;完善…
阅读更多...
windows安装rocketmq

windows安装rocketmq

1.下载连接 https://rocketmq.apache.org/download/ 2.解压到D盘下&#xff08;其他位置也可以&#xff09; 3.配置环境变量 需要有jdk环境 新建ROCKETMQ_HOME&#xff0c;刚刚解压的位置 编辑Path&#xff0c;新增%ROCKETMQ_HOME%\bin 4.启动mqnameserver 进入安装bin目录下…
阅读更多...
交叉编译——

交叉编译——

什么是交叉编译 交叉编译 是在一个平台上生成临海一个平台可执行代码. eg.在windows上面编写C51代码&#xff0c;并编译生成可执行代码。如xx.hex 我们在Ubuntu上编写树莓派的代码&#xff0c;并编译成可执行代码。a.out. 是在树莓派上运行&#xff0c;不在Ubuntu Linux上面运…
阅读更多...
便携式iv测试仪特点

便携式iv测试仪特点

TH-PV30便携式IV测试仪是一种用于测量半导体器件电学特性的设备&#xff0c;它具有体积小、重量轻、便于携带等特点&#xff0c;广泛应用于半导体行业、科研实验室以及教育领域。 该测试仪的工作原理基于四探针法&#xff0c;通过在半导体器件表面放置四个金属探针&#xff0c…
阅读更多...
【vs2022】安装copilot和reshaper

【vs2022】安装copilot和reshaper

直接安装新版vs 17.10 自带集成的copilot支持安装resharper 可以跳过市场里的reshper安装好后依然可以直接使用vs。 resharper 2024.1.2 市场里还是i老版本&#xff1a; copilot 不兼容,这个是之前市场安装的版本 官方建议用vs intall 安装 安裝 GitHub Copilot GitHub.Co…
阅读更多...
详解http协议

详解http协议

什么是HTTP协议 定义 Http协议即超文本传送协议 (HTTP-Hypertext transfer protocol) 。 它定义了浏览器&#xff08;即万维网客户进程&#xff09;怎样向万维网服务器请求万维网文档&#xff0c;以及服务器怎样把文档传送给浏览器。从层次的角度看&#xff0c;HTTP是面向&am…
阅读更多...
第四十一天 | 62.不同路径 63.不同路径|| 343.整数拆分 96.不同的二叉搜索树

第四十一天 | 62.不同路径 63.不同路径|| 343.整数拆分 96.不同的二叉搜索树

题目&#xff1a;62.不同路径 1.二维dp数组dp[i][j]含义&#xff1a;到达&#xff08;i&#xff0c;j&#xff09;位置有dp[i][j]种方法。 2.动态转移方程&#xff1a;dp[i][j] dp[i - 1][j] dp[i][j - 1] 3.初始化&#xff1a;dp[0][j] 1, dp[i][0] 1 &#xff08;第一…
阅读更多...
uniapp 安卓 Pc端真机浏览器调试

uniapp 安卓 Pc端真机浏览器调试

下载插件:真机模拟浏览器 1. 安装, 每次启用时使用usb 线连接电脑, 并且打开手机或者POS (调试设备)开发者模式, 比如我的是pos 机 则在系统设置中找到版本号,点击多次就会触发开发者模式 2.打开真机模拟软件,打开后会打开一个浏览器,如果想要模拟google的浏览器则 在浏览器地…
阅读更多...
精准键位提示，键盘盲打轻松入门

精准键位提示，键盘盲打轻松入门

在说明精准键位提示之前&#xff0c;我们先来看一张图&#xff1a; 这是一张标准的基准键位图&#xff0c;也就是打字时我们双手的8个手指放在基准键位上&#xff0c;在打不同的字母时&#xff0c;我们的手指以基准键位为中心&#xff0c;或上、或下、或左、或右&#xff0c;在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023