Autor Beitrag
lapadula
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 180
Erhaltene Danke: 10



BeitragVerfasst: Do 06.06.19 14:03 
Hallo, ich habe eine Frage zum Zeichnen in Canvas.

Ich nutze dazu die JavaScript-Bibliothek "Pixi.js". Es handelt sich bei mir um über 6000 Polygone, welche ich darstellen möchte.
Die Daten kommen ursprünglich aus ESRI Shapefiles, es sind also eig. Geodaten aber ich möchte die Polygone nicht auf einer Karte platzieren, sondern einfach Zeichnen.

Ich nehme also die Koordinaten der einzelnen Ecken von jedem Polygon und übergebe diese an eine Pixi.js Funktion, die mir die Objekte zeichnet.


Das Problem ist jetzt, dass nicht alle Polygone zu sehen sind. Bei Canvas befindet sich der Nullpunkt (0|0) immer oben links, also kann es sein, dass meine Koordinaten negative Werte enthalten die dann nicht zu sehen sind,
weil das Koordinatensystem nur positive Werte darstellen kann.

Hier ist ein Beispiel-Polygon mit 6 Ecken und die dazugehörigen Koordinaten (die 14 Nachkommastellen habe ich hier mal weggelassen):

1: -258, 179
2: -252, 180
3: -242, 181
4: -237, 142
5: -253, 140
6: -258, 179

Meine Idee wäre, in diesem Beispiel, den höchsten negativen X-Wert zu ermitteln und den X-Wert aller Ecken um diesen Wert zu erhöhen.

Das würde dann folgendes ergeben:

1: 0, 179
2: 6, 180
3: 16, 181
4: 21, 142
5: 5, 140
6: 0, 179

Ich müsste in meinem Fall den höchsten negativen Wert aller 6000 Polygone ermitteln und den X-Wert aller Polygone erhöhen. Das gleiche dann nochmal für den Y-Wert.
Am Ende habe ich meine Karte, die von oben links gezeichnet wird. Am liebsten hätte ich diese jedoch Mittig, das lässt sich bestimmt auch berechnen.

Oder liege ich hier komplett daneben? War in Mathe leider nie der hellste :D

Gibt es vllt einen besseren Weg oder kennt sich jemand mit Pixi oder ähnlichen Bibliotheken aus, evtl. bieten die bereits eine Lösung.


Momentan arbeite ich mit dem SVG-Format, was im Prinzip sehr gut funktioniert. Ich nutze dazu die recht umfangreiche "d3.js" Bibliothek.
Leider Gottes ist die Performance bei 6000 Polygonen auf mobilen Geräten sehr schlecht, deshalb wollte ich Pixelgrafik ausprobieren.


Moderiert von user profile iconTh69: Topic aus Off Topic verschoben am Do 06.06.2019 um 14:12
ub60
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 762
Erhaltene Danke: 127



BeitragVerfasst: Do 06.06.19 15:10 
Du hast die Lösung doch eigentlich schon genannt:
  • Ermittlung des minimalen x-Wertes
  • Ermittlung des maximalen x-Wertes
  • Damit hat man die Breite, auf die man die Canvas skaliert, der Ursprung liegt in der Mitte.
  • Für y dann das gleiche noch einmal.
  • Für die 6000 Polygone sollte das sehr schnell gehen.

ub60

Für diesen Beitrag haben gedankt: lapadula
lapadula Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 180
Erhaltene Danke: 10



BeitragVerfasst: Do 06.06.19 16:50 
Okay, ich wollte auch Meinungen hören und war mir allgemein nicht sicher, ob es so richtig ist.
Ich probiere es heute Abend mal aus.