午後わてんのブログ

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

WPF、マウスドラッグ移動でなめらかな曲線を描画、PolyBezierSegment

マウスドラッグ移動(右クリック)でベジェ曲線
イメージ 1
できた!
 
4ヶ月前の2018/6/24のときには
こうだったからだいぶ良くなった
夏が春くらいの暑さならもっと良かったんだけどねえ
 
 
線の端を丸める
イメージ 2
これは単にPathの設定を変えただけで
イメージ 3
764行目からの3行でそれぞれ
つなぎ目、終わりのキャップ、始まりのキャップに
Roundを指定するだけでよかった
 
 
アンカー点の個数を減らして線を滑らかに
イメージ 4
この線の場合624個のアンカー点になっている
線を滑らかにするには減らす必要がある
 
イメージ 5
間隔1と36の違い
624/36≒17.3
 
 
減らしたところでアンカー点と制御線の表示
イメージ 6
これで十分
 
減らし方は
間隔2なら2個のうち1個を残す
間隔3なら3個のうち1個を残す
っていう簡単な方法にしたんだけど
このままだと
イメージ 8
終点側にアンカー点が偏って線が不自然になる
 

f:id:gogowaten:20191213132405p:plain

0から37までの38個のアンカー点の場合
間隔を2~4にすると最後の一個前の36番目が残って
ここだけ間隔が1になってしまう
他にも間隔が5、11、12のときも最後の間隔が狭すぎる
 
解消するには最後のアンカー点とその一個前の間隔が
半分以下ならその一個前を削除するようにした
結果
イメージ 9
このほうが自然
 
 

f:id:gogowaten:20191213132420p:plain

650~657行目がそれ
 
削除しなくても
イメージ 11
制御線の長さの決め方を前後のアンカー点距離に比例させる
「separate別々」にすると不自然さはかなり解消される
 
 

 
4ヶ月かかったマウスドラッグ移動で線を描画は今回で終わり
完走した感想
思ったより時間かかった
夏が相変わらず暑くて何もできなかった
なめらかな曲線が目的だったけど、いつの間にか文字ばかり描いていた
マウスの左ボタンが半壊して久しい(2年くらい)ので
右ボタンでのドラッグ移動に書き換えた
 
方向線角度の決め方は平行法より中間角度の直角のほうが”若干”いい感じ
方向線長さの決め方はSeparate別々が一番いい
これも方向線長さに関係する曲げ具合は0.2~0.3くらいが良さそう
間隔は難しくて線による、今回描いた線だと20~30が適当だけど、もっと小さい範囲だと20以下が適当になるみたいで、描いた線が収まる四角形の面積に比例するのかも?狭い面積なら線を細くするだろうから線の太さで見るのも良さそう
 
 

 
ぎっとはぶ
アプリダウンロード先はヤフーボックス
 
今回のアプリのダウンロード先
Release 20181104_マウスで引いた線をベジェ曲線4 · gogowaten/20180226forMyBlog 

github.com

ここの20181104_.4.zipがアプリ

 


 
 
関連記事
方向線角度の決め方2種とその方向線長さの決め方を4種は
Parallel平行
WPFベジェ曲線、違和感なく滑らかになるような制御点座標はどこ?その1 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15728810.html
RightAngleOfCenter中間の直角
WPFベジェ曲線、違和感なく滑らかになるような制御点座標はどこ?その2、アプリでの角度とラジアン、座標から角度 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15734192.html

 

 
WPFベジェ曲線、違和感なく滑らかになるような制御点座標はどこ?その3(終) ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15735391.html
はじまりは2018/6/24
マウスドラッグ(移動)で線を描画、CanvasにPolyline ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15563685.html