Масштабирование холста вместе с элементами над ним

Question

Я хотел бы получить некоторые идеи о том, как это реализовать.

Вот эскиз:

Описание: У меня есть сцена (холст на эскизе) и, скажем, 2 панели. Canvas лежит в DIV с относительным положением, панели находятся вне этого DIV, и в этом DIV есть некоторые элементы с абсолютным положением. Все эти элементы являются перетаскиваемыми. Каждый элемент - это div с внутренним холстом.

Проблема: Мне нужно как-то реализовать масштабирование этого холста. Я масштабирую холст (на нем нарисована сетка), и элементы также масштабируются. Это может быть масштабирование (я знаю о качестве после масштабирования растрового изображения, в моем случае это приемлемо). Единственная проблема, которую я не знаю, как решить, это как масштабировать холст и независимые элементы над ним, что у нас есть иллюзия, что сцена масштабируется. Надеюсь, вы поняли, что я пытаюсь сделать.

Answer 1

Если ваши целевые браузеры поддерживают преобразования CSS3, вы можете применить преобразование к плавающим элементам div, чтобы оно соответствовало тому, что на холсте, например установить стиль на transform: scale(1.5,1.5).

Примечание: вы, вероятно, захотите, чтобы div, обертывающий холст, и абсолютные div имели overflow: hidden, чтобы вы могли показывать вещи только в этой области.