HTML-Canvas-Tag bei jeder AJAX-Anfrage mit neuen Daten aktualisieren

Question

Ich möchte mein Canvas bei jeder AJAX-Anfrage aktualisieren, wenn ein neuer Benutzer gefunden wird oder eine neue Verbindung vorhandener Benutzer besteht.

Ich habe Benutzer und Verbindungen zwischen ihnen:

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

Im obigen Beispiel Benutzer mit Id:38-user 39 and 40 verbunden ist und user 39 is connected to user 40 and user 40 ist bereits user 39 and user 38 so user 40 Connection array is blank verbunden.

Ich habe einen Webdienst, den ich alle 1-2 Sekunden feuern werde, um neu verbundene Benutzer auf dieser Seite anzuzeigen und neue Verbindung zwischen vorhandenen Benutzern, die ich in meiner Tabelle gespeichert habe, und dieser Webdienst wird alle Benutzer zusammen mit ihren abrufen Verbindungen.

Also zuerst wird meine Seite geladen, aber danach wird meine Seite nicht aktualisiert und neue Benutzer sollten angezeigt werden und neue Verbindungen sollten mit AJAX-Anruf zu meinem Web-Service verbunden werden.

Aber mit Ajax Anfrage wird alles durcheinander gebracht. Dies ist ein JSBin I have created.

Output Ich erhalte:

Ich habe nur 4 Benutzer und 3-Verbindungen, wie Sie in meiner JSBin Ausgabe sehen können, dann sollte es nur 4 Rechtecken sein, und ich bin das Hinzufügen nicht mehr Benutzer aber immer noch diese unordentliche Ausgabe bekommen.

Quellcode Referenz: Reference Fiddle

Ich versuche, die Ausgabe zu erhalten, wie in oben Geige gezeigt, aber nicht immer.

Erwartete Ausgabe: 4 Rechtecke mit Animation

Aktualisiert Js bin Demo: Updated JSBin

Mit oben aktualisiert JSBin ich diesen Ausgang bin immer aber sie bewegen sich nicht (Animation nicht funktioniert):

Answer 1

die Kästen bewegen sich nicht, weil der Code fo r sie zu bewegen wird nie genannt.

Wenn Sie den Teil bewegen, der die Boxen von updateUsers() animiert, werden Sie animiert.

den Abschnitt aus diesem Teil verschieben:

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

hier:

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

Da wir Sie verwenden keinen Zugriff auf den Web-Service haben, und die Daten werden unter der Annahme, richtig Zurückkehren, hatte ich die vordefinierten Daten Kommentar- eine Arbeits Demo zu machen:

Updated jsbin

Answer 2

Ich arbeitete von Ihrem Quellcode Referenz Fiddle, die für mich ziemlich ok funktionierte.

Hinzugefügt ein paar Dinge:

Zunächst eine separate Funktion eines Benutzers zur users Array hinzuzufügen. Auf diese Weise können Benutzer nach einem erfolgreichen Webservice-Aufruf einfach hinzugefügt werden.

Zweitens hinzugefügt ein paar Hilfsfunktionen, um zufällige Positionen und Richtungen zu erhalten.

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

Wenn Sie Ihren Webservice verbinden, können Sie die getRandomConnections Funktion und Referenz Graben. In Ihrer Callback-webservice Erfolg, stellen Sie sicher, dass Sie ein Objekt im Format haben:

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

Pass, die die addUser Funktion Objekt.