Suche ‚view‘ Koordinaten in vis.js

Question

ich auf einer Änderung vis.js der Graph3d gerade arbeite ein gefülltes Liniendiagramm zu tun, wie folgt aus:

Der schwierige Teil - wenig überraschend - erstellt die Renderreihenfolge für die Polygone. Ich glaube, ich kann dies tun, indem geprüft wird, ob ein Strahl vom Betrachter auf eine bestimmte Linie B Linie A kreuzt:

In diesem Beispiel, da die Linie A „in der Art und Weise“ der Linie B ist, wir sollte zuerst Linie A zeichnen. Ich werde ein Codeschnipsel von How do you detect where two line segments intersect? verwenden, um zu überprüfen, ob die Zeilen kreuzen.

Ich habe jedoch nicht herausgefunden, wie die Position der Benutzeransicht zu finden ist. Ich nahm Art würde dies das Kameraobjekt sein, so ein wenig von Debug-Code geschrieben, die Kamera auf dem Graphen zu zeichnen:

var camera = this._convert3Dto2D(this.camera.getCameraLocation()); 
ctx.strokeStyle = Math.random()>0.5 ? 'ff0000' : '00ff00'; 
ctx.beginPath(); 
ctx.moveTo(camera.x, camera.y); 
ctx.lineTo(camera.x, camera.y+5); 
ctx.stroke(); 

In der Tat, wie die Kamera-Koordinaten durch diesen gemessen werden immer bei 0 , 0,0 auf dem Graphen (das wäre ganz oben rechts auf dem obigen Screengrab). Was ich brauche, denke ich, ist effektiv der untere Teil des Bildschirms.

Wie kann ich das finden? Oder gibt es einen besseren Weg, um das zu erreichen, was ich versuche?

Answer 1

Ich weiß nicht, ob das immer noch ein aktives Problem ist, aber FWIW, Graph3D hat interne Behandlung der Sortierung.

Alle Diagrammpunkte sind in Bezug auf den Blickpunkt sortiert, wobei eine repräsentative Koordinate point.bottom verwendet wird. Das Rendern wird dann unter Verwendung dieser Reihenfolge durchgeführt, wobei die am weitesten entfernten Elemente zuerst gezeichnet werden. Dies funktioniert gut, solange sich keines der Elemente überschneidet. In diesem Fall können Sie Artefakte erwarten.

Grundsätzlich müssen Sie nur point.bottom pro Graphenpolygon definieren und Graph3D wird dann von dort abholen.

Wenn Sie in der Arbeit dieses noch interessiert an:

Dies geschieht in Graph3d.js, Verfahren Graph3d.prototype._calcTranslations(). Betrachten Sie als Beispiel, wie die Grid und Surface Grafikelemente in Graph3d.prototype._getDataPoints() initialisiert werden. Der entsprechende Code lautet:

obj = {}; 
obj.point = point3d; 
obj.trans = undefined; 
obj.screen = undefined; 
obj.bottom = new Point3d(x, y, this.zRange.min);