Существует ряд сложных проблем, которые необходимо решить с помощью такого проекта. На самом деле я недавно разработал многопользовательское приложение для рисования в режиме реального времени, используя PHP и MySQL для бэкэнда. Вот некоторые из наиболее важных идей:
JS не имеет возможности опрашивать координаты мыши с разрешением, которое вам действительно нужно для идеального приложения для рисования. Для легких, забавных зарисовок вы можете сойти с рук. Однако эмулировать качество Photoshop невозможно. Эта проблема в первую очередь приводит к граненым эскизным линиям. Вы можете увидеть это немного в примере, к которому вы привязаны, но это становится слишком очевидным, если вы не используете собственные функции рисования линий и вместо этого используете пользовательские формы штампов.
Загрузка состояния холста пользователя возможна с помощью метода, поясненного Яном Чонгбуом, но это не без проблем. Рассмотрим следующий сценарий: user1 и user2 подключаются к приложению одновременно и встречаются с пустым холстом. user1 рисует большой красный заполненный круг, а затем user2 рисует большой синий заполненный треугольник. От внешнего наблюдателя user1 нарисовал их сначала, а user2 нарисовал их вторую. В довольно вероятном сценарии предположим, что рисунок user2 завершен, загрузка на сервер раньше, чем user1 из-за задержки в сети. Ваш сервер неправильно сохранит состояние user1 поверх user2. Это довольно упрощенная версия проблемы, но это серьезная проблема, поскольку система масштабируется и одновременно рисуют несколько человек. Люди будут рисовать поверх друг друга, и состояние холста будет отличаться для каждого локального пользователя.
Другая проблема, которую следует учитывать, заключается в том, что загрузка данных холста после каждого действия вообще не масштабируется с разрешением холста. Если вы разрабатываете что-то, что должно работать в полноэкранном разрешении, загрузка (например) изображения 1680x1050 после каждого действия, безусловно, неэффективна. Вместо этого вы должны смотреть на передачу информации, необходимой для воссоздания действий пользователя. Это гораздо лучший подход (т. Е. Нарисуйте синий круг с радиусом 9 пикселей в [4,6]). Это также лучше подходит для организации баз данных.
Один вариант, который я развлекал некоторое время, заключался в том, чтобы PHP обновлял серверное изображение холста, на котором все рисовали. Поскольку обновления были получены сервером, PHP будет загружать те же ресурсы, которые используются пользователями локально, и выполнять те же действия при рисовании. Затем, когда подключился новый пользователь, он просто взял самое последнее изображение на стороне сервера и обработал все дополнительные обновления локально, чтобы догнать всех остальных. К сожалению, это не очень хорошо масштабируется, так как все функции изображений PHP основаны на процессоре, а когда вы работаете с такими вещами, как изменение размера кисти, вращение, прозрачность и интервалы, это занимает слишком много времени, чтобы обновление было обработано стоить того.
Помимо качества линии, самая большая проблема, с которой вы столкнетесь, - это синхронизировать всех. Для ваших целей это может быть совсем не проблема, но если вы снимаете реализацию многопользовательского Photoshop в браузере, это довольно большой билет.
Если у вас есть другие вопросы по поводу этого или конкретных идей / подходов, не стесняйтесь спрашивать.