Есть знающие Inkscape?
 

Есть проблема. В браузере на страницу выводится изображение размером 2048х1367 с разрешением 96dpi для выделения на нем областей. Работа на странице производится с уменьшенным размером по ширине W = 1000.

1) для текущего DPI 96 размер пикселя в мм: mmpx = 2.5399931 / 96 = 0.0264583333
2) уменьшаем изображение на: aspectratio = 1000 / 2048 = 0.48828125
3) высота будет равна: H = 1367 * aspectratio = 667
4) отображаем размеры изображения в см: 2048 * mmpx = 54.19 / 1367 * mmpx = 36.17
5) рабочая область ограничена с краев на 2 см, узнаем ее в пикселях с учетом масштаба: 2 / mmpx * aspectratio = 37
6) расстояние между областями не должно быть меньше 1 см, в пикселях: 1 / mmpx * aspectratio = 18
7) делаем выделения и отображаем их координаты/размеры в см (с учетом масштаба), рассчитывая их: px * mmpx / aspectratio
8) если проверить и сделать одно выделение на всю рабочую область, то все верно с расчетами
9) сделали 4 выделения и передали их на сервер (в см), рассчитывая для SVG позицию по вертикали и от низа:

[
        {
            "x": 2,
            "y": 12.14,
            "y_svg": 5.99,
            "w": 7.04,
            "h": 18.04
        },
        {
            "x": 10.02,
            "y": 2.11,
            "y_svg": 2.09,
            "w": 15.01,
            "h": 31.97
        },
        {
            "x": 26.06,
            "y": 11.11,
            "y_svg": 7.07,
            "w": 15.01,
            "h": 17.99
        },
        {
            "x": 42.05,
            "y": 8.07,
            "y_svg": 16.72,
            "w": 10.08,
            "h": 11.38
        }
]

Создаем документ в Inkscape в пикселях 2048х1367, проверяем это в см, показывает 57,79911 х 38,57978, что уже не равно рассчитанному 54.19х36.17 (собственно для 96dpi размеры 57,79911 х 38,57978 не верны). Импортируем в документ изображение с разрешением считанном из него - изображение соответствует при этом рамкам документа. Но если расставить в нем сделанные выделения, то левая нижняя координата первого выделения с малой погрешностью по высоте становится на место, а вот ширина и высота его, если судить по изображению, не равна выделенному на клиенте. Отсюда начинают "плясать" и координаты/размеры остальных выделений.

Ошибка в расчетах на клиенте? Тогда бы и выделение всей рабочей области не соответствовало бы показаниям. Не верно встраивается изображение в документ Inkscape или не верно определяются свойства его документа, тогда как это верно сделать?

PS. Выделения в Inkscape расставляются так, что сверху и справа документа остается больше чем 2 см, то есть, выделения по размеру меньше оказываются, чем показываются на клиенте.

Как не имеет к теме отношения? Давай разбираться!

Всё верно, SVG-документ размером 2048×1367 единиц при 96 ppi будет иметь размеры ≈54.19×36.17 см, а при 90 ppi (которое очевидно используется в Inkscape) — ≈57.80×38.58см.

Ваши 2 сантиметра при различных значениях точек на дюйм (в данном случае нет никаких точек, а есть безразмерные единицы в пространстве SVG, так что грубо говоря, я считаю, что ваш 1 пиксель на растеризированной картинке раскрытой в полном размере соответствует 1 единице в SVG) будут иметь разные размеры в SVG — при 90 ppi будет ≈70.9 ед., при 96 ppi будет ≈75.6 ед. и при 300 ppi будет ≈236.2 ед.

S в SVG значит — масштабируемая. Единственное отношение, которое вы можете установить — использовать внутри SVG абстрактные единицы (добавив «px» при необходимости, чтобы CSS был верен), а затем установить ширину и высоту SVG в сантиметрах.

SVG не имеет никакого разрешения, это ведь векторная графика — SVG (Scalable Vector Graphics). Так что ваш SVG-документ может быть напечатан одинаково качественно и на маленькую марку, и на большой плакат на стене здания! Так что если вы хотите 2 см, вам нужно...

• принять, что одна единица равна одному сантиметру
• или пересчитать размер рамки в безразмерные единицы учитывая ppi

...и при печати использовать правильный размер бумаги — A2 в данном случае, а размер документа (≈54.19×36.17 см) указан в SVG.

Вот пример SVG размером 2048×1367 единиц, который отрисовывается на экране, занимая ≈1000×667.47 пикселей и имеет физический размер ≈54.19×36.17 см при разрешении 96 ppi...

Рамка нарисована на расстоянии 2 см (при 96 ppi) от краёв документа, а выделения мышкой рисуются в документ (devicePixelRatio нужен для правильного соответствия, когда страница отмасштабирована при помощи Ctrl+/-)! Также учтено, что документ при отрисовке может занимать меньшее место, как тут на форуме.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		html, body {
			background: #9CA3B1;
			width: 100%;
			height: 100%;
			display: grid;
			place-content: center;
			margin: 0;
		}
		svg {
			background: white;
			box-shadow: .1em .1em .5em .2em rgba(0, 0, 0, .3);
			cursor: crosshair;
			width: 90%;
			max-width: 1000px;
			display: inline-block;
			height: auto;
			margin: auto;
		}
		svg rect {
			pointer-events: none;
		}
		@media print {
			html, body {
				background: initial;
				display: initial;
			}
			svg {
				box-shadow: initial;
				width: auto;
				border: thin dashed rgba(0, 0, 0, 0.5);				
			}
		}
	</style>
</head>
<body>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		version="1.1"
		id="canvas"
		fill="rgba(33, 150, 243, 0.25)"
		stroke="rgba(0, 0, 0, 0.5)"
	></svg>
	<script>
		const size = { width: 2048, height: 1367 };
		const ppi = 96;
		const ppcm = ppi / 2.54;

		canvas.setAttribute("width", `${size.width  / ppcm}cm`);
		canvas.setAttribute("height", `${size.height / ppcm}cm`);
		canvas.setAttribute("viewBox", [0, 0, size.width, size.height].join(" "));

		const borderRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		borderRect.setAttribute("x", 2 * ppcm);
		borderRect.setAttribute("y", 2 * ppcm);
		borderRect.setAttribute("width",  size.width  - 4 * ppcm);
		borderRect.setAttribute("height", size.height - 4 * ppcm);
		borderRect.setAttribute("fill", "white");
		canvas.appendChild(borderRect);

		let activeRect = null;
		const event0 = {};

		canvas.addEventListener("pointerdown", event => {
			activeRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
			event0.screenX = event.screenX;
			event0.screenY = event.screenY;
			event0.offsetX = event.offsetX;
			event0.offsetY = event.offsetY;
			canvas.appendChild(activeRect);
		});
		addEventListener("pointermove", event => {
			if(!activeRect) return;
			
			const ρ = size.width / canvas.clientWidth;
			const α = 1 / devicePixelRatio;
			const Δx = event.screenX - event0.screenX;
			const Δy = event.screenY - event0.screenY;
			const x = Math.min(0, Δx * α) + event0.offsetX;
			const y = Math.min(0, Δy * α) + event0.offsetY;
			const width  = Math.abs(Δx) * α;
			const height = Math.abs(Δy) * α;

			activeRect.setAttribute("x", x * ρ);
			activeRect.setAttribute("y", y * ρ);
			activeRect.setAttribute("width", width * ρ);
			activeRect.setAttribute("height", height * ρ);
		});
		addEventListener("pointerup", event => {
			if(activeRect) activeRect = null;
		});
	</script>
</body>
</html>

Malleys, вы читать умеете? Я же русским языком написал - почему импортируемое изображение в SVG с разрешением взятом у него (96dpi) в документе с установленном с этим же разрешением размеры изображения/документа не соответствуют физическим размерам изображения. Если я выделения сделанные расставлю в том же фотошоп, то хоть попиксельно проверяй, все встает на место, и размеры самого изображения не такие как Inksczpe показывает.

Malleys, вы действительно полагаете, что вами написанное я читаю впервые? :)

Мне не нужно это читать, это дела давно прошедшие. Меня интересует не эта теория, а Inkscape, в нем как и в любом нормальном редакторе можно задать разрешение документа, ибо его как и любой иной можно на экране смотреть, а можно и распечатать.

Мне он в общем-то и не нужен для решаемой задачи, из этих выделений сервер сам готовит SVG оптимизированный. Назначение его, это маски на изображениях. Если эту маску приготовленную наложить на любое изображение с такими же отношениями сторон, то нет никаких проблем - как выделялось, так и работает. Более того, если в том же Inkscape руками подправить картинку и изменить размеры документа, на какие они и должны быть, а не те что он показывает, то и он сохранит без проблемную маску.

Вопрос возник потому, что есть идея еще кое-что добавить, что я и хотел в Inkscape проверить, и вот тут впервые обратил на это несоответствие внимание. Я нашел форум по Inkscape, если он не умер, то там спрошу, мне нужен тот кто хорошо знает эту программу, ибо есть еще вопросы по ней, которые мне важны.

Ну если бы вы были первооткрывателем этого и до вашего сообщения эта информация отсутствовала бы ... Нахрена мне это перечитывать, если я с этим давно знаком?

Причем тут разрешение SVG если говорилось о разрешении документа и разрешении изображения вставляемого в него? Он принимает такое разрешение при импортировании в него изображения, откройте в конце концов программу, да ознакомтесь, к чему эти лишние вопросы.

Вы ее не знаете, к чему тогда разговор.

Тот же самый. Вот меня и интересует откуда он могу считать иное разрешение изображения, чем я вижу и в свойствах, и в редакторах, слово есть еще какой-то подпольный EXIF, о котором только он и знает.

Покажи файлик!

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

Вот результат, который вы можете с любой картинкой наблюдать у себя:

верхнее, это то что покажет любой графический редактор, и это же самое получится если пересчитывать - пиксели в сантиметры. А вот Inkscape раст в сантиметры пересчитает по своему, отсюда и не совпадения.

Если открыть изображение (Сtrl+O), то перед его открытием всплывает диалоговое окно в котором спрашивается, с каким разрешением вы хотите его открыть? Очевидно вы даже не прочитав, что там написано, нажали OK!

Так вот, там 2 варианта, где Image DPI...

• From File, выберите, если нужно как в файле
• Default import resolution, выберите если нужно разрешение, указанное в Preferences.

В диалоговом окне Preferences (Shift+Ctrl+P) выберите слева раздел Bitmaps и укажите Default import resolution: 96 dpi. Также проверьте, стоит ли у вас галочка рядом с Ask about linking and scaling when importing, если нужно.

Пипец какой-то. Я настолько дурной, что не понимаю что такое взять из файла, а почему жмахаю. Шел бы ты .... словоблуд.

Malleys, вы слишком самовлюбленный.

Я не понимаю, причём тут мои личные качества. У вас получилось применить настройки в Preferences (Shift+Ctrl+P), и получить нужный результат?

Я, кстати проверил на картинке 1280×1024@96dpi, размеры в сантиметрах получились, как у вас в верхней части присланного вами картинного соединения!

Я для чего картинки показывал, для чего несколько раз говорил, что почему он гребет не то, что надо, хотя УКАЗЫВАЛОСЬ ЧИТАТЬ ИЗ ...? Ну что за детство.

Есть какая-то причина же, у меня последняя версия, есть и старые, одну из них установил и попробовал, та же беда - в сантиметрах считает не правильно. А значит и линейки не то показывают и т.п. То-ли лично для меня сборки дубовые "подсовывают" (шутка), то-ли что-то есть в системе у меня, что приводит к такой лаже.

В общем это у тех кто на ней собаку съел спрашивать надо, вдруг что и выяснится.

У меня есть предположение, что причиной является грязь некогда оставленная или при некорректном удалении оставшаяся от старой версии, которая как раз и была с эти багом. Значит нужно чистить реестр, а если проги не помогу, значит руками искать и вырезать. Другого объяснения я пока не вижу.

laimas,
может в дисплей системы стоит масштабирование и это влияет, если попробовать отключить?

Какое масштабирование, DPI отличное от 96? Это на ЭЛТ мониторах можно было комфортно работать с разными размерами экрана и увеличение DPI не такую ужасную картину давала. А на матричных хорошее качество только на его макс. размерах. И это же в система переключать надо, у монитора нет никакого масштабирования. А программа считывает данные из документа.

Вообще исходники будут с разрешением 300 dpi, размеры приличные, вести на таких отладку нет смысла, вот почему и появилось - узнать DPI системы, считать от нее ... Тут и всплыла эта хрень, откуда не понятно лишний чуток dpi появился.

на всякий случай

Размеры все-таки. ) Нет конечно, ваш 1366х768 или мой 1920х1080 переключить ниже, у вас то хоть первое ближайшее на 6рх по ширине отличается, а у меня сразу 1680х1050, то это капец будет, за таким монитором разме можно работать. )

не про разрешение,
картинка только про закладку, если масштабирование есть, будет ссылка на сброс на этой вкладке.
тогда может попробовать сделать сброс и после запустить программу.

Я что-то не могу уловить суть сказанного. )

laimas,
поправил пост выше.

Специально ради тебя, laimas, скачал на Windows 7 программу Inkscape 0.92.4 с официального сайта (32-bit, exe-установщик)

Я и картинку отрывал, и сначала создавал документ, а потом импортировал в него картинку, и из файла брал dpi и то, что в Inkscape по умолчанию (96 dpi)... Так вот, размеры устанавливаются именно такие, какие они должны быть!

А то, что ты писал про размеры и показывал, получается только тогда, когда в настройках импорта по умолчанию поменять на 90 dpi, вот именно тогда и получаются те размеры в сантиметрах, которые вы прислали!

В лицензионном Windows 7 установленный с официального сайта Inkscape работает отлично.

Может тебе стоит в настройках (Shift+Ctrl+P) в разделе «Растр» поменять всё сначала на 90 dpi, посмотреть как импортирует, а потом на 96 dpi?

рони, вообще у меня семерка и видео карта NVIDIA, параметры рабочего стола задаются ее приблудой со множеством всяких настроек. 1920х1080 -> 1680x1050 -> ... это размеры, а масштаб это как раз изменение DPI. В NVIDIA есть возможность растягивать рабочий стол, как он называет, по картинке или во весь экран.

Я вообще не вижу смысла в этих переключениях ибо на матричном это ужас, может кому-то это и нужно, не знаю, я никогда не пользуюсь, так что нет.

Освобожусь, буду реестр терзать, где-то в нем проблема, уже не предполагаю, а уверен в этом. )

Malleys, ну что вы меня за дурачка считаете, ну неужели бы я с дури запихал в нее что-то, указав при этом ей непотребное, а требовал с нее чего хочу? :)

Я думаю, у тебя всё работает. Я никакие диагнозы про твою личность не ставлю, однако ты успел уже много раз меня обосрать... это при моих попытках помочь и не замечать все оскорбления со твоей стороны! Я не ожидаю никаких возгласов радости от того, что у тебя что-то получилось! От тебя исходит только один негатив.

Ты вообще не понял смысл того, что я тебе написал! И думаю даже не хотел! Тебе это не надо! Тебе нужно было просто постучать по клавишам, может потроллить, может поэльфить... Определённо ты хотел что-то другое!

рони, кстати, при всех изменениях стола рабочего все будет пересчитано под его физические параметры. Но допустим невообразимое, как то так получилось, но тогда в других программах наблюдалось бы тоже самое, в том же Photoshop.

Или, мне по мере продвижения этой работы требуется добавление иконок для интерфейса, коих нет в Awesome том же. Я их готовлю в Fontforge, а это тоже вектор, и в нем так же можно импортировать раст, на базе которого готовить символ шрифта. Устанавливаю все параметры глифа, затем готовлю svg шрифт, а полный пакет в Fontello. Проблем никаких не наблюдается, и при этом я же не меняю параметры среды рабочей - нужную прогу открыл, сделал, закрыл, перешел к другой ...

laimas,
у меня стоит масштабирование, иногда это искажает работу скриптов с размерами, даже здесь на форуме.

Я такими экспериментами не занимаюсь, есть в браузере -+, если надо, этого достаточно, но мне и этого не надо, я себя без штанов чувствую когда шрифт лошадиный. :)

laimas, может уже хватит людям голову морочить?

Давай уже делай своё самое громкое политическое заявление, и тему можно сворачивать!

Масштабирование в браузере или в ОС? Или оба сразу?

только в системе

рони, все-таки это в реестре и было дело, правда какая именно грязюка на это влияла выяснить не удалось. Удалил программу, в закрытых папках юзера бывает и не удаляют деинсталляторы свои папки/файлы, но там ничего крамольного чтобы влияло не остается. В реестре после деинсталляции поиск по имени программы тоже выдает типа путей откуда была инсталляция и прочего несущественного, а вот библиотек от производителя не обнаружено. Но после очистки реестра от потерянных библиотек и новой инсталляции программы все теперь нормально.

Ну и пришлось немного с svg помудрить. :) Я считаю, как и нормальные люди, началом отсчета верхний левый угол, давно забыв о том, что в Corel Draw по умолчанию начало координат в левом нижнем углу (декартова система). Эта же точка отсчета и в Inkscape.

Приготовил я несколько примеров, пересчитал координаты для SVG масок и иконок, тоже самое сделал из уже имеющихся координат выделений, которые были приготовлены в Corel Draw. И началась пляска. :) Мои выделения исчезли вообще, а те что из Corel Draw поменялись местами. Оказывается, мало пересчитать координату от низа, нужно еще и учесть размер документа по умолчанию, а это формат A4 портретной ориентации - 297 мм. От этого размера нужно вычитать высоту изготавливаемого SVG и на эту высоту добавлять группе сдвиг вниз: <g transform="0 -(297 - высота SVG)">, а координата Y элементов группы: <rect y="297 - (высота выделения + Y координата выделения)" ...

Какое число, в смысле была установка для программы как 90dpi сохраненная в реестре? Нет конечно, если бы так просто все было, что же мешало изменить установку. И я же русским языком написал - не осталось в реестре ссылки не на программу, ни на ее производителя, как и не удалось по этим именам найти библиотеку после деинсталляции. Следовательно, эта зараза от какой-то из глючных ранее у меня установленных осталась, которая либо подцеплялась, либо мешала.

Это то тут причем? Конечное производство, это работа с растром, какие нахрен могут быть координаты от нижнего левого?

Вот только не надо включать дурочку, договорились, а то вас как начинает распирать красноречие, такую ахинею несете, что просто жуть. ;)

Причём тогда другие люди? Зачем им приписывать мышление, основанное на «Я считаю, как и нормальные люди, началом отсчета верхний левый угол». Я не думаю, что увидев на графике рост, вы будете это мысленно переворачивать и думать, что это понижение. Или когда вы говорите, что «цены повышаются», вы имеете в виду, что они понижаются?

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

Удивительное мышление у тебя, laimas, но только что-то твоя идея не работает...

Object.assign(malleys, { mode: "дурочку" });

Uncaught TypeError: Failed to assign 'mode' on 'malleys': The provided value 'дурочку' is not a valid enum value of type PersonMode.

Malleys, слушайте, Чебышев вы наш, ну прямо осталось преклониться пред вами. Куда уж мне с арифметикой, окромя вас и вашими познаниями в математике никто и не в силах справится с прямоугольниками. Достал ты уже своей дурью донельзя.