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,一经查实,立即删除!

相关文章

面试总结之:socket线路切换

"socket线路切换"通常指的是在网络通信过程中,根据当前网络状态或策略来动态更换数据传输路径的技术。这种技术可以提高通信的可靠性和性能。 在实际应用中,线路切换可能涉及到多种技术,例如: 负载均衡:根据每条路径的当前负载情况,动态地选择一条较为空闲的路…

MySql超大Sql文件导入效率优化 —— 筑梦之路

使用场景 日常我们对mysql数据库、mariadb数据库进行定时备份&#xff0c;而随着时间增长&#xff0c;导出来的备份文件越来越大&#xff0c;使用备份sql文件进行还原的时候&#xff0c;大文件非常慢&#xff0c;有些要执行很长时间&#xff0c;效率很低。 如何优化&#xff…

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

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

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的文件传输

#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实现 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…

六(3)、RTKLIB源码解析 — [postpos]: execses(antpos, outhead, procpos)

目录 一、antpos() 1.1 avepos() 1.2 getstapos() 二、outhead() 三、procpos() 3.1 inputobs() 3.1.1 nexto

牛客周赛 Round 42

小红叕战小紫 #include<bits/stdc.h> using namespace std; void solve(){string s;cin>>s;if(s.length()<1)cout<<"yukari";else cout<<"kou"<<endl; } int main(){ios::sync_with_stdio(false), cin.tie(0), cout.tie…

Qt时间类、日期类、时间日期类介绍

一.时间类&#xff08;QTime&#xff09; Qt中的时间类QTime是用来处理时间的类&#xff0c;它可以表示一个特定的时间&#xff0c;精确到毫秒。QTime类提供了一些方法来访问和操作时间&#xff0c;例如获取小时、分钟、秒以及毫秒部分&#xff0c;还可以进行时间的比较和运算。…

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的地震震中附近城市分析实战

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

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

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

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

使用 Lambda 使代码更具表现力 一、Lambda VS. 仿函数二、总结 一、Lambda VS. 仿函数 Lambda 是 C11 中最引人注目的语言特性之一。它是一个强大的工具&#xff0c;但必须正确使用才能使代码更具表现力&#xff0c;而不是更难理解。 首先&#xff0c;要明确的是&#xff0c;…

向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竞态条件攻击 在软件开发过程中&#xff0c;我们常常会遇到需要在使用资源之前检查其状态的情况。然而&#xff0c;如果资源的状态在检查和使用之间发生了变化&#xff0c;那么检查的结果可能会失效&#xff0c;导致软件在资源处于非正常状态时执行无效操作。这种时…

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

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

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目录下…

ERC314协议

314协议功能详解 这两天花时间研究了一下314协议&#xff0c;总体感觉还不错&#xff0c;有创新。 功能亮点 314协议作为一种创新的代币标准&#xff0c;致力于降低用户交易成本与简化授权流程&#xff0c;通过“转账即交易”模式革新传统Swap体验。此协议简化了买卖代币的过程…

什么是react

React 是一个用于构建用户界面的 JavaScript 库&#xff0c;由 Facebook&#xff08;现在的 Meta&#xff09;开发和维护。它首次发布于2013年&#xff0c;并迅速成为最受欢迎的前端库之一。React 的主要目标是提供一种高效、灵活的方式来构建用户界面&#xff0c;特别是在大型…