如何使请求动画帧方法模块化?

Question

我编写了如下所示的简单函数，用于在鼠标移动靠近边缘和侧面时对画布背景进行动画处理

世界.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然后根据如下所示编辑代码：

世界.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);
}
}

我的画布.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 [movementStatus,canvasPoint_X,canvasPoint_Y];而不是return movementStatus,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);
}