Контекст
Я использую бумагу JS для создания многопользовательской рисованной игры. В любой момент один пользователь будет рисовать на своем холсте, и данные будут отправляться на сервер для передачи другим пользователям. Холст каждого пользователя может иметь переменный размер, и его размер изменяется по мере изменения размера окна при сохранении одинакового соотношения сторон.
Цель состоит в том, чтобы каждый пользователь имел масштабированное представление чертежа (т. Е. Все помещается в разные полотна и контент не искажается). Это должно быть в том случае, если рисунок переносится с большего холста на меньший холст, и наоборот. Проект поддерживает инструмент рисования, а также инструмент ластика.
Задача
Подход 1 ниже масштабирует чертежи так, как я хочу, но с существенным отставанием. Подход 2 имеет дело с задержкой, но не масштабирует рисунки так, как я хочу.
Насколько я понимаю, SVG будет хорошо масштабироваться независимо от того, масштабированы они или уменьшены. Но растры основаны на пикселях и станут «размытыми» при увеличении. Когда я тестирую подход 2, рисунок с меньшего холста размывается на большем холсте. Результат один и тот же, использую ли я export / import JSON или export / importSVG. Есть ли способ получить как хорошую производительность, так и масштабные чертежи? Ниже приведены примеры реализации инструментов.
Подход 1: Пути + символы:
- Все пути / символы размещаются в активном слое.
- Инструмент ластика dr aws белый прямоугольник (определяемый как символ) для обозначения c эффекта "стирания".
- Это отлично работает как демонстрационная версия, но начнет отставать очень быстро, так как количество элементов в активном слое увеличивается. В частности, инструмент ластика не будет работать гладко.
- Соответствующий эскиз
Подход 2: Растеризация:
После прорисовки контура или размещения символа активный слой растеризуется, а его дочерние элементы удаляются.
Кажется, это хорошо работает на одном холсте и ластик не запаздывает, как при первом подходе. После каждого растеризации в активном слое остается только 2 элемента.
Когда рисунок с клиента с меньшим холстом экспортируется (используя export JSON или exportSVG) на клиент с При увеличении размера холста результат получается «размытым».
Вышеописанное также происходит при создании рисунка, а затем размер холста изменяется до большего.
Соответствующий эскиз