Странные проблемы с Javascript "многомерными массивами" (т.е. массивами массивов) - PullRequest
Новая
       44

Странные проблемы с Javascript "многомерными массивами" (т.е. массивами массивов)

0 голосов
/ 25 июня 2019

Я работал над проектом в Javascript и после определенного этапа разработки код перестал работать.Я сузил проблему до создания и индексации «многомерных» массивов в Javascript.Я включил код только для проверки создания массивов массивов, присвоения цветовых значений массивам, а затем проверки, могут ли значения отображаться на экране с помощью цикла, который повторяет «многомерный массив».

Я пробовал практически каждый метод создания массивов массивов в Javascript - некоторые фрагменты кода из ответов даже здесь - но ничего не помогло. 

function setRGB(image, width1, x1, y1, r, g, b, a) {
  var t1 = y1 * width1 * 4 + x1 * 4;
  image.data[t1] = r;
  image.data[t1 + 1] = g;
  image.data[t1 + 2] = b;
  image.data[t1 + 3] = a;
}

function draw() {
  var pixels = [];
  for (var i = 0; i < height; ++i) {
    var row = [];
    for (var j = 0; j < width; ++j) {
      row[j] = 0;
    }
    pixels[i] = row;
  }

  var k = 12;
  var j = 29;
  console.log(pixels[12][29].toString());

  var canvas = document.getElementById('test');
  var width = 500;
  var height = 500;
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  var canvasImage = ctx.getImageData(0, 0, width, height);
  var testImage = ctx.createImageData(width, height);

  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      pixels[y][x] = Math.round(Math.random() * 255);
    }
  }

  for (y = 0; y < height; ++y) {
    for (x = 0; x < width; ++x) {
      console.log(pixels[y][x].toString());
    }
  }

  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      setRGB(testImage, width, pixels[y][x], pixels[y][x], pixels[y][x], 255);
      ctx.putImageData(testImage, 0, 0);
      canvasImage = testImage;
      ctx.putImageData(canvasImage, 0, 0);
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Array test</title>
</head>

<body onload="draw();">
  <canvas id="test">Sorry, but your browser doesn't support the 'canvas' element.</canvas>
</body>

</html>

В Google Chrome на экране ничего не отображается, а в веб-консоли отображается ошибка: 

array-plot-test-1.html:26 Uncaught TypeError: Cannot read property '29' of undefined
    at draw (array-plot-test-1.html:26)
    at onload (array-plot-test-1.html:60)

, даже если массивМассивы индексируются в цикле создания.

Первый раз, когда массив индексируется вне цикла создания, состоит из тестового кода: 

var k = 12;
var j = 29; 
console.log(pixels[12][29].toString());

В Mozilla Firefox я получаю сообщение об ошибке: 

TypeError: pixels[12] is undefined[Learn More] array-plot-test-1.html:26:3
    draw file:///[censored]/[censored]/[censored]/array-plot-test-1.html:26
    onload file:///[censored]/[censored]/[censored]/array-plot-test-1.html:1

Я переписывал тестовый код массива около десятка раз, по крайней мере, используя «решения», предоставляемые такими сайтами, как Stack Overflow, но пока ничего не получалось.Я ожидаю, что есть какая-то базовая ошибка, которую я сделал.

Любопытно, если я создаю "многомерный массив" в Javascript, например, 

array1 = [];
for (var i=0; i < max; ++i) {
  var temp = [1, 2, 3];
  array[i] = temp;
}

с предопределенным массивом, тогда Javascript «многомерные массивы» работают нормально, но мне нужны массивы массивов произвольного размера, поэтому я не могу использовать приведенный выше фрагмент кода.

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Вы определили width и height после , используя их.Вам нужно определить их , прежде чем использовать их.

Вы также не передавали x и y для установки RGB

Я предлагаю вам узнать, как использовать отладчик в вашем браузере.

Не уверен, почему у вас это 

ctx.putImageData(testImage, 0, 0);
canvasImage = testImage;
ctx.putImageData(canvasImage, 0, 0)

в вашем цикле.Вы дважды рисуете одно и то же 500x500 раз.Вы не увидите результат, пока ваша функция draw не закроется, поэтому нет причин делать это внутри цикла.Просто переместите его после цикла.

Кроме того, поместите 

“use strict”;

в верхней части JavaScript и никогда не используйте var, используйте const и let, поскольку они помогутВы найдете такие проблемы. 

function setRGB(image, width1, x1, y1, r, g, b, a) {
  var t1 = y1 * width1 * 4 + x1 * 4;
  image.data[t1] = r;
  image.data[t1 + 1] = g;
  image.data[t1 + 2] = b;
  image.data[t1 + 3] = a;
}

function draw() {
  var width = 500;
  var height = 500;
  var pixels = [];
  for (var i = 0; i < height; ++i) {
    var row = [];
    for (var j = 0; j < width; ++j) {
      row[j] = 0;
    }
    pixels[i] = row;
  }

  var k = 12;
  var j = 29;
  console.log(pixels[12][29].toString());

  var canvas = document.getElementById('test');
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  var testImage = ctx.createImageData(width, height);
  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      pixels[y][x] = Math.round(Math.random() * 255);
    }
  }

  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      setRGB(testImage, width, x, y, pixels[y][x], pixels[y][x], pixels[y][x], 255);
    }
  }
  ctx.putImageData(testImage, 0, 0);
}

draw();
<canvas id="test"></canvas>
0 голосов
/ 25 июня 2019

Кажется, что проблемы были вызваны некоторыми глупыми ошибками, в том числе случайно не замеченными, что переменные ширины и высоты еще не были объявлены, а также моей неспособностью передать setRGB () его значения x и y.

Спасибо всем, кто помог:)

jdb2

...