如何將object移動到它原來的地方js？

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是如何工作的。 您已經將原始 position 設置為top和left 。 因此，要將 object 返回到其原始 position，您只需將轉換值更改為 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>

由於 translate 將始終將 object 相對於其原始 position（由頂部和左側定義）移動，任何其他不為 0 的值將繼續將 object 移動到不同的位置。

如何將object移動到它原來的地方js？

問題描述

1 個解決方案

解決方案1
0 2021-01-21 10:46:57

如何將object移動到它原來的地方js？

問題描述

1 個解決方案

解決方案1 0 2021-01-21 10:46:57

解決方案1
0 2021-01-21 10:46:57