Question

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

<!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]]

Answer 1

将代码更改为class RecentlyPlayed(generics.ListCreateAPIView): serializer_class = UserRecentlyPlayedSerializer即可使用。当前，您只是将items.push([image,x,y]);，image和x推为数组的元素。但是执行y会推送包含元素[image,x,y]，image和x的数组。

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);

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

1 个答案: