2017. 6.12.
石立 喬

Visual Studio Community 2017の使い方(7)

―― Canvasを使用して、リサージュ波形を描画する ――

 リサージュ(Lissajous)波形は、電気技術者にとって、非常に馴染みの深い波形である。二つの周波数源の同期や位相を調整するのに便利で、オッシロスコープを学ぶ際に、必ずと言っても良いほど実験させられる。ここでは、リサージュ波形をCanvas上に描くのに、2つのComboBoxで周波数を、Sliderで位相差を与える。これは、「Visual Studio 2010 Expressの易しい使い方(9)」のUWP版である。

リサージュ(Lissajous)波形とは
 リサージュ図形、リサージュ曲線などとも呼ばれることがある。フランスの物理学者Jules Antoine Lissajousが、1857年に発表したと言われ、直交するX軸とY軸のそれぞれに異なる正弦波を加えて得られる平面図形のことである。それぞれの正弦波の周波数、位相の違いなどによって、多様な曲線が描かれる。

リサージュ波形の作成方法
 画面上の座標を(x,y)としたとき、
  横軸入力波形 x = A・sin ωt
  縦軸入力波形 y = B・sin(ωt + φ)
で描いた図形がリサージュ波形である。
 ただし、ここで紹介する例では、A = B とし、tは時間で 0秒から1秒までとする。ωは角周波数で、ω = 2πfの関係がある。fは周波数で、1 Hzから9Hzまでとする。φは縦軸入力波形に付加する位相シフトで、-90°(-π/2ラジアン)から90°(π/2ラジアン)まで変化させる。

プログラムの使用方法
1) プログラムを起動させると、横軸周波数 = 1Hz、縦軸周波数 = 1Hz、位相 = 0°の初期設定になっており、その条件でのリサージュ波形が描かれる(この場合、右上がり45°の直線である。図6参照)。
2) 横軸周波数と縦軸周波数は、ComboBoxによって設定でき、変更すると、そのイベントにより新しいリサージュ波形が描かれる。
3) 縦軸周波数の位相は、Sliderで、1°単位で設定でき、これも変更と同時にリサージュ波形の描画が行われる。

「デザイン」画面上での配置
 図1に示す通り、上部に2個のComboBoxとTextBlockを並べ、その下にリサージュ波形を表示するCanvasを配置する。右はSliderで、その下のTextBoxには、SliderのValueをバインドして表示する。


図1 「デザイン」画面で見た各種コントロールの配置


最終的に作成したXAMLコード
 最終的に作成したXAMLコードの内容を図2に示す。Canvasのサイズは、Height="400"、Width="400"に変更してあり、2個のComboBoxを置くために、場所は、少し下げて、Margin="20, 50, 0, 0"にしてある。
◎ComboBoxの設定
 ComboBoxの各種設定は、「プロパティ」ウィンドウから作成しても良いが、今回は、XAMLエディタに直接記述する方法を選んだ、特に、Contentに関しては、エディタを用いる方が楽である。
◎Data Binding
 プログラム内のオブジェクトの値をユーザーインターフェイスに反映させる方法にData Bindingがある。ここでは、Sliderの値Valueを、その下のTextBlockに表示させるために、TextBlockのTextプロパティを、
  Text="{Binding ElementName=slider1, Path=Value}"
としてある。「Path=」は省略することができる。



図2 最終的なXAMLコード


プログラムの作成
 図3はプログラムの最初の部分で、Canvasのための名前空間と、Colors::Blackなど色のための名前空間を追加してある。図4は、CanvasクラスのInvalidateメソッドにより呼び出されるCanvasControl_Drawイベントハンドラーの内容を示したもので、下記から成る。
1)グラフ用紙の作成
 黒の背景をFillRectangleで描画し、その上から、垂直と水平方向に11本の直線を描いて目盛とする。線幅はデフォルトの1本としたが、前稿での説明の通り、実質的に2本の線が引かれる。
2)ユーザーインターフェイスからの読み込み
 ComboBoxからの周波数の読み取りは、SelectedIndexに1を加えて行う(SelectedIndex = 0 が1Hzに当たるので)。Sliderの読み取りは、度表示をラジアンに変換するために、Valueをπ/180倍する。
3)リサージュ波形の描画
 ここでは時間1秒を500分割して計算している。これより分割数を減らすと、リサージュ波形がスムーズでなくなる恐れがある。線の弾き方については、前稿の説明と変わりはない。


図3 プログラムの最初の部分で、ファイルのインクルードと名前空間の追加を行う




図4 CanVasControl_Drawメソッドで、グラフ用紙とリサージュ波形を描画する



図5 ComboBoxの選択やSliderの値が変わるとCancasを書き換える


得られた結果
 得られた結果を図6と図7に示す。方眼紙の線幅はデフォルト(1ピクセル)を使用したが、アンチエリアシングのために、やや薄くかつ太めに感じる。リサージュ波形の線幅を2に指定して、バランスをとった。


図6 ComboBoxを開いたところ



図7 周波数と位相差を設定したリサージュ波形の一例


「デザイン」画面と「プロパティ」ウィンドウを用いないで、「XAML」エディタで設定する
 「デザイン」画面(XAML Designer)が不調で、表示できない場合があったので、「XAML」エディタに直接記述することも多かった。ここでは、Visual StudioのIntelliSenseが役に立った。
 すべてのコントロール部品について共通なプロパティは、
  x:Name ---------------------- 名前、プログラムからアクセスしない場合は付けなくても良い
  HorizontalAlignment="Left" ------ 原則的にはこれで良い
  VerticalAlignment="Top" -------- 同上
  Margin="X座標,Y座標, 0, 0" ------ コントロール部品を配置する位置
  Height="***" ----------------- 特に指定しないと、自動的に最適と思われる値に設定される
  Width="***" ------------------ 同上
で、あとは、コントロールによってプロパティが異なるので、個別に調べてほしい。
 良く使われる代表的なイベント(これによりイベントハンドラーも作られる)は、
  Button ---------- Click
  CheckBox ------- Checked
  RadioButton ------ Checked、CheckedChanged
  ComboBox ------- SelectedIndexChanged
  Slider ----------- ValueChanged
  TextBox --------- TextChanged
  TextBlock ------- 特に使用しない
  CanvasControl ---- Draw(部品上の操作ではなく、CanvasクラスのInvalidateメソッドにより発生)
であるが、Visual Studioのサポートが非常に役に立つ。
◎CanvasControlのDrawイベントを作成する例
 CanvasControlのプロパティDrawを入力する(実際にはDraw=""と自動的になる)と、図8に示すガイドが現れ、「,<新しいイベントハンドラー>」をクリックすると、Draw="canvas1_Draw"となり、イベントハンドラーcanvas1_Drawのスケルトンが自動的に生成される。「プロパティ」ウィンドウは使用しなくても良い。


図8 イベントハンドラーの生成


◎TextBlockのTextAlignmentプロパティを設定する例
 TextBlockのプロパティTextAlignmentを入力する(実際にはTextAlignment=""となる)と、図9に示すガイドが現れ、「Right」を選択する。


図9 プロパティ設定の候補が現れる










「Visual C++の勉強部屋」(目次)