如何使 requestAnimationFrame 方法模块化？

Question

我写了一个像下面这样的简单函数，当鼠标移动发生在边缘和侧面附近时 canvas 背景动画

World.js 文件:

function onMouseMove(e) {
    x = window.scrollX+e.clientX - (window.scrollX + canvas_planets.getBoundingClientRect().left);
    y = window.scrollY+e.clientY - (window.scrollY + canvas_planets.getBoundingClientRect().top);
    if(movementStatus){
        pixels=3;
        moveCanvas();
    }
}
function moveCanvas() {
    movementStatus=false;
    // left top corner
    if(x <= 50 && y <= 50){
        if (canvasPoint_X > 0 && canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //left side
    if(x <= 50 && y > 50 && y < 450){
        if (canvasPoint_X > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X= canvasPoint_X-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //left bottom corner
    if(x <= 50 && y >= 450){
        if (canvasPoint_X > 0 && canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //top side
    if(x > 50 && x <= 450 && y <= 50){
        if (canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //bottom side
    if(x > 50 && x <= 450 && y >= 450){
        if (canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //right top corner
    if(x > 450 && y <= 50){
        if (canvasPoint_Y > 0 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //right side
    if(x > 450 && y > 50 && y < 450){
        if (canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //right bottom corner
    if(x > 450 && y >= 450){
        if (canvasPoint_Y < imageHeight-500 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    if (x > 495 || x < 5 || y >495 || y < 5){
        movementStatus =true;
        return;
    }
    requestAnimationFrame(moveCanvas);
}

在此之后，为了让我的脚本更具可读性，我决定将 movecanvas 方法放在一个名为 Mycanvas.js 的单独的 js 文件中，然后根据如下所示编辑代码：

World.js 文件:

function onMouseMove(e) {
    x = window.scrollX+e.clientX - (window.scrollX + canvas_planets.getBoundingClientRect().left);
    y = window.scrollY+e.clientY - (window.scrollY + canvas_planets.getBoundingClientRect().top);
    if(movementStatus){
        pixels=3;
        [movementStatus, canvasPoint_X, canvasPoint_Y] = myCanvas.moveCanvas(x,y,canvasPoint_X,canvasPoint_Y,ctx_stars,pixels,StarsImg,imageHeight,imageWidth);
    }
}

Mycanvas.js 文件:

export let movementStatus;
export const moveCanvas = (x,y,canvasPoint_X,canvasPoint_Y,ctx_stars,pixels,StarsImg,imageHeight,imageWidth) =>{
    movementStatus=false;
    if(x <= 50 && y <= 50){
        if (canvasPoint_X > 0 && canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x <= 50 && y > 50 && y < 450){
        if (canvasPoint_X > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X= canvasPoint_X-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x <= 50 && y >= 450){
        if (canvasPoint_X > 0 && canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
            console.log("sol alt köşe")
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 50 && x <= 450 && y <= 50){
        if (canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 50 && x <= 450 && y >= 450){
        if (canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    //sağ üst köşe
    if(x > 450 && y <= 50){
        if (canvasPoint_Y > 0 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 450 && y > 50 && y < 450){
        if (canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 450 && y >= 450){
        if (canvasPoint_Y < imageHeight-500 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if (x > 495 || x < 5 || y >495 || y < 5){
        movementStatus =true;
        return movementStatus,canvasPoint_X,canvasPoint_Y;
    }
    requestAnimationFrame(moveCanvas);
}

但是在这样做之后，我的工作脚本停止工作并开始给我一个休闲错误：

TypeError: Invalid attempt to destructure non-iterable instance

我做错了什么？

提前致谢。

Answer 1

你 return 错误地输入了元素，你需要 return 你的元素作为数组而不是 return [movementStatus,canvasPoint_X,canvasPoint_Y]; 因为 return movementStatus,canvasPoint_X,canvasPoint_Y; 只会 return canvasPoint_Y 导致错误

function fn() {
  return [1, 2, 3];
}

[x, y, z] = fn();

console.log(x, y, z);

编辑： 不是函数的所有路径 moveCanvas return 一个数组，例如函数的最后一行，考虑先存储 return 值并检查它是否是一个数组：

问题

function fn() {
  if (false)
    return [1, 2, 3];
}

[x, y, z] = fn();

console.log(x, y, z);

修复：

function fn() {
  if (false)
    return [1, 2, 3];
}

k = fn();

if (k != undefined) {
  console.log(...k);
} else {
  console.log(k);
}

如何使 requestAnimationFrame 方法模块化？

How can i make a requestAnimationFrame method modular?

html

javascript

requestanimationframe