javascript - pixi 无限滚动条

Question

有没有办法让 Canvas 对象滚动到内容之外。例子:用 1000*1000 创建的 Canvas 。并在 Canvas 上启用 PAN 和 Zoom。在 Canvas 上绘制一个矩形并用鼠标将矩形移动到边界的边缘(上、右、下、左)它应该将矩形滚动到 Canvas 的末端。

现在我的问题是我可以将矩形拖动到浏览器边界。我需要允许矩形拖到内容之外，以便我可以使用整个 Canvas 。我可以平移 Canvas 以在浏览器中移动。

谢谢

Answer 1

PIXI 只是一个在 Canvas 上绘制内容的渲染引擎。 PIXI 没有任何机制来控制网页上的 Canvas 位置。

解决您的用例的最有效方法可能是:

• 使 Canvas 完全适合屏幕(不要将其扩展到屏幕边界之外，永远不要将 Canvas 作为 DOM 对象进行平移或缩放)。
• 制作“内容”PIXI.Container 来保存您的内容(舞台 -> 内容 -> 矩形)，并根据需要更改“内容”容器位置以在 Canvas 内滚动内容。

如果你执意要操作canvas的位置，可以绝对定位到网页上，当做DOM对象来操作。

无论采用何种方法，您都必须检测到拖放接近边缘并在代码中手动进行平移。据我所知，PIXI 中没有任何东西可以促进这一点。