午後わてんのブログ

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

Polyline折れ線からベジェ曲線作成と曲げ具合

今回のアプリのダウンロード先
Polylineの折れ線からベジェ曲線

f:id:gogowaten:20191213110245p:plain

このPolylineを使って描いた折れ線から
 
イメージ 2
このベジェ曲線を作成
 
C#コード
using System.Windows;
using System.Windows.Media;

namespace _20180623_折れ線をベジェ曲線に
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            AddPathBezier();
            ButtonVisible.Click += ButtonVisible_Click;
        }
        
        private void ButtonVisible_Click(object sender, RoutedEventArgs e)
        {
            if (MyPolyline.Visibility == Visibility)
            {
                MyPolyline.Visibility = Visibility.Hidden;
            }
            else { MyPolyline.Visibility = Visibility.Visible; }
        }
        
        private void AddPathBezier()
        {
            //ベジェ曲線にするPathの初期化
            var seg = new PolyBezierSegment();
            var fig = new PathFigure();
            fig.Segments.Add(seg);
            var pg = new PathGeometry();
            pg.Figures.Add(fig);
            MyPathBezier.Data = pg;

            //ベジェ曲線のSegment作成
            PointCollection pc = MyPolyline.Points;
            fig.StartPoint = pc[0];//始点アンカー
            seg.Points.Add(pc[0]);//始点制御点
            for (int i = 1; i < pc.Count - 1; i++)
            {
                seg.Points.Add(pc[i]);//制御点
                seg.Points.Add(pc[i]);//アンカー
                seg.Points.Add(pc[i]);//制御点
            }
            seg.Points.Add(pc[pc.Count - 1]);//終点制御点
            seg.Points.Add(pc[pc.Count - 1]);//終点アンカー

            //各アンカーの制御点座標を調節して、なめらか化
            Point startAP = fig.StartPoint;//始点側アンカー点
            Point AP, endAP;
            double xDiff, yDiff;
            pc = seg.Points;
            for (int i = 2; i < pc.Count - 3; i += 3)
            {
                AP = pc[i];//注目アンカー点
                endAP = pc[i + 3];//終点側アンカー点
                xDiff = (endAP.X - startAP.X) / 4;
                yDiff = (endAP.Y - startAP.Y) / 4;
                //始点側制御点
                pc[i - 1] = new Point(AP.X - xDiff, AP.Y - yDiff);
                //終点側制御点
                pc[i + 1] = new Point(AP.X + xDiff, AP.Y + yDiff);
                startAP = AP;
            }
        }
    }
}
 
これは
マウスクリックでCanvasに直線を描画その3、ベジェ曲線で直線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15542192.html
このときの逆変換みたいな感じ
 
元のPolylineの各座標をベジェ曲線のアンカー点にして、各アンカーの制御点座標を調節して曲線のベジェ曲線にしている
 
今まではアンカー点から制御点の距離を前後のアンカー間の1/4にしていた
イメージ 3
57,58行目、4で割っているこれを変えてみると
 
イメージ 4
1/3だと、1/4とそんなに変わりない、これもいいねえ
 
イメージ 5
1/2、これだと元の線からだいぶ離れる
大げさに曲線にした感じ
 
イメージ 6
1/1、元の線の面影すらなくなった
 
今度は逆に短くすると
イメージ 7
1/8、元の線に近くなった
 
イメージ 8
1/20、こういうのもいいねえ
こんな感じで調節できるのがわかった
 
今回のコード
 
 
関連記事
2018/6/9は24日前
マウスクリックでCanvasに直線を描画その3、ベジェ曲線で直線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15542192.html
 
 
制御点座標の調節は
2018/6/11は12日前
マウスクリックでCanvasベジェ曲線で曲線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15544835.html