Question

我最近看到很多与画布图形相关的javascript项目和库，并且想知道它们如何处理坐标系。 在画布上绘制形状和矢量时，是基于笛卡尔平面计算并为画布转换的点，还是直接为画布计算的所有内容？

我尝试通过绘制所有切线来绘制一个圆，直到线交点开始类似于曲线，并发现我熟悉的笛卡尔平面与Web浏览器使用的坐标系之间的差异非常混乱。圆的函数，例如“y ^ 2 + x ^ 2 = r ^ 2”需要转换为“（y-1）^ 2 +（x-1）^ 2 = r ^ 2”到在画布上看到。然后负斜率是画布上的正斜率，一切都是颠倒的：/。

让我思考它的最简单方法是假装笛卡尔平面的原点位于画布的中心并相应地调整我的坐标。在一个500 x 500的画布上，中心将是250,250，所以如果我最终获得50,50点，它将被绘制在（250 + 50,250 - 50）=（300,200）。

我觉得我过于复杂了，但是我无法用干净的方式围绕着画布工作。

Answer 1

当前的做法也许可以通过David Flanagan的书“JavaScript：The Definitive Guide”引用，其中说明了

某些画布操作和属性（例如提取原始像素值和设置阴影偏移量）始终使用此默认值坐标系

（默认坐标系是画布的坐标系）。

继续

在大多数画布操作中，指定坐标时一点，它被认为是当前坐标系中的一个点 [例如你提到的笛卡尔飞机，@ Walkerneo] ，不在默认坐标系中。

为什么使用“当前坐标系”比直接使用画布c.s.更有用。？

首先，我相信，因为它独立于画布本身，它与画面相关联（更具体地说，默认坐标系尺寸以像素表示）。例如，使用笛卡尔（正交）坐标系统可以让您轻松（对我而言，显然也是：-D）根据您想要绘制的内容指定绘图，留下如何绘制到绘图的任务Canvas API提供的转换。特别是，您可以用绘图的自然单位表示尺寸，并执行比例和平移以适合（或不适用，视情况而定......）您的绘图到画布。

此外，使用变换通常是构建绘图的更清晰的方法，因为它允许您从底层坐标系统“更远”，并根据更高级别的操作指定绘图（'scale'，'rotate'，'翻译'和更普遍的'变换'）。上面提到的这本书给出了一个非常好的例子，用很少的线条绘制了一个Koch（分形）雪花，使用画布坐标是可能的（如果有的话）。

Answer 2

与大多数图形系统一样，HTML5画布使用坐标系，其中（0,0）位于左上角，x轴和y轴分别从左到右和上下。如果你考虑如何创建一个只有一块内存的图形系统，这是有道理的：将坐标（x，y）映射到内存槽的最简单方法是取x+w*y，其中w是一条线的宽度。

这意味着画布坐标系统在数学上的用法与两种方式不同：（0,0）不像往常那样是中心，而y则向下而不是向上。最后一部分是让你的数字颠倒的原因。

您可以在画布上设置transformations，使坐标系更像您习惯的那样：

var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(250,250);   // Move (0,0) to (250, 250)
ctx.scale(1,-1);          // Make y grow up rather than down

在画布上绘图时，是否应该相对于笛卡尔平面坐标进行计算？

2 个答案: