html - 将 OpenGL 画布坐标转换为 HTML5 画布坐标

Question

我有一个 Java Applet OpenGL 模拟，我正在尝试转换为 HTML5 画布。任何人都知道如何转换这些坐标？

OpenGL 从 -400x 到 +400x 和从 -600y 到 +600y，而我的画布从 0x 到 400x 和从 0y 到 600y 没有负坐标。

Answer 1

这只是你需要的一个简单的线性函数。线性函数具有形式f(x) = m * x + n

对于 x 坐标：

您想将 -400 映射到 0 并将 400 映射到 400，因此您有两个点 (-400, 0)、(400, 400) 来描述您的线性关系。

您现在用 (y2-y1)/(x2-x1) 计算梯度 m，在此示例中：m = (400-0)/(400--400) = 1/2

所以你的函数现在看起来像： f(x) = 1/2 * x + n

要计算 n（y 截距），您只需插入一个点（例如 (-400, 0)）：

0 = 1/2 * (-400) + n

你得到 n 为 200。所以最后的函数是f(x) = 1/2 * x + 200

对于你得到的 y 坐标g(y) = 1/2 * y + 300