使我的画布正确显示图形

Question

我试图创建一个图形计算器，并使其在“画布”上正确显示图形。 当我加载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

您可能已经习惯使用正y向上的2D坐标系，但是正如您在HTML画布中所指出的，正y向下。 要模拟所需的坐标系，您需要在线y=0 （又称x轴）上翻转所有y 。

这是一些y及其对应的更正，您可以将其用作测试。 请注意，我假设y已经正确缩放了； 看来您已经掌握了这一部分。

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

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

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