Заставить мой холст правильно отображать график

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

Вы, вероятно, привыкли работать с 2D системами координат, где положительные y вверх, но, как вы заметили, в холсте HTML положительный y идет вниз. Чтобы смоделировать нужную вам систему координат, вам нужно отразить все y-значения по линии y=0 (иначе x-ось).

Вот несколько y-значения и соответствующие им исправления можно использовать в качестве тестов. Обратите внимание, что я предполагаю y уже был правильно масштабирован; похоже, у вас уже есть эта часть.

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

Шаблон y_new = -(y_old - 150) где 150 canvas_height/2, Поэтому после масштабирования необходимо применить эту формулу ко всем вашим y ценности.

Сдвинуть yОсь к центру, вам нужно сделать то же самое, чтобы получить соответствующее линейное преобразование.