WPF、マウスドラッグ移動でなめらかな曲線を描画、PolyBezierSegment
マウスドラッグ移動(右クリック)でベジェ曲線
できた!
4ヶ月前の2018/6/24のときには
こうだったからだいぶ良くなった
夏が春くらいの暑さならもっと良かったんだけどねえ
線の端を丸める
これは単にPathの設定を変えただけで
764行目からの3行でそれぞれ
つなぎ目、終わりのキャップ、始まりのキャップに
Roundを指定するだけでよかった
アンカー点の個数を減らして線を滑らかに
この線の場合624個のアンカー点になっている
線を滑らかにするには減らす必要がある
間隔1と36の違い
624/36≒17.3
これで十分
減らし方は
間隔2なら2個のうち1個を残す
間隔3なら3個のうち1個を残す
っていう簡単な方法にしたんだけど
このままだと
終点側にアンカー点が偏って線が不自然になる
間隔を2~4にすると最後の一個前の36番目が残って
ここだけ間隔が1になってしまう
他にも間隔が5、11、12のときも最後の間隔が狭すぎる
解消するには最後のアンカー点とその一個前の間隔が
半分以下ならその一個前を削除するようにした
結果
このほうが自然
削除しなくても
制御線の長さの決め方を前後のアンカー点距離に比例させる
「separate別々」にすると不自然さはかなり解消される
4ヶ月かかったマウスドラッグ移動で線を描画は今回で終わり
完走した感想
思ったより時間かかった
夏が相変わらず暑くて何もできなかった
なめらかな曲線が目的だったけど、いつの間にか文字ばかり描いていた
マウスの左ボタンが半壊して久しい(2年くらい)ので
右ボタンでのドラッグ移動に書き換えた
方向線角度の決め方は平行法より中間角度の直角のほうが”若干”いい感じ
方向線長さの決め方はSeparate別々が一番いい
これも方向線長さに関係する曲げ具合は0.2~0.3くらいが良さそう
間隔は難しくて線による、今回描いた線だと20~30が適当だけど、もっと小さい範囲だと20以下が適当になるみたいで、描いた線が収まる四角形の面積に比例するのかも?狭い面積なら線を細くするだろうから線の太さで見るのも良さそう
ぎっとはぶ
アプリダウンロード先はヤフーボックス
今回のアプリのダウンロード先
Release 20181104_マウスで引いた線をベジェ曲線4 · gogowaten/20180226forMyBlog
関連記事
方向線角度の決め方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