时间戳

首页 > 解决方案 > 在 js 中平移和缩放“无限”方格纸背景

javascript - 在 js 中平移和缩放“无限”方格纸背景

问题描述

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

我能想到的最接近的例子是：https ://www.desmos.com/calculator 。此外，我将在该网格顶部放置不同的元素并移动它们。为此，我计划使用 React，这不会有太大问题。我遇到的主要问题是如何构建上述背景，以便它可以检查我的所有要求。我能够绘制一个网格，但是对于四处移动和放大和缩小（这样网格“顶部”的所有元素也可以放大和缩小）对我来说是具有挑战性的。我也希望它可以在不使用任何特定绘图库和纯 JS 的情况下完成，但我愿意接受建议。任何帮助将不胜感激。

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

标签： javascripthtmlcssreactjs

解决方案

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

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

https://codepen.io/osiv/pen/gOwxmvO

这绝对是一项正在进行的工作，但它给出了我正在为之工作的想法。缩放基本上是防止默认滚轮行为并更改背景图像大小：

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
    }
}

推荐阅读