javascript - 如何使 requestAnimationFrame 方法模块化？

标签 javascript html requestanimationframe

我编写了一个如下所示的简单函数，当鼠标移动靠近边缘和侧面时，为 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

我在这里做错了什么？

提前致谢。

最佳答案

您错误地返回了元素，您需要将元素作为数组返回，而不是 return [movementStatus,canvasPoint_X,canvasPoint_Y]; 作为 return movingStatus,canvasPoint_X,canvasPoint_Y; 只会返回导致错误的 canvasPoint_Y

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

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

console.log(x, y, z);

编辑: 并非函数 moveCanvas 的所有路径都返回数组，例如函数的最后一行，请考虑先存储返回值并检查它是否是数组:

问题

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

关于javascript - 如何使 requestAnimationFrame 方法模块化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59263240/

上一篇：javascript - vuejs - 渲染类

下一篇：javascript - Ajax使用session时不上传文件

相关文章：

javascript - 点击事件冒泡问题

javascript - 确定何时以 HTML 加载图像？

javascript - 在 div 之间交换类

javascript - 对于长选项值，选择下拉菜单将离开屏幕

html - text-center 和 text-right 在 bootstrap 中不起作用

javascript - 使用 requestAnimationFrame 对 HTML 视频进行动画处理

javascript - 如何重命名 native 窗口函数以便删除两行？

javascript - 查找幂集的加权子集和的最大值

html - 如何使本身以百分比定义的父div的固定div宽度？

javascript - 延迟 globalTick() JS 中每个 Sprite 的 tick()

©2024 IT工具网  联系我们