Time_chart 분석 중

chart_engine.dart 를 보면 paint를 하기 위한  ChartEngine 이라는 abstract 클래스가 있다. 여기서 그래프의 label이나 text를 그리는데 필요한 기본적인 함수(메소드)나 변수에 대하여 선언하고 있다. 

 

이 중 drawXLabels 라는 메소드를 보면 x 축이 되는 선들을 그리는 작업을 한다. 그림을 그릴때는, 화면에서 보여지는 크기에 딱 맞게 그리는 것이 아니라 이보다 조금 더 크게 (toleranceDay 라는 변수*2만큼) 그래프의 축을 그린다. 이렇게 화면에 보여지는 것 이상으로 그리면 스크롤이 좀더 부드러워지나? 어차피 스크롤 event가 발생하면 화면에 출력될 그래프 전체를 다시 그려야 하지 않나? 

 

아무튼 paint에서 size는 화면에 보여지는 것 뿐아니라 그려져야할 모든 data가 차지하는 크기의 width ( horizontal scroll이라)를 전달해주 지만 화면에 실제 화면에 그리는 것은 화면에 보여지는 것보다 조금 더 넓게 그리는 정도.  

 

drawXLabels 에서 x축 선을 그릴 dx값을 구해서 _drawVerticalDivideLine 에 넘겨 주면 해당 선을 그린다. 

[Q1] 그런데 _drawVerticalDivideLine 에서 선을 그릴 때 왜 해당 픽셀로 moveTo 이동해서 lineTo로 선을 정하고 drawPath로 그리는 걸까? 

[A1] path에서는 시작점이 (0,0) 이라 그림을 그릴 위치를 moveTo로 이동해 줘야 된단다. 

 

[Q2] drawPath 를 사용 안하고 그냥 drawLine하면 안되나? 

[A2] 인터넷에 찾아보니 10000개의 점에서 500개의 path(line)을 그려보니 drawLine 보다 drawPath가 30% 빨랐다고 한다.(링크) 왜 그럴가?

 

 

flutter의 path 클래스에서 다양한 선그리는 메소드들에 대한 설명글 

https://ichi.pro/ko/flutterui-gyeonglo-bijueol-gaideu-119367415422160 (한글 번역 버전)

https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0 (원문)

 

[Q3] x축 방향으로 scrolling 가능한 chart를 그릴때 사용하는 CustomPaint의 size는 누가, 어떻게 정하나?

[A3] TimeYLabelPainter(CustomPaint에서 사용하는 painter) 나 TimeXLabelPainter(CustomPaint에서 사용하는 painter) 안에서 사용되는 size의 값은 이들 클래스를 불러올때 전달하는 argument인 totalWidth 와 innerSize 로 정해진다. 특히 horizontal Scroll을 하는 이 chart에서는 width값이 중요한데, y축과 관련됫 것을 그리는 작업을 하는 TimeYLabelPainter에는 chart의 실제 보여지는 widget의 width 값을 전달 한다. 반면 스크롤링하게 되면 변하는 값들을 포함하는 X축 관련 그리기 작업을 하는 TimeXLabelPainter 에는 보여지는 chart의 width보다 큰 (실제 모든 data가 그려지는) innerSize 라는 값을 계산해서 CustomPaint에 전달한다.