Quantcast
Channel: 午後わてんのブログ
Viewing all articles
Browse latest Browse all 420

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

$
0
0

Polylineの折れ線からベジェ曲線
イメージ 1
この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
マウスクリックでCanvasに直線を描画その3、ベジェ曲線で直線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15542192.html



制御点座標の調節は
2018/6/11
マウスクリックでCanvasにベジェ曲線で曲線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15544835.html












Viewing all articles
Browse latest Browse all 420

Trending Articles