HTML-Canvas: Wie Latenz zwischen Benutzerinteraktion und Ereignisse zeichnen?

Question

Ich arbeite an einem Spiel, das es Spielern ermöglicht, auf eine Karte zu klicken und sie in beliebiger Richtung über den Bildschirm zu ziehen. Es gibt insgesamt 64 überlappende 100x80-Karten auf einer 800x800-Leinwand zu jeder Zeit und jede ist eine prozedurale Zeichnung. Wie einige von euch wahrscheinlich vermuten, zieht es Canvas nicht vor, bei jeder Bewegung die gesamte Leinwand neu zu zeichnen. Um dies zu umgehen, benutze ich einen Buffer-Canvas, um die Karte zu zeichnen und dann zu versuchen, diesen Buffer-Canvas mit drawImage() auf den Haupt-Canvas zu malen. Um sicherzustellen, dass keine Zeichnungsaufbauten vorhanden sind, lösche ich die Region der Arbeitsfläche, die mit der Stelle verknüpft ist, an der ich plane drawImage() unter Verwendung einer clearRect().

Das Problem, das ich erlebt habe, ist, dass, weil die verwendeten Koordinaten (x, y) für die clearRect() und drawImage() von der Position der Maus kommen, wenn der Benutzer zu schnell bewegt, werden die Koordinaten von der Zeit unterscheiden drawImage() wurde zuletzt zu dem Zeitpunkt clearRect() ausgeführt, wird während der nächsten Ziehfolge aufgerufen. Das Ergebnis ist ein Rest-Draw aus der letzten Sequenz - proportional dazu, wie schnell die Karte gezogen wird.

Ich versuchte, die (x, y) -Koordinaten von drawImage() beizubehalten und diese (anstelle der aktuellen Mausposition) für die clearRect() in der nächsten Sequenz zu verwenden. Jetzt, anstatt dass Residual Draw angezeigt wird, haben wir Residuum Clear (Löschen).

Gedanken darüber, wie ich das angehen kann?

HINWEIS: Meine Animationsrate wird mit RequestAnimationFrame und nicht SetInterval() behandelt.

Answer 1

Angenommen, Ihre Arbeitsfläche ist statisch während der Drag-Drop-Operation, eine ziemlich einfache Möglichkeit, eine gute Leistungssteigerung zu erzielen, wäre, das Rendering einfach zwischenzuspeichern.

Mit anderen Worten, wenn eine Drag-Drop-Operation beginnt, speichern Sie die aktuelle Leinwand in eine andere. Stoppen Sie das Rendering bis auf denjenigen, der die Karte gezogen hat. Jetzt, wann immer Sie neu streichen müssen, streichen Sie einfach von Ihrer Kopie-Leinwand neu. Da Sie im Grunde nur von einem zum anderen kopieren, sollte es ziemlich schnell sein.

Bei jedem Verarbeitungszyklus würden Sie die aktuelle Position der gezogenen Karte übernehmen, diese mit Daten aus der Kopie füllen und die gezogene Karte an der neuen Position neu zeichnen.

Andere Ansätze, die Sie versuchen könnten, wäre eine Art Platzhalter für den Ziehvorgang zu verwenden. Stellen Sie sich beispielsweise vor, ein DIV mit derselben Größe zu verwenden, das Sie beim Ziehen anzeigen. Dies sollte den Vorteil haben, dass Sie beim Ziehen nicht die Leinwand berühren müssen und damit auch eine bessere Leistung erzielen.