情報メディア基礎ゼミ/2019/第2回のバックアップソース(No.2)

#author("2019-05-17T15:59:36+09:00","default:kyo-in","kyo-in")
**ストローク [#v260e47d]
ストロークの描画を実装する．

#ref(./drawstroke.gif,50%);

**線の構成要素 [#o1dad5d8]
UWPではGUIを構成する部品の子として，Shapeクラスを追加することで図形を描画できる．

線は，Shapeクラスを継承しているLineクラス，もしくはPathクラスを使用するが，ここではPathクラスを使用する．

Pathクラスでは，線の色や太さを設定し，Dataメンバに線の形状が入ったPathGeometryを与える．

PathGeometryクラスは，円弧（Arcs），曲線（Curves），直線（Lines）など，種類の異なる頂点ベースで与えられる複数の形状データ(PathFigure)をまとめるものである．実際にはFiguresメンバにPathFigureインスタンスを与える．

PathFigureは複数のSegmentで構成された図形を表すクラスで，開始点や図形の閉じなどの設定を行う．実際にはSegmentsメンバにSegmentを継承したBezierSegment, LineSegment, PolyBezierSegment, PolyLineSegment, PolyQuadraticBezierSegment, QuadraticBezierSegmentなどいずれかのSegmentインスタンスを追加する．

今回，ストロークは複数点を単純に結んだ線となるため，PolyLineSegmentを使用する．

PolyLineSegmentのPointsメンバに座標を記した複数個のPointをPointsメンバに与えることで，それらを直線で結んだ線を描画する．Pointsメンバの操作で点の増減があった場合はリアルタイムに画面に反映される．

#ref(./path.png,50%);

           //プログラム上部の
           //using System.IO; をコメントアウト
           //using Windows.UI;　を追加
           //using Windows.UI.Xaml.Shapes;　を追加
           PathFigure myPathFigure = new PathFigure();
           myPathFigure.StartPoint = new Point(10, 50);
 
           LineSegment myLineSegment = new LineSegment();
           myLineSegment.Point = new Point(200, 70);
 
           PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
           myPathSegmentCollection.Add(myLineSegment);
 
           myPathFigure.Segments = myPathSegmentCollection;
 
           PathFigureCollection myPathFigureCollection = new PathFigureCollection();
           myPathFigureCollection.Add(myPathFigure);
 
           PathGeometry myPathGeometry = new PathGeometry();
           myPathGeometry.Figures = myPathFigureCollection;
 
           Path myPath = new Path();
           myPath.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
           myPath.StrokeThickness = 1;
           myPath.Data = myPathGeometry;
 
           MainCanvas.Children.Add(myPath);

-図形の描画 - Windows UWP applications~
https://docs.microsoft.com/ja-jp/windows/uwp/design/controls-and-patterns/shapes

**手順 [#j09d98fb]
例外的な処理を考慮しなければ，

描画中のPathクラスを保持するメンバ変数（仮にdrawingStrokeと名付ける）を追加し，

+PointerPressedイベント：drawingStroke（Pathクラス）に必要なクラスインスタンス一式を生成
+PointerMovedイベント：drawingStrokeがnullでなければ，ストローク描画中であるから現在のマウス座標をPolyLineSegmentのPointsメンバにAddする
+PointerReleasedイベント：drawingStrokeがnullでなければ，描き終わったことを示すためnullにしておく

実際にはストローク描画途中（マウスボタンが押されたまま）でウインドウのフォーカスが外れた，マウスカーソルがウインドウ外に出た場合など，PointerReleasedイベントが起きずにストローク描画を終了しなければいけない場面もある．
情報メディア基礎ゼミ/2019/第2回 のバックアップソース(No.2)

情報メディア基礎ゼミ/2019/第2回のバックアップソース(No.2)
