правильно изменить размер бумаги. js после css смены класса

Question

У меня есть несколько холстов и paperScopes, и я переключаюсь между ними, «минимизируя» и «восстанавливая» их, добавляя \ удаляя класс коллапса в их родительский div.

Проблема в том, что однажды я установите бумагу на холст, он сохраняет исходный размер холста после того, как он будет изменен путем удаления минимизации.

Я пробовал добавить data-paper-resize="true" или resize="true" на холст, но это не сработало .

Я попытался отправить событие изменения размера с помощью window.dispatchEvent(new Event('resize'));, но похоже, что оно конфликтует с бумагой и вызывает исключение (для этого была зарегистрирована ошибка).

Изменение размера окна приводит к тому, что бумага становится правильное состояние.

Вот рабочий пример:

https://jsfiddle.net/o2fnarqx/3/

Есть идеи, как правильно изменить размер?

Я также открыт для предложений относительно других библиотек рисования ... Все, что мне нужно сделать, это отобразить разные изображения на разных минимизируемых холстах и ​​нарисовать интерактивные маркеры поверх этих изображений (маркеры нужны получить тр ansparent при наведении курсора мыши и перетаскивании при перетаскивании).

И я работаю в чистом виде JS, без Node.

Answer 1

Вы можете попробовать устанавливать размер холста вручную каждый раз при изменении его размера, используя свойство view.viewSize . Для этого вы можете использовать следующий код:

yourPaperScope.view.viewSize = new Size(yourCanvas.offsetWidth, yourCanvas.offsetHeight);

Надеюсь, этого будет достаточно для вас, чтобы адаптировать его к вашему конкретному c случаю.