让我的 canvas 正确显示图表

Question

我正在尝试创建一个图形计算器并使其在 "canvas" 上正确显示图形。当我加载 HTML 文件并写入 x 例如，它从左上角开始并向下到右下角。所以问题是它颠倒显示图形并且不包含负值。我知道 canvas 从左上角的像素值 (0,0) 开始，到右下角的 (300,300) 结束。我希望它显示类似 link 中的绿色 canvas 的内容：http://www.cse.chalmers.se/edu/course/TDA555/lab4.html

points :: Expr -> Double -> (Int,Int) -> [Point]
points exp scale (x, y) = [(x, realToPix (eval exp (pixToReal x))) | x<-[0..(fromIntegral canWidth)] ]
              where
              pixToReal :: Double -> Double  --converts a pixel x-coordinate to a real x-coordinate
              pixToReal x = x * 0.02
              realToPix :: Double -> Double  --converts a real y-coordinate to a pixel y-coordinate
              realToPix y = y / 0.02

Answer 1

您可能习惯于使用 2D 坐标系，其中正 y 向上，但正如您在 HTML canvas 中指出的那样，正 y 向下。要模拟您想要的坐标系，您需要翻转 y=0 线上的所有 y 值（又名 x 轴）。

这里有一些 y 值及其相应的更正，您可以将其用作测试。请注意，我假设 y 已经正确缩放；看起来你已经知道了那部分。

150 -> 0
0 -> 150
-150 -> 300

模式是 y_new = -(y_old - 150)，其中 150 是 canvas_height/2。因此，在缩放之后，您需要将此公式应用于所有 y 值。

要将 y 轴移动到中心，您需要做同样的事情来导出适当的线性变换。

让我的 canvas 正确显示图表

Making my canvas dispaly the graph correctly

html

haskell

canvas

graph

haste