时间戳

首页 > 解决方案 > Javascript 追加数组以创建嵌套数组

javascript - Javascript 追加数组以创建嵌套数组

问题描述

在画布上，我正在捕获鼠标点击坐标，我想将其保存为单独的数组......并且通过多次点击，想要创建一个嵌套数组，其中包含每次点击的多个数组。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>parallelogram</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
   <p id="status"> | </p>
</body>
</html>

<script type="text/javascript">
var items = [];
var image = "image.jpg";

function init(){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.canvas.addEventListener('click', function(event) {
    var x = event.clientX - ctx.canvas.offsetLeft;
    var y = event.clientY - ctx.canvas.offsetTop;
    var status = document.getElementById('status');
    status.innerHTML = x+ "|" + y;
    items.push(image,x,y);
    console.log(items);
  })
}

window.addEventListener('load', init, false);

</script>

但是，我将新数组作为连续元素而不是作为数组附加到旧数组。我尝试使用push,push.apply等concat，但它们不起作用。

以下是我在随后的两次点击中获得的输出：

(6) ["image.jpg", 158, 194, "image.jpg", 254, 183]

而所需的输出是

[["image.jpg", 158, 194], ["image.jpg", 254,183]]

标签： javascriptarrays

解决方案

将您的代码更改为items.push([image,x,y]);，它可以工作。目前，您只是将image,x和y作为数组的一个元素。但是这样做会推送一个包含元素和的[image,x,y]数组。imagexy

var items = [];
var image = "image.jpg";

function init(){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.canvas.addEventListener('click', function(event) {
    var x = event.clientX - ctx.canvas.offsetLeft;
    var y = event.clientY - ctx.canvas.offsetTop;
    var status = document.getElementById('status');
    status.innerHTML = x+ "|" + y;
    items.push([image,x,y]);
    console.log(items);
  })
}

window.addEventListener('load', init, false);
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
   <p id="status"> | </p>

推荐阅读