開発中
落書きしかできないくらいシンプルな、いわゆるお絵描きチャット。 リモートでの、ちょっとした概念図の説明などの用途が対象。
このプロジェクトでは、パッケージマネージャとしてpnpmを使用する。 それがインストールされていることを確認した後、
# 依存関係のインストール
$ pnpm install --frozen-lockfile
# 開発サーバーの起動
$ pnpm run dev用語:
- パス（Path） キャンバスに描いた線。ペンを下ろして動かして上げるまでの、一筆書きの単位。 線の最初から最後を経由する飛び飛びの座標を持つ。（マウスカーソルの移動で追跡できる範囲）
- スタック（Stack） キャンバスに描かれている線（パス）をまとめた配列。配列の中身は描かれた順で並ぶ。
- 部屋（Room） 絵チャの部屋。CloudflareのDurable Objectで表現され、スタックを持つ。 クライアントが加えた変更は、Durable Objectにより他のクライアントに配信される。
機能の実装方法:
- ペン パスを作ってスタックに追加する。
- 消しゴム 白色のペンと同じ。
- Undo（「元に戻す」） ちゃんと元に戻すわけではなく、スタックの最後のパス（直近で描かれた線）をスタックから消し、 キャンバスを全消ししてスタック内のパスを最初から最後まで再描画する。 （この仕組みなら、消しゴム機能の中身が白色のペンでも問題ない。）
- リセット キャンバスをリセットして、スタックを削除する。
このプロジェクトでは、キャンバスのズームなどにpanzoomを使用しました。 また、以下の文献を参考にしました。ありがとうございます。