使用新数据更新每个 AJAX 请求上的 HTML 画布标签 [英] Update HTML canvas tag on every AJAX request with new data

问题描述

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

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

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

在上面的示例中，Id:38 的用户连接到 用户 39 和 40，用户 39 连接到用户 40 和用户 40 已经连接到用户 39 和用户 38 所以用户 40 连接数组为空.

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

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

但是有了 ajax 请求，一切都变得一团糟.这是一个

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

源代码参考:

解决方案

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

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

从这部分移动部分:

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

到这里:

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 = '红色';ctx.stroke();如果(用户连接！= 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(users, function(index, user) {如果 (user.x <= 0) user.dir.x = 1;if (user.x + user.width > canvas.width) user.dir.x = -1;如果 (user.y <= 0) user.dir.y = 1;if (user.y + user.height > canvas.height) user.dir.y = -1;用户.x += 用户.dir.x;user.y += user.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

这篇关于使用新数据更新每个 AJAX 请求上的 HTML 画布标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！