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

Question

我有一些新手问题。

在我的应用程序 (processingjs) 中，我使用 scale() 和 translate() 来允许用户缩放和滚动场景。只要我将比例设置为 1.0，我就没有问题。但是每当我使用比例尺(即比例尺(0.5))时，我都会迷失...

我需要将 mouseX 和 mouseY 转换为场景坐标，我用它来确定我在场景上绘制的对象的 mouseOver 状态。

有人可以帮我翻译这些坐标吗？
提前致谢!
/理查德

Answer 1

不幸的是，这需要修改代码。我会考虑在某个时候将其提交给 Processing.JS 代码存储库，但这就是我所做的。

首先，您需要使用 modelX() 和 modelY() 来获取鼠标在世界 View 中的坐标。看起来像这样:

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

我希望能帮助遇到此问题的其他人。