如何启用拖动控件以滚动和扩展选择

Question

我正在使用HTML的Canvas创建一个自定义滚动控件，其行为有点像电子表格网格。我设置了大多数标准光标控制行为，包括使用鼠标或箭头键来扩展选择。

接下来我要做的是允许用户通过单击并拖动画布来扩展选择。我不需要实际代码的帮助，但是我想知道是否有人之前编写过类似的东西，如果有的话，他们是如何处理它的？以下是我能想到的方法：

• 在控件上跟踪鼠标的大致方向，在mouseLeave + mouseDown上设置一个定时器以滚动该方向，直到mouseEnter + mouseDown
• 在mouseLeave + mouseDown之前确定鼠标的最后位置并使用它来确定滚动方向
• 当鼠标位于边缘的几个像素内时（边缘确定方向）开始慢速滚动，然后在mouseLeave + mouseDown上滚动得更快
• 以某种方式涉及window.mouseMove（而不是canvas.mouseMove）并以这种方式跟踪它（这对我来说真的很难看）
• 我想念的其他东西，回想起来似乎很明显

我可以处理代码，我只是想弄清楚最好的概念方法。理想情况下，我喜欢对角地扩展选择（同时向右和向下滚动，或者至少在两者之间交替，所以它看起来那样），但这不是一个交易破坏者。

Answer 1

即使将鼠标移到画布外，您也可以使用.setCapture让画布继续获取鼠标事件：

https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture