Добрый день. Есть задача, создать визуальный редактор, при окончании работы с которым нужно генерировать JPG картинку или PDF файл. При создании "документа", нужно сделать так, чтобы размеры можно было задавать в см, в мм и пикселях. Ну как в Adobe Photoshop. Также нужно значение DPI как то учитывать потом.
Редактор планирую делать на jQueryUI с помощью перетаскивания элементов, для определения позиции элемента используется jQuery position()... он выдает позицию в пикселях. По мере работы заметил несколько проблем:
1) Одна проблема в том что если задать размеры документа в сантиметрах, например размер А4 листа, 21х29см, то на разных мониторах, количество пикселей входящих в эти 21см всегда разнится. Проверил на трех разных мониторах с диагоналями 19, 24 и 27. Хоть сколько то но отличие есть.
2) Еще сам по себе этот метод position() имеет какие то проблемы с расчетами положения и размеров объекта. Например если задать DIV шириной 790 пикселей, а внутри перетаскивать объект длиной в 60 px, и перетащить объект до края DIV, то этот метод вернет ширину объекта 60пкс, а стартовую позицию по ширине только 726 например. Получается 726 + 60 = 786, что на несколько пикселей отличается от полного размера DIVа в 790px.
Учитывая что рабочий лист потом должен иметь возможность масштабироваться и эту проблему с пикселями на разных мониторах, получается что мне подойдут какие то относительные единицы измерения.
Вот тут набросал пример этого редактора.
В связи с вышеописанным возник вопрос. Какие единицы измерения или какие приемы работы вы бы посоветовали использовать, чтобы независимо от масштаба рабочего листа и параметров монитора, документ всегда можно было бы редактировать на однообразно понимаемым любым устройством способом. Если это имеет значение, то содержимое документа (рабочего листа) это всегда HTML код и CSS стили. Т.к. редактором будут пользоваться люди которые ни черта не понимают ни в HTML, ни в CSS, нужно заранее избавить их от этих проблем.
У меня в голове пока только одно решениеБольшую сторону документа независимо от ориентации, задаем в жестких пикселях, например 1000px, а меньшую сторону, соответственно пропорциям документа. И после этого все перемешения обьектов делать внутри этих тысячу пикселей, каким бы по размеру документ не был, но когда настанет время генерировать картинку или PDF, зная сколько сантиметров входит в эту тысячу пикселей и какой DPI мы задавали документу в начале, можно все переумножать, рассчитать и в итоге сгенерировать нужный для нас контент с необходимымы параметрами
Но хотелось бы получить совета от людей более прошаренных в теме
