使我的画布显示正确的图形

Question

我正在尝试创建一个图形计算器，并使其在＆＃34;画布上正确显示图形。当我加载HTML文件并写入x时，它从左上角开始并向下到达右下角。所以问题是它将图表颠倒显示，并且不包含负值。 我知道画布从左上角的像素值（0,0）开始，到右下角的（300,300）结束。我希望它显示来自此链接的绿色画布：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

您可能习惯使用积极printf()已启动的2D坐标系，但正如您在HTML画布中所指出的那样，积极y会降低。要模拟所需的坐标系，您需要在y行（又称y - 轴）上翻转所有y=0 - 值。

以下是一些x - 值及其可用作测试的相应更正。请注意，我假设y已经正确缩放;看起来你已经有了这个部分。

• 150 - ＆gt; 0
• 0 - ＆gt; 150
• -150 - ＆gt; 300

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

要将y - 轴移动到中心，您需要执行相同的操作以获得适当的线性变换。