Question

我有一个名为Contorno

的数组

CONTORNO = [{
    tipo: "m",
    x: [0, 0]
  },
  {
    tipo: "l",
    x: [0.06, 0],
    x: [0.06, 0.04],
    x: [0.14, 0.04],
    x: [0.14, 0],
    x: [0.24, 0],
    x: [0.24, 0.04],
    x: [0.34, 0.04],
    x: [0.34, 0],
    x: [0.44, 0],
    x: [0.44, 0.04],
    x: [0.54, 0.04],
    x: [0.54, 0],
    x: [0.64, 0],
    x: [0.64, 0.04],
    x: [0.74, 0.04],
    x: [0.74, 0],
    x: [0.8, 0],
    x: [0.8, 1],
    x: [0.40, 0.55],
    x: [0, 1]
  }

]

然后我调用此处定义的函数caminho()：

function caminho(c, a) {
  c.beginPath();
 for (var i = 0; i < a.length; i++) {
   if (a[i].tipo === "m") {
    c.moveTo(a[i].x[0], a[i].x[1]);
    }else if (a[i].tipo === "l") {
      c.lineTo(a[i].x[0], a[i].x[1]);
   }
  }

 }

问题是当我打电话给他时

var c = document.getElementById("acanvas").getContext("2d");
caminho(c,CONTORNO);

它并没有绘制所有的点而只是一个，我的意思是它没有通过for循环中的所有点。

有什么问题？

Answer 1

您的对象元素具有重复的x个键。

a[i].x[0]似乎是您指定的最终x密钥，即[0,1]。

你有：

{
  tipo: "l",
  x: [2 d array],
  x: [2 d array]
}

哪个不合法。

你可能想要：

{
  tipo: "l",
  x: [...a bunch of two dimensional arrays...]
}

Answer 2

正如其他人所说，你不能在对象中拥有重复的键。最好的方法是重组您的数据。例如，使用包含所有位置的数组。

如果您要访问typo等于l的所有位置，则会显示如何从中选择位置的代码。使用：

CONTORNO = 
[
  {
    tipo: "m",
    pos: [ [0, 0] ]
  },
  {
    tipo: "l",
    pos: [ [0.06, 0], [0.06, 0.04], [0.14, 0.04], [0.14, 0], [0.24, 0], [0.24, 0.04], [0.34, 0.04], [0.34, 0], [0.44, 0], [0.44, 0.04], [0.54, 0.04], [0.54, 0], [0.64, 0], [0.64, 0.04], [0.74, 0.04], [0.74, 0], [0.8, 0], [0.8, 1], [0.40, 0.55], [0, 1] ]
  }
]

function caminho(c, a) {
  c.beginPath();
  a.forEach(function(value, i) {
    if (value.tipo === "m") {
      c.moveTo(value.pos[i][0], value.pos[i][1]);
    } else if (value.tipo === "l") {
      value.pos.forEach(function(pos, j) {
        c.lineTo(pos[0], pos[1]);
      });
    }
  });
}

内部.forEach()将遍历位置数组。

为什么数组没有传递所有的值js

2 个答案: