2017. 6.12.
石立 喬
Visual Studio Community 2017の使い方（7）
―― Canvasを使用して、リサージュ波形を描画する ――
リサージュ（Lissajous）波形は、電気技術者にとって、非常に馴染みの深い波形である。二つの周波数源の同期や位相を調整するのに便利で、オッシロスコープを学ぶ際に、必ずと言っても良いほど実験させられる。ここでは、リサージュ波形をCanvas上に描くのに、２つのComboBoxで周波数を、Sliderで位相差を与える。これは、「Visual
Studio 2010 Expressの易しい使い方（９）」の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から９Hzまでとする。φは縦軸入力波形に付加する位相シフトで、-90°（-π/2ラジアン）から90°（π/2ラジアン）まで変化させる。
プログラムの使用方法
１） プログラムを起動させると、横軸周波数 = 1Hz、縦軸周波数 = 1Hz、位相
= 0°の初期設定になっており、その条件でのリサージュ波形が描かれる（この場合、右上がり４５°の直線である。図６参照）。
２） 横軸周波数と縦軸周波数は、ComboBoxによって設定でき、変更すると、そのイベントにより新しいリサージュ波形が描かれる。
３） 縦軸周波数の位相は、Sliderで、1°単位で設定でき、これも変更と同時にリサージュ波形の描画が行われる。
「デザイン」画面上での配置
図１に示す通り、上部に２個のComboBoxとTextBlockを並べ、その下にリサージュ波形を表示するCanvasを配置する。右はSliderで、その下のTextBoxには、SliderのValueをバインドして表示する。
図１ 「デザイン」画面で見た各種コントロールの配置
最終的に作成したXAMLコード
最終的に作成したXAMLコードの内容を図２に示す。Canvasのサイズは、Height="400"、Width="400"に変更してあり、２個の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=」は省略することができる。
図２ 最終的なXAMLコード
プログラムの作成
図３はプログラムの最初の部分で、Canvasのための名前空間と、Colors::Blackなど色のための名前空間を追加してある。図４は、CanvasクラスのInvalidateメソッドにより呼び出されるCanvasControl_Drawイベントハンドラーの内容を示したもので、下記から成る。
１）グラフ用紙の作成
黒の背景をFillRectangleで描画し、その上から、垂直と水平方向に１１本の直線を描いて目盛とする。線幅はデフォルトの１本としたが、前稿での説明の通り、実質的に２本の線が引かれる。
２）ユーザーインターフェイスからの読み込み
ComboBoxからの周波数の読み取りは、SelectedIndexに１を加えて行う（SelectedIndex
= 0 が1Hzに当たるので）。Sliderの読み取りは、度表示をラジアンに変換するために、Valueをπ/180倍する。
３）リサージュ波形の描画
ここでは時間１秒を５００分割して計算している。これより分割数を減らすと、リサージュ波形がスムーズでなくなる恐れがある。線の弾き方については、前稿の説明と変わりはない。
図３ プログラムの最初の部分で、ファイルのインクルードと名前空間の追加を行う
図４ CanVasControl_Drawメソッドで、グラフ用紙とリサージュ波形を描画する
図５ ComboBoxの選択やSliderの値が変わるとCancasを書き換える
得られた結果
得られた結果を図６と図７に示す。方眼紙の線幅はデフォルト（1ピクセル）を使用したが、アンチエリアシングのために、やや薄くかつ太めに感じる。リサージュ波形の線幅を２に指定して、バランスをとった。
図６ ComboBoxを開いたところ
図７ 周波数と位相差を設定したリサージュ波形の一例
「デザイン」画面と「プロパティ」ウィンドウを用いないで、「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=""と自動的になる）と、図８に示すガイドが現れ、「,<新しいイベントハンドラー>」をクリックすると、Draw="canvas1_Draw"となり、イベントハンドラーcanvas1_Drawのスケルトンが自動的に生成される。「プロパティ」ウィンドウは使用しなくても良い。
図８ イベントハンドラーの生成
◎TextBlockのTextAlignmentプロパティを設定する例
TextBlockのプロパティTextAlignmentを入力する（実際にはTextAlignment=""となる）と、図９に示すガイドが現れ、「Right」を選択する。
図９ プロパティ設定の候補が現れる
「Visual C++の勉強部屋」（目次）