将屏幕坐标转换为模型坐标 [英] Transform screen coordinates to model coordinates

问题描述

我有一些新手问题.

在我的应用程序(processingjs)中，我使用scale()和translate()来允许用户缩放和滚动场景.只要将比例设置为1.0，我就不会有任何问题.但是只要我使用秤(即scale(0.5))，我就会迷路...

In my application (processingjs) i use scale() and translate() to allow the user to zoom and scroll through the scene. As long as i keep the scale set to 1.0 i've got no issues. BUT whenever i use the scale (i.e. scale(0.5)) i'm lost...

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

I need the mouseX and mouseY translated to the scene coordinates, which i use to determine the mouseOver state of the object I draw on the scene.

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

Can anybody help me how to translate these coordinates? Thanks in advance! /Richard

推荐答案

对我来说不幸的是，这需要修改代码.我将在某个时候将其提交到Processing.JS代码存储库，但这是我所做的.

Unfortunately for me this required a code modification. I'll look at submitting this to the Processing.JS code repository at some point, but here's what I did.

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

First, you'll want to use modelX() and modelY() to get the coordinates of the mouse in world view. That will look like this:

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

不幸的是，Processing.JS在2D环境中似乎无法正确计算modelX()和modelY()值.为了更正，我将功能更改为如下.注意mv.length == 16的测试以及2D结尾的部分:

Unfortunately Processing.JS doesn't seem to calculate the modelX() and modelY() values correctly in a 2D environment. To correct that I changed the functions to be as follows. Note the test for mv.length == 16 and the section at the end for 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);
};

我希望对其他有此问题的人有所帮助.

I hope that helps someone else who is having this problem.

这篇关于将屏幕坐标转换为模型坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！