내 캔버스가 정확하게 그래프를 표시하도록 만들기

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

패턴 150 canvas_height/2이다 y_new = -(y_old - 150)이다. 따라서 크기를 조정 한 다음이 수식을 모든 y 값에 적용해야합니다.

y 축을 중심으로 이동하려면 적절한 선형 변환을 유도하기 위해 동일한 종류의 작업을 수행해야합니다.