multiple_circle_chart_infomation

Created with Sketch.

multiple_circle_chart_infomation

こんにちは。EveryDaySoft代表の永田です。

最近はFlutter、Dart言語で、ディレクター兼アプリ担当、フルリモートFlutter案件2つを実施しています。また。自作Packageを開発してます。

今回は世の中に解説のない、画像のような色塗りロジック解説をします。

https://github.com/daisukenagata/multiple_circle_chart/blob/2a35c37969e10e56e7497327533b7e9274088274/lib/OverlappingLine/overlapping_line_paint.dart#L26

Path()APIを使用して作成しています。

.moveTOは開始位置地点です。

Y軸にグラフUI上0の値を設定しています。一番左下箇所です。

https://github.com/daisukenagata/multiple_circle_chart/blob/2a35c37969e10e56e7497327533b7e9274088274/lib/OverlappingLine/overlapping_line_paint.dart#L42

X軸には要素の数*横幅と、Y軸には配列要素の中身の値*横幅を設定してます。

横幅は1マスづつの値です。

https://github.com/daisukenagata/multiple_circle_chart/blob/2a35c37969e10e56e7497327533b7e9274088274/lib/OverlappingLine/overlapping_line_paint.dart#L70

ここがポイントです。ループが終わりcanvas.drawPathに書き込む前に、再度X軸とY軸を設定します。X軸Y軸に最終要素(一番大きい数字)*横幅を設定します。この実装により画像のような色の設定が実現できます。

何が起きているかというと、一番右下に設定しています。moveTOで始めた一番左下の値、配列要素内のY軸となるlineToの値、一番右下の値を設定することにより、グラフ領域が囲われるので、paint.colorで設定したカラーを塗れるロジックになります。

これはモバイルプログラミングに共通するロジックだと思います。このようなアイデアロジックの解説がなかったので、公開させていただきました。

貴重なお時間お読みくださいまして、誠にありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です