Выполнение моего холста правильно рассчитать график

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 (aka x-axis).

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

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

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

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