Meine Leinwand den Graphen korrekt anzeigen lassen

Question

Ich versuche, einen Graphenrechner zu erstellen und ihn korrekt auf einem "Canvas" darzustellen. Wenn ich die HTML-Datei lade und x schreibe, beginnt sie beispielsweise von der oberen linken Ecke bis zur unteren rechten Ecke. Das Problem ist also, dass die Grafik auf dem Kopf steht und keine negativen Werte enthält. Ich weiß, dass die Leinwand beginnt von (0,0) in Pixelwert in der oberen linken Ecke und endet bei (300,300) in der unteren rechten Ecke. Ich will es von diesem Link so etwas wie die grüne Leinwand angezeigt werden: 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

Du bist wahrscheinlich auf die Arbeit mit 2D-Koordinatensysteme verwendet, bei denen positive y oben ist, aber wie Sie in HTML-Leinwand festgestellt, positive y geht . Um das gewünschte Koordinatensystem zu simulieren, müssen Sie alle y -Werte über die Linie y=0 (aka x -Achse) spiegeln.

Hier sind ein paar y -Werte und ihre entsprechenden Korrekturen, die Sie als Tests verwenden können. Beachten Sie, dass ich davon ausgehe, dass y bereits richtig skaliert wurde; es sieht so aus, als ob du diesen Teil schon hast.

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

Das Muster ist y_new = -(y_old - 150) wo 150 canvas_height/2 ist. Daher müssen Sie nach der Skalierung diese Formel auf alle Ihre y Werte anwenden.

Um die y -Achse in die Mitte zu verschieben, müssen Sie die gleiche Art und Weise durchführen, um die entsprechende lineare Transformation abzuleiten.