午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

マウスクリックでCanvasに直線を描画その2、Polyline、WPFとC#

今回のアプリのダウンロード先
連続した直線を描画するにはPolyLine
System.Windows.Shapes.Polyline
 
 
イメージ 1
これはおとといの

gogowaten.hatenablog.com

と全く同じ結果だけど使うコントロール
System.Windows.Shapes.Path
から
System.Windows.Shapes.Polyline
に変更
 
デザイン画面

f:id:gogowaten:20191213093705p:plain

PathからPolylineに変わっただけ
 
コード
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
namespace _20180607_クリックで直線Polyline
{   
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            MyCanvas.MouseMove += MyCanvas_MouseMove;
            MyCanvas.MouseLeftButtonDown += MyCanvas_MouseLeftButtonDown;
            MyCanvas.MouseRightButtonDown += MyCanvas_MouseRightButtonDown;
        }
        //右クリックでクリア
        private void MyCanvas_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            MyPolyline.Points.Clear();
        }
        //左クリックで座標追加
        private void MyCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PointCollection points = MyPolyline.Points;
            //最初のクリックのときだけ座標を2個追加する
            if (points.Count == 0)
            {
                points.Add(e.GetPosition(MyCanvas));
            }
            points.Add(e.GetPosition(MyCanvas));
        }
        private void MyCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            PointCollection points = MyPolyline.Points;
            if (points.Count != 0)
            {               
                points[points.Count - 1] = e.GetPosition(MyCanvas);
            }           
        }
    }
}

f:id:gogowaten:20191213093836p:plain

かなり短くなった
ってことは前回はかなり余計なことをしていたことになるwww
 
Polylineって名前からポリゴンを想像して、そこから三角形とかの図形専用で直線とは関係ないのかと思っていたんだよねえ
 
前回のPathのDataにPathGeometryを指定してLineSegmentを継ぎ足していく方法は、LineSegmentじゃなくてベジェ曲線を継ぎ足していくときには使えそう
 
 
コード全部
参照したところ
WPFサンプル:Line, Polyline, Polygonで直線、図形を描く:Gushwell's Dev Notes
http://gushwell.ldblog.jp/archives/52307936.html
 
 
関連記事
4年後
2018/06/20は12日後
 
2018/06/09は翌日

https://cdn-ak.f.st-hatena.com/images/fotolife/g/gogowaten/20190903/20190903102748.jpg

 
2018/06/06はおととい

https://cdn-ak.f.st-hatena.com/images/fotolife/g/gogowaten/20190902/20190902150549.jpg