Масштабирование DOM-элементов: масштабирование против преобразования

Question

У меня есть сетка масштабируемых элементов div. При нажатии на элемент div он масштабируется, масштабируется и центрируется с помощью Zoomooz.js. Внутри каждого div есть нарисованная область (например, Canvas), реализованная с использованием Raphäel.

Моя проблема в том, что, хотя функция масштабирования работает отлично, масштабирование div делает невозможным разумное рисование на div, поскольку div масштабируется, а не просто трансформируется в большую ширину / высоту. Я действительно хочу эффект масштабирования, но вместо масштабирования div(ов), я предполагаю, что я хочу сделать преобразование для всех div, и отцентрировать выбранный div, используя эффект замедления или тому подобное.

Любые предложения будут высоко ценится!

Answer 1

Одним из вариантов будет обратное преобразование содержимого холста. Итак, сделайте холст в два раза больше, чем в противном случае, а затем используйте что-то вроде -webkit-transform:scale(0.5); или подобное, чтобы сделать его вписанным в место, отведенное для него. Теперь, когда вы приближаетесь к элементу, вы получаете двойное разрешение.

Другой вариант - использовать графику SVG или аналогичный контент, не зависящий от разрешения, для чертежа. Вот сайт, использующий Zoomooz с SVG: http://www.parti-socialiste.fr/bilan-sarkozy/