将屏幕坐标转换为模型坐标

我有一些新手问题。将屏幕坐标转换为模型坐标

在我的应用程序（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

将屏幕坐标转换为模型坐标

回答

相关问题