RecyclerBezierChart曲线图表绘制

目录
  • 曲线图标RecyclerBezierChart 的绘制
    • 三阶贝塞尔曲线
    • cubicPath

曲线图标RecyclerBezierChart 的绘制

本篇介绍曲线图标RecyclerBezierChart 的绘制， 同样图表的公共部分的绘制这里不再做介绍，主体图表的绘制逻辑在BezierChartRender类中，其中包含主体曲线的绘制以及底部fill部分的渐变色的绘制。

三阶贝塞尔曲线

曲线的绘制用的三阶贝塞尔曲线，关于贝塞尔曲线相关的知识读者可自行Google，Android中的三阶贝塞尔曲线的绘制API接口，以下为Path构建三阶曲线，其中包含两个Control Points.

这里的绘制逻辑主要参考了MPAndroidChart中的曲线绘制.

首先将Entry的 Y值转换成对应的PointF，这个之前图表都有同样的操作，存入originPointFList， 然后通过originPointFList计算对应的 Control Points List, 存入 controList, 其中ControlPoint 这个类笔者自定义的包含了两个Control Point 点，紧接着Control Point的计算再介绍。

得到originPointFList, controList后，每次迭代套用Path.cubicTo(controlPoint1, controlPoint2, endPoint) API即可，最终得到 cubicPath.

cubicPath

曲线图底部是渐变Color区域，这里构建了封闭的Path cubicFillPath, 其中包含了cubicPath。

private void drawCubicFill(RecyclerView parent, Canvas c, List<PointF> pointFList, Path spline, float bottom) {
    spline.lineTo(pointFList.get(pointFList.size() - 1).x, bottom);
    spline.lineTo(pointFList.get(0).x, bottom);
    spline.close();
    drawFilledPath(parent, c, spline);
}

整个主体图表的绘制逻辑大致如上，非常简单。

下面是刚提到的关于 Control Point 的计算， 这里定义了一个类 ControlPoint, 包含两个Control Point点。上面计算controList 方法也就作为 它的static 方法放在ControlPoint 中了。

List<ControlPoint> controlList = ControlPoint.getControlPointList(originPointFList, mBarChartAttrs.bezierIntensity);

其中 bezierIntensity 表示控制贝塞尔曲线曲率强度的一个参数系数。

对于不是第一个，最后点， 计算公式：

controlPoint.x = cur.x + (next.x - pre.x) * bezierIntensity; Y值同理。

两个边界位置Index 边界的原因稍作变动，具体如下：

至此曲线图的绘制结束，非常简单，最后附上一张RecyclerBezierChart的gif 图。

本专栏到这里几个常用的图表的纯绘制介绍完了，接下来大致两到三章节介绍图表动态相关的逻辑，选中高亮的控制，长按选中滑动跟RecyclerView本身滑动的一个冲突上的解决；控制同一天显示在一屏时的回弹的控制逻辑。

以上就是RecyclerBezierChart曲线图表绘制的详细内容，更多关于RecyclerBezierChart图表绘制的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • MPAndroidChart绘制自定义运动数据图表示例详解

    目录 引言 TimeAxis SportYAxis CustomLineChart 引言 声明:文中的MPChart代指MPAndroidChart. 本系列之前的文章介绍的MPChart中BarChart相关的一些绘制,接下来我们看看LineChart相关的绘制. 这里以实际的运动相关的图表数据做业务支撑来讲解.MPChart图表支持多指触控方法,这里所有的图表自定义都关掉了这个属性,这样就减少Transformer,以及绘制过程中的更多的变动,相当于一个静态的图. 通常图表在放大的过程中,坐

  • Android RecyclerLineChart实现图表绘制教程

    目录 正文 正常情况下绘制逻辑 左边界绘制 右边界绘制 代码逻辑 正文 本篇介绍线性图标RecyclerLineChart 的绘制,对于图表的公共部分X.Y轴,背景Board等的绘制先前章节已经有过介绍,这里不再重复:以及高亮选中顶部的poupWindow基本的绘制逻辑跟BarChart类似,可参照之前章节.所以针对LineChart,这里只介绍主体图表的绘制逻辑,以及线性表底部的drawFillColor填充. 首先介绍主体图表的逻辑,与BarChart不同之处在于,BartChart的每个I

  • Android RecyclerChart其它图表绘制示例详解

    目录 正文 1. 心电图 2. 睡眠图 正文 之前章节介绍了RecyclerChart 中一些通用的图表的相关绘制逻辑,本章节介绍两种Special的Chart的绘制,一种是心电图,一种是睡眠图.首先我们来看下心电图EcgChart的绘制. 1. 心电图 EcgChart 跟LineChart形态上是相似的,但是EcgChart的点相对于LineChart密集的多,之前的LineChart相当于每个RecyclerView的Itemview 中的Model对应的value值,而心电图的ItemD

  • MPAndroidChart自定义图表Chart的Attribute及Render绘制逻辑

    目录 MPAndroidChart自定义图表 1. 自定义Chart的Attribute 2. Render 自定义绘制逻辑 3. DataBuffer MPAndroidChart自定义图表 声明:本文MPChart 代表的就是 MPAndroidChart. 1. 自定义Chart的Attribute 我们回忆一下自定义View的过程里,通常我们会将一些属性控制Attribute通过自定义View的构造方法传入,然后绘制或者layout的情况下使用这些属性.Attribute类中的属性,通过

  • MPAndroidChart 自定义图表绘制使用实例

    目录 引言 1. LineGradientChart 2. 散点图 3. SteppedChart 引言 声明:文中的MPChart代指MPAndroidChart. 本文主要讲解LineChart中的三个变种Chart,第一个是渐变的LineGradientChart, 第二个是频率散点图,游泳阶梯图,其实MPChart本身也有阶梯图的,DataSet.isDrawSteppedEnabled()这个属性来控制. 1. LineGradientChart 原理:每个Entry中的 Yvalue

  • RecyclerBezierChart曲线图表绘制

    目录 曲线图标RecyclerBezierChart 的绘制 三阶贝塞尔曲线 cubicPath 曲线图标RecyclerBezierChart 的绘制 本篇介绍曲线图标RecyclerBezierChart 的绘制, 同样图表的公共部分的绘制这里不再做介绍,主体图表的绘制逻辑在BezierChartRender类中,其中包含主体曲线的绘制以及底部fill部分的渐变色的绘制. 三阶贝塞尔曲线 曲线的绘制用的三阶贝塞尔曲线,关于贝塞尔曲线相关的知识读者可自行Google,Android中的三阶贝塞

  • Qt图形图像开发之曲线图表模块QChart库坐标轴和数据不对应、密集的散点图无法显示问题解决方法

    QChart坐标轴和数据不对应问题描述: lineseries->append(4, 10); lineseries->append(5, 8); Chart->addSeries(lineseries); // 将 series 添加至图表中 axisX->setRange(0, 15);//设置X的显示范围 axisY->setRange(-20, 20); lineChart->setAxisX(axisX);//把轴添加到图表中 lineChart->se

  • matplotlib 三维图表绘制方法简介

    1. python三维图表绘制方法简介 python三维图表的绘制算是二维图表的一个进阶版本,本质上和二维图表的绘制并无差别,唯一的区别在于使用的库略有差异. 相较于二维图表使用的pyplot库,三维图表的绘制使用的是Axes3D库. 库引入语句为: from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Axes3D 上下的操作就和二维图表绘制大差不差了,首先定义三维画布,然后向里面绘制三维图表,最后打印出结果

  • Python+matplotlib实现简单曲线的绘制

    Python+matplotlib实现简单曲线的绘制

    目录 一.安装matplotlib 二.测试 matplotlib 三. 绘制简单的折线 四.使用 scatter() 绘制散点图并设置其样式 1.要绘制单个点 2.要绘制系列点 3.自动计算数据 4.自动保存图表 一.安装matplotlib 1)由于已安装anaconda,可直接打开anaconda prompt,再用命令pip install matplotlib进行安装,因镜像问题,可能较慢,建议第2种方式. 2)访问https://pypi.org/project/matplotlib

  • jqPlot jquery的页面图表绘制工具

    jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件--也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件. 这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法: 第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer) 复制代码 代码如下: <!--[if IE]><script language="

  • Android中贝塞尔曲线的绘制方法示例代码

    Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • extjs图表绘制之条形图实现方法分析

    本文实例讲述了extjs图表绘制之条形图实现方法.分享给大家供大家参考,具体如下: 这篇文章将介绍extjs图表中条形图. 将实现以下的功能: 1.从后端请求数据并运用到图表中,形成动态数据. 2.查询出每年各个月中人数. 3.改变条形柱的颜色,改变默认的颜色换成自己想要的颜色. renderer: function(sprite, storeItem, barAttr, i, store) { barAttr.fill = '#3D96AE' return barAttr; }, 先看完整的代

  • extjs4图表绘制之折线图实现方法分析

    本文实例讲述了extjs4图表绘制之折线图实现方法.分享给大家供大家参考,具体如下: 本篇文章将介绍extjs中自带的图表 在本次案例中,提供一下功能: 1.从后端请求数据并运用到图表中,形成动态数据. 2.查询出每年各个月中人数. 请看下面代码: Ext.define('ChartLineTest', { extend: 'Ext.panel.Panel', autoScroll : true, selectYear:null,//定义年份 initComponent: function ()

  • Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例

    Qt曲线图表库QtChart简介 Qt的线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart.长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt 5.7 亮瞎眼的更新.下面将介绍如何安装QtChart并进行简单的绘图. Qt曲线图表库QtChart下载 这里用git下载QtChart,参考Qt Charts 5.7.0 安装教程 Git地址:https://gi

  • Qt图形图像开发之曲线图表模块QChart库一个chart中显示两条曲线详细方法与实例

    首先要了解QChartView.QChart.QLineSeries.QValueAxis的实体之间的关系,例如一个QChartView中可以包含几个QValueAxis?这些可参考 Qt图形图像开发曲线图表模块QChart库基本用法.各个类之间的关系说明 每个chart可以包含多个QLineSeries数据系列,每个QLineSeries数据系列又包含了2个QValueAxis数值轴或QDateTimeAxis时间轴. 那么这个chart中的多个数据系列,一起显示在同一个chart中,会是什么

随机推荐