2本の直線セグメントを2次Bezierで繋いでみる ~ ただしJSON手書き
2本の直線セグメントを2次Bezierで繋いでみます。
制御点は2つの直線セグメントがそれぞれのる2つの直線の交点としています。
2本の直線セグメントを１セット（セグメント対）として、任意個数のセグメント対を配列として、JSONで手書きできます。
とりあえず JSON - 例 [1], [2] あたりを [描画] していただいて、数値を変えてみてください。
(元気なら、もっと直感的に操作できるものを canvas の練習で作りたいので、これについての説明はエコで。ごめんなさい。)
JSON - 例
<経緯>
↓ 路線図メーカーっていうのがあります。
↓ (便利そうかもと思いつつ、私はまだ使ったことがないのですが。ごめんなさい。)
これの開発関連で、
・2本の直線セグメント (離れた位置で直角) を滑らかに繋ぐ
・平行して複数本あっても繋いでいる間もぶつからない、変に間が開かない
・直線セグメントと曲線は滑らかに行き来
... みたいなお題が出てて、楕円弧で繋ぐんだそうだ。
なんとなく、狭い私だと、Bezierで良いんじゃないかと思えた。
やってみないことにはイメージもつかなかったので、やってみた。
... というわけです。
少なくとも JavaScript の canvas は 任意次数のBezier を各関数が用意されてるっぽいので、このサンプルでは簡単でした。
他の言語でも Bezier はあるんじゃないかなぁ。
そもそもどうなんでしょうね、Bezier じゃまずいケースがあるんでしょうか？
[参考文献]
【JavaScript】canvas にベジェ曲線を描画する
JavaScript テキストエリアの値を取得/設定するサンプル | ITSakura
【JavaScript】配列←→JSON文字列に変換する方法 – 株式会社シーポイントラボ ｜ 浜松のシステム開発会社
HTML5 Canvas の描画領域全体をクリアする | まくまくJavaScriptノート
