將屏幕座標轉換爲模型座標

我有一些新手問題。將屏幕座標轉換爲模型座標

在我的應用程序（processingjs）中，我使用scale（）和translate（）來允許用戶縮放和滾動場景。只要我將比例設置爲1.0，我就沒有問題了。但是，每當我使用的規模（即規模（0.5））我迷路了...

我需要鼠標X和mouseY翻譯成場景座標，我用它來確定我繪製的對象的mouseOver狀態現場。

任何人都可以幫助我如何翻譯這些座標嗎？在此先感謝！ /Richard

來源

2011-12-01 Bjarne77

此信息對您有所幫助：http://stackoverflow.com/questions/5470819/transform-from-relative-to-world-space-in-processing – Justin

謝謝！這是...我會看看它。 – Bjarne77

請張貼您的代碼！這可能會澄清你的問題;或者我們至少可以重現您的問題。你說你迷路了。失去了如何？怎麼了？ – jorrebor

不幸的是，這需要代碼修改。我會在某個時候將它提交給Processing.JS代碼庫，但這是我所做的。

首先，您需要使用modelX（）和modelY（）來獲取鼠標在世界視圖中的座標。這將是這樣的：

float model_x = modelX(mouseX, mouseY); 
float model_y = modelY(mouseX, mouseY);

不幸的是Processing.JS似乎並沒有在2D環境中正確計算modelX（）和modelY（）值。爲了糾正這一點，我改變了功能如下。注意mv.length == 16的測試和最後的2D測試部分：

p.modelX = function(x, y, z) { 
    var mv = modelView.array(); 
    if (mv.length == 16) { 
    var ci = cameraInv.array(); 
    var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3]; 
    var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7]; 
    var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11]; 
    var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15]; 
    var ox = 0, ow = 0; 
    var ox = ci[0] * ax + ci[1] * ay + ci[2] * az + ci[3] * aw; 
    var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw; 
    return ow !== 0 ? ox/ow : ox 
    } 
    // We assume that we're in 2D 
    var mvi = modelView.get(); 
    // NOTE that the modelViewInv doesn't seem to be correct in this case, so 
    // having to re-derive the inverse 
    mvi.invert(); 
    return mvi.multX(x, y); 
}; 
p.modelY = function(x, y, z) { 
    var mv = modelView.array(); 
    if (mv.length == 16) { 
    var ci = cameraInv.array(); 
    var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3]; 
    var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7]; 
    var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11]; 
    var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15]; 
    var oy = ci[4] * ax + ci[5] * ay + ci[6] * az + ci[7] * aw; 
    var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw; 
    return ow !== 0 ? oy/ow : oy 
    } 
    // We assume that we're in 2D 
    var mvi = modelView.get(); 
    // NOTE that the modelViewInv doesn't seem to be correct in this case, so 
    // having to re-derive the inverse 
    mvi.invert(); 
    return mvi.multY(x, y); 
};

我希望能幫助有這個問題的其他人。

來源

2011-12-28 22:50:36 orionr

謝謝！我會試試這個。看起來像我無法想象的自己！ – Bjarne77

嗨orionr！我已經替換了processing.js文件中的方法。但這似乎並沒有解決這個問題。每當我調用方法modelX（x，y）和modelY（x，y）時，返回值最終達到NaN（每次迭代的次數越來越小）。似乎在處理過程中調整並記住了一些變量。任何線索？ – Bjarne77

嗨理查德 - 我還沒有看到這個問題，並有一個樣本，用戶在一個類似地圖的世界中滾動和縮放。每次調用modelX（）和modelY（）時，總是會獲得新的mouseX和mouseY值？我注意到你說modelX（x，y）在那裏，所以想知道是否在傳遞之前修改mouseX和mouseY的值？隨意粘貼一些代碼，我們可以看看。 – orionr

你試過另一種方法嗎？

例如，假設您處於2D環境中，可以用一種矩陣「映射」所有幀。事情是這樣的：

int fWidth = 30; 
int fHeight = 20; 
float objWidth = 10; 
float objHeight = 10; 

void setup(){ 
    fWidth = 30; 
    fHeight = 20; 
    objWidth = 10; 
    objHeight = 10; 
    size(fWidth * objWidth, fHeight * objHeight); 
}

在這種情況下，你將有一個300×200幀，但在30個* 20爲單位分割。這使您可以按照有序的方式移動對象。

當你畫一個物體時，你必須給他的尺寸，所以你可以使用objWidth和objHeight。

以下是處理：您可以製作一個「縮放方法」來編輯對象尺寸的值。以這種方式繪製了一個較小/較大的對象，但不編輯任何框架屬性。

這是一個簡單的例子，因爲您的問題不準確。你也可以[在更復雜的方式]，在3D環境中。

來源

2013-02-19 09:15:09 ingroxd

將屏幕座標轉換爲模型座標

回答

相關問題