javascript - KineticJS：在固定舞台上模拟滚动的有效方法

Question

我有一个页面的布局方式与您在具有设定高度的包装器 div 内布置具有三个面板的锦标赛括号的方式非常相似。两个绿色面板是标准 HTML 列表，带有overflow-y: scroll, 所以它们可以上下滚动。白色面板是 KineticJS 舞台，不会滚动。

每条水平蓝线都“附加”到其中一个列表中的 LI。当用户向下滚动列表时，LI 向上移动（并且可能超出视野），水平线需要与它们一起“移动”，而垂直蓝线也需要这样做，以产生它们的错觉也在滚动。红色圆圈固定在中心。

现在，基于我对 HTML5 Canvases 和 KineticJS 的有限知识，我似乎需要添加一个.scroll()事件处理程序来调整线上的点并重绘图层。

我的问题是：这是实现这种效果的最有效方法吗？如果不是，我应该怎么做？

Answer 1

就像所有游戏一样做。

创建 2 个“额外”动力学组，每个组包含一组左水平+左垂直和右水平+右垂直线。

将新组放置在画布上方和下方的“舞台外”（我们称其为起始位置）。

当一个新的列表项从顶部/底部滚动到视图中时，也将相应的新组滚动到视图中。

在任何列表项滚出屏幕后，再次将该“额外”组滚出舞台。

这是关键......当任何“额外”组离开舞台时，您会将所有内容设置回起始位置。

这会产生无限括号线的错觉。