使用新数据更新每个ajax请求的html canvas标记 [英] Update html canvas tag on every ajax request with new data

问题描述

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

我有用户和

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

Id：38 连接到用户39和40 和用户39连接到用户40和用户40 已经
连接到用户39和用户38，因此用户40连接数组为空白。

我有 1个网络服务，我每1-2秒就会触发 在此页面上显示新加入的用户，并且已经存储在我的表中的现有用户与此Web服务之间的新连接将获取所有用户及其连接。

首先我的页面将加载，但之后我的页面不会刷新，新的用户应该显示和新的连接应该
连接与 ajax调用我的web服务。

但是对于ajax请求，一切都乱了。这是我创建的js bin：

我只有4个用户和3个连接，你可以在我的 js bin输出

源代码参考：

解决方案

如果你移动零件的动画框从

从这个部分移动部分：

  function updateUsers（）{
 fetchData（）; 
 
 //这部分-------------------------------------- ---------------- 
 $ .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.setTimeout(updateUsers，1000/60）; 
 window.setTimeout（updateUsers，9000）; 
} 
  

到这里：

< pre class =lang-js prettyprint-override> 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）;
}


由于我们无法访问您正在使用的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 1 web service which i will fires 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 1 js bin i have created:Demo

Output i am getting:

I have just 4 users and 3 connections as you can see in my js bin 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

Can anybody please help me with this as i am totally new in canvas.

Updated Js bin Demo:Updated Js Bin

With above updated js bin 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 canvas标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！