Question

所以我需要将我的方形传输到页面的一角，然后再传输到其原始位置。怎么让它转回原来的地方？我试图将值存储在数组中，但由于某种原因它不起作用

            class Square {
        constructor() {
            this.c = document.createElement("CANVAS");
            this.c.width = 100;
            this.c.height = 100;
            this.c.getContext("2d").strokeRect(0, 0, 100, 100);
            document.body.appendChild(this.c);
            this.appear();
            this.move();
        }
        appear() {
            this.arr = [];
            this.numHeight = Math.random() * document.body.clientHeight;
            this.numWidth = Math.random() * document.body.clientWidth;
            if (this.numHeight < document.body.clientHeight - 100) {
                this.c.style.top = `${this.numHeight}px`;
                this.arr.push(this.c.style.top = `${this.numHeight}px`)
            } else {
                this.c.style.top = `${this.numHeight - 100}px`;
                this.arr.push(this.c.style.top = `${this.numHeight - 100}px`)
            }
            if (this.numWidth < document.body.clientWidth - 100) {
                this.c.style.left = `${this.numWidth}px`;
                this.arr.push(this.c.style.left = `${this.numWidth}px`)
            } else {
                this.c.style.left = `${this.numWidth - 100}px`;
                this.arr.push(this.c.style.left = `${this.numWidth - 100}px`)
            }
            console.log(this.arr)
        }
        move() {
            setTimeout(() => {
                this.c.style.transform = `translate(${document.body.clientWidth - parseInt(this.c.style.left) - 101}px,${document.body.clientHeight - parseInt(this.c.style.top) - 101}px)`
            }, 500);
            setTimeout(() => {
                this.c.style.transform = `translate(${this.arr[1]},${this.arr[0]})`
            }, 2000);
        };

    }
    for (let i = 0; i < 1; i++) {
        new Square
    }

Answer 1

这里的问题是理解 translate 的工作原理。您已经使用 top 和 left 设置了原始位置。因此，要将对象返回到其原始位置，您只需将平移值更改为 0。

class Square {
  constructor() {
    this.c = document.createElement("CANVAS");
    this.c.width = 100;
    this.c.height = 100;
    this.c.getContext("2d").strokeRect(0, 0, 100, 100);
    document.body.appendChild(this.c);
    this.appear();
    this.move();
  }
  appear() {
    this.numHeight = Math.random() * document.body.clientHeight;
    this.numWidth = Math.random() * document.body.clientWidth;
    if (this.numHeight < document.body.clientHeight - 100) {
      this.c.style.top = `${this.numHeight}px`;
    } else {
      this.c.style.top = `${this.numHeight - 100}px`;
    }
    if (this.numWidth < document.body.clientWidth - 100) {
      this.c.style.left = `${this.numWidth}px`;
    } else {
      this.c.style.left = `${this.numWidth - 100}px`;
    }
  }
  move() {
    setTimeout(() => {
      const xTransl = document.body.clientWidth - parseInt(this.c.style.left) - 101
      const yTransl = document.body.clientHeight - parseInt(this.c.style.top) - 101
      this.c.style.transform = `translate(${xTransl}px,${yTransl}px)`
    }, 500);
    setTimeout(() => {
      this.c.style.transform = "translate(0px, 0px)"
    }, 2000);
  };

}
for (let i = 0; i < 1; i++) {
  new Square
}

<html>

<body>
</body>

</html>

由于平移将始终相对于其原始位置（由顶部和左侧定义）移动对象，因此任何其他不为 0 的值将继续将对象移动到不同的位置。

如何将对象移动到其原始位置js？

1 个答案: