最初は単純なお絵かきボードを書きたかっただけでしたが、その後、グラファイトドキュメントにホワイトボード機能があることを無意識に思い出し、現在のキャンバス機能を共同お絵かきボードの簡易版に発展させたいと思いました。
オンライン デモ: 現在展開中ですが、ローカルで実行するにはクローンを作成する必要があります。
gitアドレス
2. 走る
git clone <repository>npm install#>>>>開発段階の場合: #フロントエンド サービスの起動 (webpack dev サーバーを使用): npm run dev#バックエンド サービスの起動 (実際にバックエンド ファイルの変更を監視するために nodemon が使用されます)時間を指定してサービスを再起動します) npm run start# >>>実稼働段階の場合: #フロントエンド ファイルをパッケージ化し、サーバーを起動します 1. npm run build2。
3.機能:
開発完了:
•キャンバスズーム（完了）
•キャンバスカラー（完了）
•ブラシカラー（完了）
・ブラシの太さ（完了）
・履歴（元に戻す、復元）（完了）
・チャットルーム(完了)
• 描画コラボレーション (グラファイト ドキュメント コラボレーションと同様) (完了)
開発すべき機能:・UIインターフェースの美化（開発予定） ・UIライブラリの利用予定（マテリアルデザイン）
・テキストコントロール（開発予定）
•写真をアップロードし、写真に基づいて描画します（開発中）
・図面の基本形状をドラッグしてサイズ調整可能（開発予定）
• 豊富なチャット機能（表現、画像、音声、動画）（開発予定） • webRTC がビデオストリームデータを取得して送信
・その他の未知の機能(x)
4.エフェクト描画
5.あとがき
このアプリケーションの実装は比較的基本的なものであり、まだ改善の余地がたくさんあります。
上記は、socket.io と Canvas によって実装された共有ドローイング ボード機能であり、ご質問があれば、編集者がすぐに返信させていただきます。