共同ホワイトボード プロジェクトに fabric.js を使用しています。フリーハンドの描画パスを複数のユーザーが同時に描画できるようにしたい。これを行うには、PencilBrushリモート ユーザーごとに新しい を作成し、リモート ユーザーがこれらのアクションを実行するたびに PencilBrush クラスのonMouseDown()、 、onMouseMove()およびメソッドを呼び出してフリーハンド描画をシミュレートできると考えました。onMouseUp()私はそのようなことをするjsfiddleを作成しました: http://jsfiddle.net/dkostro/7sx8N/21/
2 つのパスを同時に描画し、ユーザーはその間にキャンバスに描画することもできます。ご覧のとおり、道の 1 つはこれまでに見onMouseUp()たことのないものであり、フリーハンドで描いたものはあまりきれいではありません。問題は、各PencilBrushインスタンスが関数を呼び出す前に上部のキャンバス要素をクリアするため、_render同時に表示できるパスは 1 つだけであると考えました。
fabric.js のコードをあまりいじらずにスムーズに動作させる方法を考えてみませんか? 私が考えた 1 つの解決策は、それぞれに個別の canvas 要素を用意PencilBrushすることですが、それは fabric.js コードを台無しにすることになり、クリーンな方法ではない可能性があります。他の提案はありますか？
編集
質問で考えていたこの1つのソリューションを実装しました（ユーザーごとに個別のキャンバス要素）。http://jsfiddle.net/stropitek/DzygL/14/ . これが何人のユーザーにスケーリングできるか、またはこれが適切なソリューションであるかどうかはわかりませんが、少なくともこの例ではうまく機能しているようです.