午後わてんのブログ

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

Pixtack紫陽花2.6.50.134_マウスクリックでもベジェ曲線を描けるようにした

┠Pixtack紫陽花 #ソフトウェア
マウスクリックでもベジェ曲線を描けるようにした
 

動作の様子
マウスクリックでベジェ曲線を描画しているところ
 
 

参考にしたのがエクセルの曲線の挿入の動き

動きを見てみると一個前にクリックしたところのアンカーポイントの制御点(コントロール)もマウスの動きに合わせて動いている
イメージ 1
 
06がマウスカーソルの位置、03が一個前にクリックしたところでアンカーポイントになっているところ
 
 
イメージ 2
マウスで描画中
06がマウスカーソル位置だとすると
伴って動く座標は02,04,05、自分を合わせると4個動くことになる
でも02と04は連動なので実質は3こかな
アンカーポイントからの制御点までの距離はアンカーポイント間の4分の1でいいか？
02から04の直線角度は00と06と同じにするとよさそう
まず00と06の距離と角度を測る
距離の4分の1を03と02の距離と03と04の距離にする
角度も同じ角度を02,03,04にする
これで02,04の座標が決まる、あとは05
角度は04へ向けての直線、距離は03と06の距離の4分の1でいいかな
これで全て決まったことになる
 
03がマウスカーソルの時
これは00からの直線になる
計算する座標は01と02、これは反対側のアンカーポイントへ向けての角度で
距離はアンカーポイント間の4分の1
クリック毎に3頂点増える、曲線になるのは2クリックめの後で
06がマウスカーソルになった時から
 
マウスダウンで頂点追加、個数は3、座標は3つともクリックした座標
マウスムーブで頂点移動計算
06を動かすと03の制御点の02と04も動くことになる
 
 
00と03のアンカーポイントが固定で06をマウスで動かす時、02,04,05の座標はどうしたらいいか
02,03,04は一直線にして角度は00,06間と同じ角度にしてみる
03,04間の距離は00,06間の距離の4分の1にしてみる(適当)
06,05間の角度は04,06間の角度と同じにしてみる
06,05間の距離は03,06間の距離の4分の1にしてみる(適当)

f:id:gogowaten:20191016171502p:plain

相変わらず三角関数を使っているっぽいことを書いているけど使っていないし
理解できない
それでも期待通りの動きになった！
 
 
2018/06/11追記
上の図は余計なところがあったので書き直した

f:id:gogowaten:20191016171521p:plain

斜辺や隣辺とか必要なかった
2018/06/11追記ここまで
 
 
 

f:id:gogowaten:20191016171532p:plain

アンカーポイントが一個の時はこんなかんじでできた
うまくエクセルの真似ができたと思う
 
 
ダウンロード
ヤフーボックス
 
 
関連記事
2018/06/11、WPFとC#でベジェ曲線
マウスクリックでCanvasにベジェ曲線で曲線、PolyBezierSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15544835.html
 
次回