System.Windows.Media.PolyBezierSegment
PolyBezierSegmentを使って連続した直線を描画してみた
本当はベジェ曲線を描くのに使うんだけど直線も描けた
見た目的な結果は前々回や前回と全く同じ
デザイン画面
コード、見るよう
コピペ用
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
namespace _20180609_クリックで直線_ベジェ曲線で直線
{
public partial class MainWindow : Window
{
PolyBezierSegment MySegment;//これのPointsにPointを追加していく
public MainWindow()
{
InitializeComponent();
MyInitialize();
MyCanvas.MouseLeftButtonDown += MyCanvas_MouseLeftButtonDown;
MyCanvas.MouseMove += MyCanvas_MouseMove;
MyCanvas.MouseRightButtonDown += MyCanvas_MouseRightButtonDown;
}
private void MyCanvas_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
MySegment.Points.Clear();
}
//PathGeometry作成してPathのDataに指定
private void MyInitialize()
{
MySegment = new PolyBezierSegment(new PointCollection(), true);
var pf = new PathFigure();
pf.Segments.Add(MySegment);
var pg = new PathGeometry();
pg.Figures.Add(pf);
MyPath.Data = pg;
}
//最後のPointをマウスカーソルの位置にする
private void MyCanvas_MouseMove(object sender, MouseEventArgs e)
{
if (MySegment.Points.Count > 0)
{
var ps = MySegment.Points;//PointCollection
//最後のアンカーポイントのインデックスはCount-1
int ap = ps.Count - 1;
ps[ap] = e.GetPosition(MyCanvas);//カーソル位置に
}
}
//左クリックで制御点2つとアンカーポイント追加
//2つの制御点の座標を同じにすると直線になる
private void MyCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var p = e.GetPosition(MyCanvas);
//最初のクリック時だけはStartPointを指定する
if (MySegment.Points.Count == 0)
{
var pg = (PathGeometry)MyPath.Data;
var pathFigureCollection = pg.Figures;
pathFigureCollection[0].StartPoint = p;
//制御点2つとアンカーポイント追加
MySegment.Points.Add(p);
MySegment.Points.Add(p);
MySegment.Points.Add(p);
}
else
{
//制御点2つとアンカーポイント追加
MySegment.Points.Add(p);
MySegment.Points.Add(p);
MySegment.Points.Add(p);
}
}
}
}
ベジェ曲線
アンカーポイントと制御点を表示してみると
紫色が制御点
上の数値はインデックス
下はx,y座標
制御点をアンカーポイントと同じ座標にすると
直線になる
重ねたので見えてないけど02，05の下にアンカーポイントがある
Pathから目的のPointまでの関係
上を簡単に書くと
Path.Data.PathFigure[0].PolyBezierSegment[0].Points
こうかな、こうしてみるとそんなに遠くない気もするけどやっぱり遠い
Pointsまで遠いのでPolyBezierSegmentを入れておく変数を用意
アプリ起動時にMyPath.Dataの初期設定
Path.Data.PathFigure[0].PolyBezierSegment[0].Points
この部分の作成
左クリック時
その後は制御点を2つとアンカーポイント1つを追加、座標は全部クリックした座標を指定
最初の座標はPathFigure.StartPointでそれ以降がPolyBezierSegment.Pointになる
もしPathFigure.StartPointを指定しないとPoint(0,0)がStartPointになる
マウス移動時
コード
関連記事
2018/06/11
マウスクリックでCanvasにベジェ曲線で曲線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15544835.html
2018/06/08
マウスクリックでCanvasに直線を描画その2、Polyline、WPFとC# ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ直線ならこの方法が一番ラク
https://blogs.yahoo.co.jp/gogowaten/15540488.html
2015/1/27
Pixtack紫陽花2.6.50.134_マウスクリックでもベジェ曲線を描けるようにした ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/12656208.html
3年前、このときはWindowsForm＋VisualBasic
今はWPF＋C#でこれと同じことをしようとしている途中
ほとんど忘れていてなかなか進まない