相关问题
DevEco Stduio如何绘制折线图
2983浏览 • 1回复 待解决
要动态显示一个曲线图,而且可以局部放大无失真,或失真最少,用chart好,还是用canvas好,还是用svg好?
1205浏览 • 1回复 待解决
自定义组件嵌套子组件
7848浏览 • 3回复 待解决
自定义Component在绘制圆角矩形时,绘制后出现黑色阴影
9174浏览 • 2回复 待解决
如何自定义组件原型菜单
404浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
1547浏览 • 1回复 待解决
如何自定义模拟Tabs组件
371浏览 • 1回复 待解决
自定义组件如何导出、引入?
819浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
7164浏览 • 1回复 待解决
自定义弹窗自定义转场动画
383浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4525浏览 • 2回复 待解决
如何设置自定义组件height缺省
500浏览 • 1回复 待解决
自定义组件中如何添加图片?
1114浏览 • 1回复 待解决
JAVA卡片怎么用自定义组件?
4784浏览 • 1回复 待解决
自定义组件是否支持renderFit属性
540浏览 • 1回复 待解决
如何使用canvas绘制图形?环境是API6,java编写自定义组件
1084浏览 • 1回复 待解决
如何实现一个自定义的Controller? 自定义的Controller与自定义的组件page如何进行交互?
611浏览 • 1回复 待解决
鸿蒙绘制图形Path折线绘制Polyline设置折线拐角处为圆弧达不到效果,能不能增加圆角属性
497浏览 • 1回复 待解决
鸿蒙自定义组件,如何在Ondraw()方法中使用canvas绘制一张资源图片?
4303浏览 • 1回复 待解决
自定义组件什么时候销毁
595浏览 • 1回复 待解决
Grid组件的scrollBar是否支持自定义
806浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
803浏览 • 1回复 待解决
自定义组件拖动边框:实现自定义组件通过拖动上下左右边框改变其大小
379浏览 • 1回复 待解决
求助,自定义组件到底哪里出错了?
644浏览 • 1回复 待解决
自定义组件的传值和绑定
354浏览 • 1回复 待解决
本文自定义组件的主要的功能有折线图,曲线图,区域渐变覆盖等,如果需要更多的功能,也可以在此基础上进行扩展。
使用的核心API
核心代码解释
首先先描述下绘制步骤:
1. 先绘制坐标系,然后绘制坐标系上的点,再绘制坐标系上文字。
2. 然后绘制曲线图和折线图
3. 最后绘制区域覆盖的地方
4. 加入绘画效果 绘制前肯定要初始化各种画笔,以及设置控件的宽高等。首先初始化画笔
然后设置宽高,这里我直接将绘制组件设置高度一半
现在就可以开始进行绘制了,绘制之前我们要根据设置的数据来进行绘制,所以要提供设置数据的方法
这样设置数据的操作就好了;接下来还需要在绘制之前需要计算x轴和y轴每段的具体值,通过平分view的宽高来计算代码如下
然后就可以进行绘制了,首先绘制坐标系和坐标原点,代码如下:
效果图如下:
然后绘制坐标系上x,y轴刻度标记和小圆点:
效果如下:
之后就开始绘制折线图和曲线图。
效果图如下:
绘制曲线这里我是采用的三阶贝赛尔曲线进行绘制的,先取前后两个点的x的中点,设置给两个额外点的x值,两个额外点的y值分别设置为两个点的y值。
效果图如下:
到这里曲线图与折线就绘制好,最好给图形添加个动画效果,代码如下: