なでしこさんで、円形ゲージを描画する

今回の目的

なでしこで、0～1 の値を扇形の中心の角度として表示する。
たとえば、以下のような図形を描画する。

準備：キャンバスへの描画

ここでは、なでしこの描画命令のうち、今回使うものを紹介する。
また、ここで紹介する命令の呼び出し方は一例である。

ここで紹介する仕様は執筆時点でのものであり、今後変更される可能性がある。

デフォルトの描画用キャンバス

なでしこ3簡易エディタでは、最初から横500px、縦400pxのキャンバスが用意されており、描画命令を用いて描画することができる。
また、プログラム貯蔵庫のエディタでは、デフォルトで用意するキャンバスのサイズをプログラム入力欄の右下にある欄で設定できる。

座標系

デフォルトの状態では、キャンバスの左上が座標 (0, 0) であり、右方向が x 軸の正の向き、下方向が y 軸の正の向きである。

描画命令

線分や円という、基本的な図形を描画する命令を紹介する。

全描画クリア

📖 なでしこ3 マニュアル - plugin_browser/全描画クリア

全描画クリア。

キャンバスに描かれている内容を、範囲を指定せずに (基本的には全て) 消去する。

簡易エディタやプログラム貯蔵庫のエディタでは、以下のように「実行」や「クリア」を行った際にもデフォルトのキャンバスの内容が消去される。

＼	実行	クリア
簡易エディタ	消去されない	消去される
貯蔵庫	消去される	消去される

簡易エディタでは、「クリア」せずに「実行」しても、その前の実行で描画した内容が消去されない。
そのため、(行う処理にもよるが) 実行の最初で描画内容を消去する命令を呼び出すとよいだろう。

線描画

📖 なでしこ3 マニュアル - plugin_browser/線描画

[x1, y1]から[x2, y2]へ線描画。

(x1, y1) および (x2, y2) を端点とする線分を描画する。

円描画

📖 なでしこ3 マニュアル - plugin_browser/円描画

[x, y]にrの円描画。

中心の座標が (x, y)、半径が r の円を描画する。

多角形描画

📖 なでしこ3 マニュアル - plugin_browser/多角形描画

[[x1, y1], [x2, y2], ...]の多角形描画。

座標を表す配列の配列を指定し、(x1, y1)、(x2, y2)、… を頂点とする多角形を描画する。
多角形は自動で閉じられ、最初の頂点の座標を最後にもう一回指定する必要は無い。

設定命令

図形をどのように描画するかを設定する。

これらの命令で設定した内容は、簡易エディタや貯蔵庫のエディタで「実行」や「クリア」を行ってもリセットされない。
毎回明示的に設定したり、後述の「キャンバス状態保存」「キャンバス状態復元」命令で設定をリセットしたりすることを推奨する。

設定の保存と復元

設定は内部のスタックを用いて管理され、設定を適用する区間のネストが可能である。
以下の例では、「キャンバス状態復元」を複数回用い、対応する「キャンバス状態保存」を行った際の線色に戻っている様子が確認できる。

サンプルコード

5に線太さ設定。
赤色に線色設定。
キャンバス状態保存。
[10, 10]から[10, 100]へ線描画。
青色に線色設定。
キャンバス状態保存。
[30, 10]から[30, 100]へ線描画。
緑色に線色設定。
[50, 10]から[50, 100]へ線描画。
キャンバス状態復元。
[70, 10]から[70, 100]へ線描画。
キャンバス状態復元。
[90, 10]から[90, 100]へ線描画。

キャンバス状態保存

📖 なでしこ3 マニュアル - plugin_browser/キャンバス状態保存

キャンバス状態保存。

現在の設定を、内部のスタックにプッシュする。

キャンバス状態復元

📖 なでしこ3 マニュアル - plugin_browser/キャンバス状態復元

キャンバス状態復元。

内部のスタックから設定をポップし、現在の設定として用いる。

絶対設定命令

ここで紹介する命令での設定は、前の設定を上書きする。
そのため、保存/復元を用いなくても、毎回明示的に設定することで前回の実行の影響を回避できる。

線太設定

📖 なでしこ3 マニュアル - plugin_browser/線太設定

Vに線太さ設定。

「線描画」で描画する線や、「円描画」「多角形描画」で描画する図形のフチの太さを V に設定する。

線色設定

📖 なでしこ3 マニュアル - plugin_browser/線色設定

Vに線色設定。

「線描画」で描画する線や、「円描画」「多角形描画」で描画する図形のフチの色を V に設定する。
CSS で用いる色の表現 (透明を表す #00000000 など) や、「黒色」「赤色」などの定義済みの定数などを使用できる。

塗色設定

📖 なでしこ3 マニュアル - plugin_browser/塗色設定

Vに塗色設定。

「円描画」「多角形描画」で描画する図形の内部の色を V に設定する。
「線色設定」と同様の値を使用できる。

相対設定命令

ここで紹介する命令での設定は、前の設定が適用された状態に追加で適用される。
そのため、これらを用いる場合は保存/復元によるリセットを行うことを推奨する。

描画起点設定

📖 なでしこ3 マニュアル - plugin_browser/描画起点設定

[x, y]に描画起点設定。

以降の描画を、原点 (0, 0) がこの設定を行う前の座標 (x, y) になるようにずらして行うようにする。
これにより、手動で座標の加算を行わなくても、同じ図形を別の位置に描画することができる。

描画拡大

📖 なでしこ3 マニュアル - plugin_browser/描画拡大

[dx, dy]に描画拡大。

以降の描画を、x 軸方向に dx 倍、y 軸方向に dy 倍に拡大して行うようにする。
これにより、手動で座標の乗算を行わなくても、同じ (相似な) 図形を別の大きさで描画することができる。

この命令による拡大は、座標の値だけでなく、線の太さにも適用される。
以下の例では、「描画拡大」で y 軸方向に 2 倍に拡大し、y 座標の解釈および線の太さが2倍になっている様子が確認できる。

サンプルコード

キャンバス状態保存。
黒色に線色設定。
20に線太さ設定。
[10, 50]から[50, 50]へ線描画。
[1, 2]に描画拡大。
[60, 25]から[110, 25]へ線描画。
キャンバス状態復元。

描画クリップ

📖 なでしこ3 マニュアル - plugin_browser/描画クリップ

描画クリップ。

以降の描画を、直前に描画した図形の内側のみに反映するようにする。

リセットを経ずに複数回実行した場合は、それらの共通部分のみに描画されるようになる。
以下の例では、このことを確かめることができる。

サンプルコード

定数の透明は「#00000000」。
キャンバス状態保存。
黒色に線色設定。
1に線太さ設定。
透明に塗色設定。
[50, 50]に40の円描画。
描画クリップ。
[90, 50]に40の円描画。
描画クリップ。
透明に線色設定。
緑色に塗色設定。
[70, 50]に100の円描画。
キャンバス状態復元。

「図形の内側」の判定は、フチの線の太さを考慮せず、フチの中心で行う。
以下の例では、このことを確かめることができる。

サンプルコード

定数の透明は「#00000000」。
キャンバス状態保存。
黒色に線色設定。
20に線太さ設定。
透明に塗色設定。
[80, 50]に30の円描画。
描画クリップ。
赤色に線色設定。
[10, 50]から[150, 50]へ線描画。
キャンバス状態復元。

描画の戦略

扇形に切り取るように「描画クリップ」を設定し、円を描画することにより、円形ゲージを描画する。
クリップする範囲の外側は、描画する円の外側に余裕を持って設定する。

今回描画する円形ゲージは、上方向から開始し、時計回りに伸ばしていく。
割合が 50% 以下の場合は右側に固定した点で受け取り、50% 超の場合は左側に固定した点で受け取ることで、クリップを行う領域が交わらず、上手くいきそうである。
このことは、以下のコードで描ける図で確かめることができる。

定数の透明は「#00000000」。
全描画クリア。
キャンバス状態保存。
[150,150]に描画起点設定。
[50,50]に描画拡大。
黒色に線色設定。
透明に塗色設定。
1/50に線太さ設定。
[0,0]に1の円描画。
[0,0]に1.5の円描画。
[0,0]から[0,-3]へ線描画。
[0,-3]から[3,0]へ線描画。
[3,0]から[0,1.5]へ線描画。
[3,0]から[0,3]へ線描画。
[0,3]から[-3,0]へ線描画。
[-3,0]から[0,-1.5]へ線描画。
キャンバス状態復元。

実装

上記の設計に基づいて、実際に円形ゲージを描画するプログラムを実装した。

# V ：ゲージで表す割合 (0 以上 1 以下)
# XY：ゲージの中心座標を表す配列 [x, y]
# R ：ゲージの半径
# 「塗色設定」を反映する。
# 「線色設定」は無視し、常にフチは無しとする。
●(VでXYにRの)円形ゲージ描画とは
  キャンバス状態保存。
  「#00000000」に線色設定。
  XYに描画起点設定。
  [R, R]に描画拡大。
  Vの0から1までのCLAMPして2×PIを掛ける。
  定数のゲージ角度はそれ。
  定数の座標配列は[[0, -3], [0, 0], [1.5×SIN(ゲージ角度), -1.5×COS(ゲージ角度)]]。
  もし、Vが0.5超ならば
    座標配列に[-3, 0]を配列追加。
    座標配列に[0, 3]を配列追加。
  ここまで。
  座標配列に[3, 0]を配列追加。
  キャンバス状態保存。
  「#00000000」に塗色設定。
  座標配列の多角形描画。
  キャンバス状態復元。
  描画クリップ。
  [0, 0]に1の円描画。
  キャンバス状態復元。
ここまで。

たとえば、以下のようにしてこれを呼び出すことができる。

# 撫子色 https://www.colordic.org/colorsample/2023
「#eebbcb」に塗色設定。
[0,1,0]の値指定バー作成。
それの「step」に「any」をDOM属性設定。
それの「input」がDOMイベント発火した時には
  全描画クリア。
  対象のテキスト取得して実数変換。
  それで[150, 150]に100の円形ゲージ描画。
ここまで。

円形ゲージを描画 (プログラム貯蔵庫)

See the Pen nako3 circle gauge by MikeCAT (@mike_cat) on CodePen.

おわりに

なでしこで、円形ゲージを描画することができた。
これに重ねて中心部分に情報を描画する、といった応用も考えられるだろう。