如何基于像素坐标与NumberRange实现Canvas数据索引计算？

安全阿岳

2026-10-1

问题原因

你当前实现的PixelCoordinateXToDataIndex逻辑完全偏离了核心需求，像素坐标转数据索引本质是两个线性范围的比例映射问题，原有实现引入了大量无意义的遍历、区间构造逻辑，存在以下核心错误：

未基于两个范围的比例关系做计算，额外引入的dataOptimalIntervals、间隔取整逻辑完全破坏了映射准确性
未兼容画布范围、数据范围的最小值基准偏移
边界值处理缺失，最大像素坐标对应的是最后一个数据索引（从0开始计数所以要减1），原有逻辑完全没有对应处理
多余的遍历和区间构造不仅会带来性能损耗，也完全无法适配动态变化的可见数据范围

修复后的实现

function PixelCoordinateXToDataIndex(canvasRange: NumberRange, dataRange: NumberRange, atCoord: number): number {
    // 先对输入坐标做边界截断，避免超出画布范围
    const safeCoord = Math.max(canvasRange.min, Math.min(atCoord, canvasRange.max));
    // 计算画布的总宽度、数据范围总长度
    const canvasTotal = canvasRange.max - canvasRange.min;
    const dataTotal = dataRange.max - dataRange.min;
    // 计算当前坐标在画布中的归一化比例
    const ratio = (safeCoord - canvasRange.min) / canvasTotal;
    // 比例映射到数据范围
    const dataValue = dataRange.min + ratio * dataTotal;
    // 转为索引，最大索引为数据总长度减1（因为索引从0开始）
    const maxIndex = Math.floor(dataTotal) - 1;
    const index = Math.floor(dataValue - dataRange.min);
    // 边界处理避免越界
    return Math.max(0, Math.min(index, maxIndex));
}