Excelとかの曲線
html（SVG）でExcelのオートシェイプ曲線をマネしようとした過去のデータをサルベージしとく
↓クリックで頂点を追加、ダブルクリックで終了。↓
この任意の点を通過する曲線は「Catmull-Rom曲線」というもので、調べたところ
ベジエ曲線で変換表現が可能と分かった。つまりhtml（SVG）でドロー出来る。
色々調べて最終的に参考にしたのはこちらです。
defghi1977-onblog.blogspot.com
まぁ他でも同じ変換式なんだけど、１点不満があってそれは
開始点と終了点の制御ベクトル算出式が直感的でない結果となること。
カタカナの「コ」の字をイメージして４点：左上、右上、右下、左下の順で打って見ると、
最初と最後の辺がグネグネするんですよ。
Excelで同じことをやると自然な感じなのです。
過去に作った上記サンプルは、とりあえず頂点 1..N があるとして、
始点の前の仮想頂点(0)を 1..3 の座標から適当に作ってやって始点の制御ベクトル算出に利用。
終点の後に仮想頂点(N+1)を (N-3)..(N-1) (N-2)..N から同様に作って終点の制御ベクトル算出に利用。
これでExcelのやつに近くはなったけど、完全には一致しない。[追記修正]
最近になって改めて Google SpreadSheet や Libre Office のやつも見てみたんですが、
Google SpreadSheet は微妙に違う。
Libre Office はそもそも線の引き方が異なってうまく再現できず。
Excelの始点・終点はどうやってるのかねぇ？
.xlsx (zip) の中身 drawing?.xml も見てみたけど分からんかった・・・
上記のソースは昔ちょーてきとーにつくった汚物をそのままコピペ
ここ数年html/jsやっとらんし最新のjsの書き方見てびっくり
