Javascript 在一个“点”上平移和缩放；“无限”；js中的图形纸背景

对于我正在进行的一个项目，我希望有一个可以无限期平移、放大和缩小的背景，并在该背景上定位和移动元素

我能想到的最接近的例子是：。此外，我会将不同的元素放置在网格的顶部，并将它们四处移动。为此，我计划使用React，这不会有多大问题。我面临的主要问题是如何构建上述背景，以便它能够检查我的所有需求。我能够画一个网格，但是移动和放大（比如网格顶部的所有元素也可以上下缩放）对我来说是一个挑战。我也希望它可以在不使用任何特定的绘图库和纯JS的情况下完成，但我愿意接受建议。任何帮助都将不胜感激

---

另外，我正在寻找如何实现目标的一般指导方针。例如，不同的技术或方法，而不是具体的解决方案。如果问题太模糊或格式不正确，我深表歉意，因为这是我第一次在这里提问。

Desmos使用画布绘制“无限”网格。您可以使用类似three.js或konva.js的东西来实现这一点。canvas的一个缺点是不能将HTML元素放置在网格上

编辑：使用三个JS，可以使用gridHelper函数并通过Pi设置围绕x轴的旋转。这将为您提供一个“2d”网格。然而，我发现gsap和Draggable插件更适合这种情况

这肯定是一个正在进行的工作，但它给出了我工作的想法。缩放基本上是防止默认控制盘行为和更改背景图像大小：

handleWheelEvent(e) {
    e.preventDefault();
    let el = document.getElementById("grid-container");
    let currengBackgroundSize = this.getPixelStringAsInteger(getComputedStyle(el).backgroundSize);
    if(e.deltaY < 0) {
        // decrease size
    } else {
        // increase size
    }
}

HandleHeelevent（e）{
e、 预防默认值（）；
设el=document.getElementById（“网格容器”）；
让currengBackgroundSize=this.getPixelStringAsInteger（getComputedStyle（el.backgroundSize））；
如果（e.deltaY<0）{
//缩小尺寸
}否则{
//增大尺寸
}
}

我也在尝试这样做！你能给我指一下three.js文档中解决这个问题的地方吗？谢谢谢谢你，马特。是的，canvas不允许在网格上使用HTML元素的缺点是阻止我使用它。我当前的设置包括使用线性渐变作为背景图像，但缩放和平移的问题仍然存在。@markes试试这个-codepen.io/osiv/pen/dypzvvQ您可以使用gsap+Draggable来帮助平移。通过使用onDrag回调并侦听BoundingClientLeft/right、top/bottom是否在边缘的阈值内，您应该能够使容器的宽度/高度动态化。在画布上使用html方法时，缩放有点困难。我能够通过阻止默认控制盘事件，然后修改网格的“背景大小”来实现这一点。但是，您需要相应地缩放所有子对象的x、y坐标和大小。