如何启用拖动控件以滚动和扩展所选内容

How to enable dragging off the control to scroll and extend the selection

本文关键字：扩展 滚动 控件 何启用 启用 拖动      更新时间：2023-09-26

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

我接下来要做的是允许用户通过单击并拖出画布来扩展选择。我不需要帮助与实际的代码，但我想知道是否有人编程这样的东西之前，如果是这样，他们是如何接近它?以下是我能想到的方法:

  • 在控件上跟踪鼠标的大致方向，在mouseLeave+mouseDown上设置一个计时器来滚动该方向，直到mouseEnter+mouseDown
  • 确定鼠标在mouseLeave+mouseDown之前的最后位置，并使用它来确定滚动方向
  • 当鼠标处于边缘的几个像素内(边缘决定方向)时开始缓慢滚动，然后在mouseLeave+mouseDown上快速滚动
  • 某种程度上涉及到窗口。鼠标移动(而不是canvas.mouseMove)，并以这种方式跟踪它(这对我来说似乎真的很丑)
  • 我遗漏的一些东西，回想起来会很明显

我可以处理代码，我只是想找出最好的概念性方法。理想情况下，我喜欢处理对角线扩展选择(同时向右和向下滚动，或者至少在两者之间交替，这样看起来就像那样)，但这不是一个交易破坏

您可以使用.setCapture让您的画布继续获取鼠标事件，即使鼠标移动到画布之外:

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

相关文章：