Zaktualizuj znacznik canvas HTML na każdym żądaniu AJAX z nowymi danymi

Question

Chcę zaktualizować moje płótno na każde żądanie AJAX, jeśli zostanie znaleziony nowy użytkownik lub nowe połączenie istniejących użytkowników.

Mam użytkowników i połączeń między nimi:

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

w powyższym przykładzie użytkownik z Id:38 jest podłączony do user 39 and 40 i user 39 is connected to user 40 and user 40 jest już podłączony do user 39 and user 38 so user 40 Connection array is blank.

Mam jedną usługę internetową, którą będę uruchamiać co 1-2 sekundy, aby wyświetlić nowo przyłączonych użytkowników na tej stronie i nowe połączenie między istniejącymi użytkownikami, które zapisałem w moim stole, a ta usługa internetowa pobierze wszystkich użytkowników wraz z ich znajomości.

Na początku moja strona zostanie załadowana, ale potem moja strona nie zostanie odświeżona, a nowi użytkownicy powinni zostać wyświetleni, a nowe połączenia powinny być połączone z połączeniem AJAX z moją usługą sieciową.

Ale z prośbą o ajax wszystko jest popsute. To jest JSBin I have created.

Wyjście Dostaję:

Mam tylko 4 użytkowników i 3 połączenia jak widać w moim wyjściu JSBin to powinno być tylko 4 prostokąty i nie jestem dodanie większej liczby użytkowników, ale nadal uzyskiwanie tego niechlujnego wyjścia.

Źródło Kod referencyjny: Reference Fiddle

Próbuję uzyskać dane wyjściowe, jak pokazano na powyższym skrzypce, ale nie dostaję.

Oczekiwany wyjście: 4 prostokąty z animacją

Updated Js bin Demo: Updated JSBin

Z wyżej zaktualizowanym JSBin jestem coraz to wyjście, ale nie są one ruchomej (animacja nie działa):

Answer 1

skrzynki nie są w ruchu, ponieważ kod fo r ich przenoszenie nigdy nie jest wywoływane.

Po przeniesieniu części animującej pola z updateUsers() do głównej pętli animacji będą animowane.

przesunąć punkt z tej strony:

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

tutaj:

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

Ponieważ nie mamy dostępu do usługi internetowej, której używasz, i zakładając, że dane są poprawnie wrócił, miałem odkomentowac predefiniowanych danych, aby demo robocza:

Updated jsbin

Answer 2

Pracowałem z Twojego Source Source Reference Fiddle, co działało całkiem dobrze.

Dodano kilka rzeczy:

pierwszy z funkcji oddzielnym dodać użytkownika do tablicy users. W ten sposób użytkownicy mogą być łatwo dodani po udanym wywołaniu usługi.

Po drugie, dodano kilka funkcji pomocnika, aby uzyskać losowe pozycje i wskazówki.

function addUser(user) { 
    users.push({ 
    id: user.UserId, 
    connections: user.Connections, 
    width: 80, 
    height: 80, 
    x: getRandomX(), 
    y: getRandomY(), 
    dir: { 
     x: getDir(), 
     y: getDir() 
    } 
    }); 
} 

// the success callback from your webservice 
// guess this receives a `user` object with Id and Connections 
// for the test we use `getRandomConnections` 
function getDataFromWebService() { 
    let newUser = { "UserId": Date.now(), "Connections": getRandomConnections() }; 
    addUser(newUser); 
} 

Fiddle

Po podłączeniu usługa, można rów funkcję getRandomConnections i odniesienie. W swojej Zestawienie sukces zwrotnego, upewnij się, że obiekt w formacie:

{ UserId: 1337, Connections: [1, 2] } 

przepustkę tego obiektu do funkcji addUser.