使用新数据更新每个 AJAX 请求的 HTML 画布标签

如果找到新用户或现有用户有新连接，我想在每个 AJAX 请求上更新我的画布.

我有用户和他们之间的联系:

 var data=[{身份证":38，连接":[39,40]，名称":ABC"},{身份证":39，连接":[40]，名称":pqr"},{身份证":40，连接":[]，名称":lmn"}]

在上面的示例中，具有 Id:38 的用户连接到 user 39 和 40 并且 user 39 连接到用户 40 和用户 40 已经连接到 user 39 和 user 38 所以 user 40 连接数组是空白的.

我有一个网络服务，我将每 1-2 秒触发一次，以在此页面上显示新加入的用户，以及我存储在我的表中的现有用户之间的新连接，此网络服务将获取所有用户及其连接.

所以一开始我的页面会加载，但之后我的页面不会刷新，并且应该显示新用户，并且应该通过 AJAX 调用连接到我的 Web 服务的新连接.

但是有了 ajax 请求，一切都变得一团糟.这是我创建的

正如您在我的 JSBin 输出中看到的那样，我只有 4 个用户和 3 个连接，那么它应该只有 4 个矩形，我没有添加更多用户，但仍然得到这个混乱的输出.

源码参考:

解决方案

盒子没有移动，因为移动它们的代码从未被调用过.

如果您将动画框的部分从 updateUsers() 移动到您的主动画循环，它们将动画化.

从这部分移动部分:

function updateUsers() {获取数据()；//这部分  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  ---------$.each(用户，功能(索引，用户){if (user.x <= 0) user.dir.x = 1;if (user.x + user.width > canvas.width) user.dir.x = -1;if (user.y <= 0) user.dir.y = 1;if (user.y + user.height > canvas.height) user.dir.y = -1;用户.x += 用户.dir.x;用户.y += 用户.dir.y;});//到这里  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -----------//window.setTimeout(updateUsers, 1000/60);window.setTimeout(updateUsers, 9000);}

到这里:

function drawUsers() {ctx.clearRect(0, 0, canvas.width, canvas.height);$.each(用户，功能(索引，用户){ctx.beginPath();ctx.rect(user.x, user.y, user.width, user.height);ctx.strokeStyle = '红色';ctx.stroke();if (user.connections != null) {user.connections.forEach(function(id) {const other = users.find(user => user.id === id);ctx.beginPath();ctx.moveTo(user.x + (user.width/2), user.y + (user.height/2));ctx.lineTo(other.x + (other.width/2), other.y + (other.height/2));ctx.strokeStyle = '黑色';ctx.stroke();});}});//这里动画$.each(用户，功能(索引，用户){if (user.x <= 0) user.dir.x = 1;if (user.x + user.width > canvas.width) user.dir.x = -1;if (user.y <= 0) user.dir.y = 1;if (user.y + user.height > canvas.height) user.dir.y = -1;用户.x += 用户.dir.x;用户.y += 用户.dir.y;});window.requestAnimationFrame(drawUsers);}

由于我们无法访问您正在使用的 Web 服务，并且假设数据已正确返回，我不得不取消对预定义数据的注释以进行工作演示:

更新的 jsbin

I want to update my canvas on every AJAX request if new user is found or there is new connection of existing users.

I have users and connections between them:

 var data=[
           {
              "Id": 38,
               "Connections":[39,40],
               "Name":"ABc"
          },
           {
              "Id": 39,
               "Connections":[40],
               "Name":"pqr"
           },
           {
               "Id": 40,
               "Connections":[],
               "Name":"lmn"
           }]

In the above example user with Id:38 is connected to user 39 and 40 and user 39 is connected to user 40 and user 40 is already connected to user 39 and user 38 so user 40 Connection array is blank.

I have one web service which I will fire every 1-2 seconds to display newly joined users on this page and new connection between existing users which I have stored in my table and this web service will fetch all users along with their connections.

So at first my page will load but after then my page will not refresh and new users should be displayed and new connections should be connected with AJAX call to my web service.

But with ajax request everything gets messed up. This is a JSBin I have created.

Output I am getting:

I have just 4 users and 3 connections as you can see in my JSBin output then it should be just 4 rectangles and I am not adding more users but still getting this messy output.

Source code reference: Reference Fiddle

I am trying to get the output as shown in above fiddle but not getting.

Expected output: 4 rectangles with animation

Updated Js bin Demo: Updated JSBin

With above updated JSBin I am getting this output but they are not moving (animation is not working):

解决方案

The boxes aren't moving because the code for moving them is never called.

If you move the part animating the boxes from updateUsers() to your main animation loop they will animate.

Move the section from this part:

function updateUsers() {
  fetchData();

  // this part ------------------------------------------------------
  $.each(users, function(index, user) {
    if (user.x <= 0) user.dir.x = 1;
    if (user.x + user.width > canvas.width) user.dir.x = -1;
    if (user.y <= 0) user.dir.y = 1;
    if (user.y + user.height > canvas.height) user.dir.y = -1;

    user.x += user.dir.x;
    user.y += user.dir.y;
  });
  // to here --------------------------------------------------------

  //window.setTimeout(updateUsers, 1000 / 60);
  window.setTimeout(updateUsers, 9000);
}

to here:

function drawUsers() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  $.each(users, function(index, user) {
    ctx.beginPath();
    ctx.rect(user.x, user.y, user.width, user.height);
    ctx.strokeStyle = 'red';
    ctx.stroke();

    if (user.connections != null) {
      user.connections.forEach(function(id) {
        const other = users.find(user => user.id === id);

        ctx.beginPath();
        ctx.moveTo(user.x + (user.width / 2), user.y + (user.height / 2));
        ctx.lineTo(other.x + (other.width / 2), other.y + (other.height / 2));
        ctx.strokeStyle = 'black';
        ctx.stroke();
      });
    }
  });

  // animate here
  $.each(users, function(index, user) {
    if (user.x <= 0) user.dir.x = 1;
    if (user.x + user.width > canvas.width) user.dir.x = -1;
    if (user.y <= 0) user.dir.y = 1;
    if (user.y + user.height > canvas.height) user.dir.y = -1;

    user.x += user.dir.x;
    user.y += user.dir.y;
  });
  window.requestAnimationFrame(drawUsers);
}

Since we don't have access to the web service you're using, and assuming the data is correctly returned, I had to uncomment the predefined data to make a working demo:

Updated jsbin