HAKUTAI Tech Notes

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

【Vue.js / Typescript】画像一覧+ページネーションを実装する(フロント側のみ)

ライブラリなどを利用せず自力でVueのページネーション処理を実装したのでその手順や考え方などを書いておく。 特にここでは、数十枚の画像がグリッド状に並んでいるような画面でのページネーションを想定しており、ページ番号ボタンなどをクリックすると表…

ProcessingとPythonで雪を降らせる

『Pythonではじめる数学の冒険』(Peter Farrell 著 / 鈴木 幸敏 訳 O’Reilly Japan)という本を見つけて面白そうだったので購入した。 この本を一通り読んでみてProcessingとPythonと数学的処理を利用して色々描画する方法を知ったので、本で扱われている一…

Typescriptで中身が複雑なオブジェクトの型を定義する

最近TypescriptベースのVueで簡単なアプリを色々作ろうとしている。 あるアプリの作成を進めている中で、割と複雑な中身(関数や別のオブジェクトが含まれている)のオブジェクトを返す関数を実装することがあり、Missing return type on function.の警告が…

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

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

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

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

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

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

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

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