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

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

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

二、网格配置

确定网格的行数和列数

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

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

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

在Config中配置

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

data class KLineConfig(
    // ... 其他配置 ...
    
    /**
     * 网格列数
     * 默认：4列
     */
    val gridColumnCount: Int = 4,
    
    /**
     * 网格行数
     * 默认：5行
     */
    val gridRowCount: Int = 5
)

模型改动：

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

三、绘制网格线

计算网格线位置

核心公式：

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

绘制代码

private fun drawBackgroundGrid(canvas: Canvas, width: Float, height: Float) {
    val columnWidth = width / config.gridColumnCount
    val rowHeight = height / config.gridRowCount
    
    // 绘制竖线
    for (i in 1 until config.gridColumnCount) {
        val x = columnWidth * i
        canvas.drawLine(x, 0f, x, height, gridPaint)
    }
    
    // 绘制横线
    for (i in 1 until config.gridRowCount) {
        val y = rowHeight * i
        canvas.drawLine(0f, y, width, y, gridPaint)
    }
}

四、价格标签绘制

计算价格步长

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

价格步长：

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

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

获取具体价格

价格计算公式：

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

五、时间标签绘制

计算网格竖线位置

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

网格竖线X坐标：

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

从数据中获取时间

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

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

逻辑说明：

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

获取时间并绘制：

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

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

六、Case2 与 Case3 的区别

Case2（可见区间版本）

功能：

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

Case3（网格+标签版本）

功能：

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

核心区别

功能	Case2	Case3
可见区间处理	✅	✅
背景网格	❌	✅
价格标签	❌	✅
时间标签	❌	✅

七、效果