HAKUTAI Tech Notes

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

AngularとPaper.jsで簡易なデジタイザを作る5

概要 完成イメージ 実装 CSV出力処理 おわりに 概要 ここまでデジタイザを作ってきたが、そもそもデジタイザというものはプロットによって明らかにした座標の数値データを何かに利用するためにあるのだから、画面上でプロットしたデータをファイル出力して扱…

AngularとPaper.jsで簡易なデジタイザを作る4

概要 完成イメージ 実装 パスの描画 プロットの中断、再開 座標点の移動、追加と削除 パスの選択と削除 おわりに 概要 これまで実装してきたのは、Viewの操作や座標変換といった下準備のものである。いよいよ本題の座標点のプロット機能を実装していくことに…

AngularとPaper.jsで簡易なデジタイザを作る3

概要 完成イメージ 実装 レイヤー分割 座標軸設定パスの描画 座標軸設定用パスの再描画 基準軸の最大値、最小値の設定 座標値の変換 おわりに 概要 最終的にデジタイザとして機能させるためには、自分で設定した任意の座標系で点をプロット(座標を取得)可…

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

概要 完成イメージ 実装 拡大縮小処理 ズーム処理 その1(準備) ズーム処理 その2(メイン部分) Viewのリセット おわりに 概要 前回は画像を読み込んでキャンバスに表示するところまでを実装したので、今回は画像の平行移動・ズーム機能を実装していく。開…

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

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

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

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

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

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