p5.js

Question

var grid;
function setup() {
  createCanvas(800, 800);
  grid = {
    x1: width / 10,
    y1: height / 10,
    x2: width - grid.x1,
    y2: height - grid.y1,
    width: grid.x2 - grid.x1,
    height: grid.y2 - grid.y1,
    margin: grid.width / 10,
    //margin of each lines
  };

  background(255);

}

function draw() {
  grid();
  DDA(grid.x1, grid.y1, grid.margin, grid.margin);
}
// ......

我看到了这个问题，我将我的代码改成了这个，但是它不起作用并且有一个错误

"Line 4, col 3: Reassignment of 'grid', which is is a function. Use 'var' or 'let' to declare bindings that may change."

我正在使用 p5.js 制作网格图

Answer 1

在JavaScript中，变量和函数不能同名。（更令人困惑的是，函数是变量！）

您的错误告诉您您有一个 grid 变量和一个 grid() 函数。您是否在其他地方定义了 grid() 函数？如果是这样，只需将 var grid 重命名为其他名称，这样它就不会与函数冲突。

如果您在任何地方都没有定义 grid() 函数，那可能是因为您调用 grid() 就像是在 draw() 函数中调用函数，而这并没有您 post 编写的代码没有意义。在您的代码中，grid 是一个对象，而不是函数。

如果您仍然遇到问题，请在新问题 post 中 post MCVE。（您 post 编辑的代码没有显示您所描述的行为，因为它不完整。我们应该能够复制粘贴您的代码以查看完全相同的内容和你一样。)

Answer 2

您需要将网格变量中的所有子变量都放在网格启动函数中，如下所示：

grid = {
  start : function(){
    x1: width / 10,
    y1: height / 10,
    x2: width - grid.x1,
    y2: height - grid.y1,
    width: grid.x2 - grid.x1,
    height: grid.y2 - grid.y1,
    margin: grid.width / 10,
    //margin of each lines
  }
};
grid.start();

使用此代码并替换旧的网格变量。

p5.js - 宽度未定义？

p5.js - width not defined?

javascript

processing

web