本文旨在解决在使用 `lightweight-charts` 图表库时，如何通过监听十字光标移动事件，准确获取十字光标首次和最后一次移动时的 X 坐标值的问题。文章将详细介绍一种实现方案，该方案通过结合 `addEventListener` 和 `subscribeCrosshairMove()` 函数，并利用状态变量来跟踪十字光标的移动状态，从而实现对起始和结束坐标的精确捕获。
获取十字光标坐标数据的方案
在使用 lightweight-charts 时，经常需要获取十字光标移动时的坐标数据，例如，获取十字光标在图表上移动的起始位置和结束位置。 直接在 subscribeCrosshairMove() 事件中简单地赋值，可能会因为事件的持续触发而导致无法准确获取到所需的值。
关键问题分析
原始代码尝试在 try 块内使用 let initialX 声明变量，导致每次事件触发时 initialX 都会被重新定义，因此 else 语句永远不会执行。同时，在十字光标移动结束之前，无法直接获取到最后一个 X 值，因为 subscribeCrosshairMove() 事件仍在持续触发。
解决方案
为了解决上述问题，我们需要将状态变量定义在事件监听器外部，并且需要一种机制来判断十字光标移动的开始和结束。 以下是一种可行的解决方案：
- 定义状态变量： 在事件监听器外部定义一个对象 coordinates，用于存储十字光标的移动状态和坐标数据。
- 监听 Shift 键状态： 通过 mousemove 事件监听 Shift 键的按下和释放，以此来模拟十字光标移动的开始和结束。
- 在 crossHairEvent 中更新坐标： 在 crossHairEvent 函数中，根据 Shift 键的状态来更新 coordinates 对象中的 fromX 和 toX 值。
- 保存坐标数据： 当 fromX 和 toX 都被赋值后，将它们的值保存到 fromX 和 toX 变量中，并将 coordinates.fromX 和 coordinates.toX 重置为 null，以便下次可以重新记录坐标。
代码示例
let coordinates = {
shiftKey: false,
fromX: null,
toX : null
}
let fromX = null;
let toX = null;
// Register the shiftKey pressing & releasing.
document.addEventListener('mousemove', function( e ){
if( e.shiftKey && !coordinates.shiftKey ) {
coordinates.shiftKey = true;
}
if( !e.shiftKey && coordinates.shiftKey ) {
coordinates.shiftKey = false;
}
})
async function crossHairEvent(param){
try{
// Register the fromX
if( coordinates.shiftKey && !coordinates.fromX ) {
coordinates.fromX = param.time;
}
// Register the toX
if( !coordinates.shiftKey && !coordinates.toX ) {
coordinates.toX = param.time;
}
// Save the values in a deifferent variables.
if( coordinates.fromX && coordinates.toX ) {
fromX = coordinates.fromX;
toX = coordinates.toX ;
// Set them to null to make it possible to register every time you release the shiftKey.
coordinates.fromX = null;
coordinates.toX = null;
}
}
catch{}
};
chart.subscribeCrosshairMove(crossHairEvent);代码解释：
- coordinates 对象用于存储 Shift 键的状态 (shiftKey) 和起始坐标 (fromX) 和结束坐标 (toX)。
- mousemove 事件监听器用于检测 Shift 键的按下和释放，并更新 coordinates.shiftKey 的值。
- crossHairEvent 函数在每次十字光标移动时被调用。它首先检查 Shift 键是否被按下，以及 coordinates.fromX 是否为空。如果 Shift 键被按下且 coordinates.fromX 为空，则将 param.time 赋值给 coordinates.fromX。 类似地，当 Shift 键被释放且 coordinates.toX 为空时，将 param.time 赋值给 coordinates.toX。
- 当 coordinates.fromX 和 coordinates.toX 都有值时，将它们的值分别赋值给 fromX 和 toX 变量，并将 coordinates.fromX 和 coordinates.toX 重置为 null，以便下次可以重新记录坐标。
注意事项
- 此解决方案依赖于 Shift 键的状态来模拟十字光标移动的开始和结束。 你可以根据实际需求修改此逻辑。
- param.time 的具体类型取决于 lightweight-charts 的配置。 请确保正确处理此值。
- 此代码示例仅用于演示目的，可能需要根据实际情况进行调整。
总结
通过结合 addEventListener 和 subscribeCrosshairMove() 函数，并利用状态变量来跟踪十字光标的移动状态，我们可以准确地获取十字光标首次和最后一次移动时的 X 坐标值。 这种方法可以应用于各种需要精确获取十字光标坐标数据的场景。
