将屏幕坐标转换为模型坐标
我有一些新手问题。将屏幕坐标转换为模型坐标
在我的应用程序(processingjs)中,我使用scale()和translate()来允许用户缩放和滚动场景。只要我将比例设置为1.0,我就没有问题了。但是,每当我使用的规模(即规模(0.5))我迷路了...
我需要鼠标X和mouseY翻译成场景坐标,我用它来确定我绘制的对象的mouseOver状态现场。
任何人都可以帮助我如何翻译这些坐标吗? 在此先感谢! /Richard
不幸的是,这需要代码修改。我会在某个时候将它提交给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);
};
我希望能帮助有这个问题的其他人。
谢谢!我会试试这个。 看起来像我无法想象的自己! – 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环境中。
此信息对您有所帮助:http://*.com/questions/5470819/transform-from-relative-to-world-space-in-processing – Justin
谢谢!这是...我会看看它。 – Bjarne77
请张贴您的代码!这可能会澄清你的问题;或者我们至少可以重现您的问题。你说你迷路了。失去了如何?怎么了? – jorrebor