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

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

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