rozured https://blog.hatena.ne.jp/rozured/ HAKUTAI Tech Notes https://ojizo-badge-99.hatenablog.com/ Angular Paper.js Angularを利用してパス描画ツールを作成したので実装過程をまとめてみる。 WEBアプリケーションで描画処理といえばHTML5のCanvasを利用することが多いと思われるが、今回はCanvasをベースにPaper.jsというフレームワークを利用して実装した。当初は純粋にCanvasだけで実装を進めようとしていたが、結構な壁に当たってしまった。そこで色々探した結果Paper.jsに辿り着き、非常に使い勝手が良さそうだったのでこれで実装を進めることにした。 完成イメージ 開発環境 Paper.jsとは？ ディレクトリ構成 実装 Paper.jsの導入と初期設定 マウスの現在位置の座標を取得する … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fojizo-badge-99.hatenablog.com%2Fentry%2F2020%2F11%2F14%2F151125" title="AngularとPaper.jsでパス描画ツールを作る1 - HAKUTAI Tech Notes" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/r/rozured/20201031/20201031150851.gif Hatena Blog https://hatena.blog 2020-11-14 15:11:25 rich https://ojizo-badge-99.hatenablog.com/entry/2020/11/14/151125 1.0 100%