查找「視圖」座標在vis.js

Question

我工作的一個修改vis.js的Graph3d做填充的線路圖，就像這樣：

困難的部分 - 意料之中 - 正在制定多邊形的渲染順序。我想我可以通過檢查從觀衆到給定線B光線是否越過A線做到這一點：

在本例中，A線是「在路上」 B線，我們應先畫線A.我將使用How do you detect where two line segments intersect?中的一段代碼來檢查這些行是否交叉。

但是，我還沒有想到如何找到用戶視圖的位置。我有種以爲這將是相機對象，所以寫的調試代碼一點點繪製在相機上圖：

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

事實上，通過這種測定照相機座標始終爲0 ，圖上的0,0（這將在上面的屏幕抓圖的最右上角）。我認爲，我需要的是屏幕的底部。

我該如何找到它？還是有更好的方法來實現我想要做的事情？

Answer 1

我不知道這是否仍然是一個活躍的問題，但FWIW，Graph3D有排序順序的內部處理。

所有圖形點均使用名爲point.bottom的代表座標相對於視點進行排序。然後使用這個順序完成渲染，最先畫出最遠的元素。只要沒有任何元素相交，這可以正常工作;在這種情況下，你可以期待文物。

基本上，所有你需要做的，就是定義point.bottom每個圖形多邊形，然後Graph3D將從那裏撿起它。

如果你仍然有興趣在這方面的工作：

這發生在Graph3d.js，方法Graph3d.prototype._calcTranslations()。例如，查看Graph3d.prototype._getDataPoints()中圖表元素Grid和Surface的初始化過程。相關的代碼是：

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