HAKUTAI Tech Notes

IT関連、数学のことなどを主として思いつきで色々書き溜めていきます

AngularとPaper.jsでデジタイザを作る1

散布図や折れ線グラフなどの画像しかない時に、そのグラフの値を数値化(デジタイズ)したい場合がある。大抵の場合、「その画像を読み込む→座標軸を合わせる→グラフの線などに沿って自分で点をプロットする」といった手順を踏んで数値化していくことになる…

AngularとPaper.jsでパス描画ツールを作る3

ここまで実装してきたパス描画ツールに最後にもう少し機能を追加していく。 パスが既に閉じられた多角形に対して、任意の辺に頂点を追加したり任意の頂点を削除できるようにする。 開発環境やディレクトリ構成は前回、前々回と変わらないので省略する。これ…

AngularとPaper.jsでパス描画ツールを作る2

前回の記事ではパス描画ツールの基本的な処理を実装した。今回はさらに機能を拡張し、パスの交差制御と頂点マーカーのドラッグ移動を実装していく。 完成イメージ 実装 パスの交差を制限する 頂点のドラッグ移動を可能にする セグメント上でマウスカーソルの…

AngularとPaper.jsでパス描画ツールを作る1

Angularを利用してパス描画ツールを作成したので実装過程をまとめてみる。 WEBアプリケーションで描画処理といえばHTML5のCanvasを利用することが多いと思われるが、今回はCanvasをベースにPaper.jsというフレームワークを利用して実装した。当初は純粋にCan…