こんにちは。EveryDaySoft代表の永田です。
最近はFlutter、Dart言語で、ディレクター兼アプリ担当、フルリモートFlutter案件２つを実施しています。また。自作Packageを開発してます。
今回は世の中に解説のない、画像のような色塗りロジック解説をします。
Path()APIを使用して作成しています。
.moveTOは開始位置地点です。
Y軸にグラフUI上０の値を設定しています。一番左下箇所です。
X軸には要素の数*横幅と、Y軸には配列要素の中身の値*横幅を設定してます。
横幅は１マスづつの値です。
ここがポイントです。ループが終わりcanvas.drawPathに書き込む前に、再度X軸とY軸を設定します。X軸Y軸に最終要素(一番大きい数字)*横幅を設定します。この実装により画像のような色の設定が実現できます。
何が起きているかというと、一番右下に設定しています。moveTOで始めた一番左下の値、配列要素内のY軸となるlineToの値、一番右下の値を設定することにより、グラフ領域が囲われるので、paint.colorで設定したカラーを塗れるロジックになります。
これはモバイルプログラミングに共通するロジックだと思います。このようなアイデアロジックの解説がなかったので、公開させていただきました。
貴重なお時間お読みくださいまして、誠にありがとうございます。