绘制K线第二章：背景网格绘制

绘制K线第二章：背景网格绘制

在第一章的基础上，我们简单修饰一下，补充一个背景九宫格的绘制功能。这个功能可以让K线图更加清晰易读，帮助用户快速定位价格和时间。

二、网格配置

确定网格的行数和列数

在绘制网格之前，我们需要确定：

• 几行：将高度分成几等份（对应价格轴）
• 几列：将宽度分成几等份（对应时间轴）

例如：4列5行，表示宽度分成4等份，高度分成5等份。

在Config中配置

为了灵活配置网格，我们在 KLineConfig 中添加了两个字段：

1data class KLineConfig(
2    // ... 其他配置 ...
3    
4    /**
5     * 网格列数
6     * 默认：4列
7     */
8    val gridColumnCount: Int = 4,
9    
10    /**
11     * 网格行数
12     * 默认：5行
13     */
14    val gridRowCount: Int = 5
15)
16

模型改动：

• KLineConfig 新增 gridColumnCount 和 gridRowCount 字段
• 默认值：4列5行
• 可以通过配置灵活调整网格密度

三、绘制网格线

计算网格线位置

核心公式：

• 列间距 = 宽度 ÷ 列数
• 行间距 = 高度 ÷ 行数

绘制代码

1private fun drawBackgroundGrid(canvas: Canvas, width: Float, height: Float) {
2    val columnWidth = width / config.gridColumnCount
3    val rowHeight = height / config.gridRowCount
4    
5    // 绘制竖线
6    for (i in 1 until config.gridColumnCount) {
7        val x = columnWidth * i
8        canvas.drawLine(x, 0f, x, height, gridPaint)
9    }
10    
11    // 绘制横线
12    for (i in 1 until config.gridRowCount) {
13        val y = rowHeight * i
14        canvas.drawLine(0f, y, width, y, gridPaint)
15    }
16}
17

四、价格标签绘制

计算价格步长

价格标签显示在右侧Y轴，需要根据网格横线位置计算对应的价格值。

价格步长：

1val priceStep = (maxPrice - minPrice) / config.gridRowCount
2

• 将价格范围（最高价-最低价）平均分成行数等份
• 例如：价格范围1000-800=200，5行，步长=200÷5=40

获取具体价格

价格计算公式：

1for (i in 0 until config.gridRowCount) {
2    val price = priceStep * (config.gridRowCount - i) + minPrice
3}
4

五、时间标签绘制

计算网格竖线位置

时间标签显示在底部X轴，需要根据网格竖线位置找到对应的K线数据。

网格竖线X坐标：

1val columnWidth = width / config.gridColumnCount
2val gridX = columnWidth * i  // i从0到gridColumnCount-1
3

从数据中获取时间

根据X坐标找到K线索引：

1val totalCandleWidth = config.getTotalCandleWidth()  // 每根K线宽度
2val dataIndex = (gridX / totalCandleWidth).toInt().coerceIn(0, visibleData.size - 1)
3

逻辑说明：

• 将网格X坐标转换为K线索引
• 索引 = 网格X坐标 ÷ 每根K线宽度（取整）
• 限制在可见数据范围内

获取时间并绘制：

1val dateText = formatDate(visibleData[dataIndex].Date)
2canvas.drawText(dateText, gridX, y, labelPaint)
3

• 从对应K线数据的 Date 字段获取时间
• 格式化后（如：yyyy/MM/dd → MM/dd）绘制在网格竖线位置

六、Case2 与 Case3 的区别

Case2（可见区间版本）

功能：

• 绘制蜡烛图
• 处理可见区间
• 无网格线和标签

Case3（网格+标签版本）

功能：

• 绘制蜡烛图
• 处理可见区间
• 新增：绘制背景网格（4列5行）
• 新增：显示价格标签（右侧Y轴）
• 新增：显示时间标签（底部X轴）

核心区别

七、效果

《绘制K线第二章：背景网格绘制》 是转载文章，点击查看原文。