#image #canvas #position #stretch #winui-3
#изображение #холст #позиция #протяжение #винуи-3
Вопрос:
Новинка в WinUI 3.0 — я создаю настольное приложение. В главном окне есть сетка:
lt;Grid Name="mainGrid" RowDefinitions="40,*" ColumnDefinitions="100,*"gt; Я использую строку 0 для строки меню и столбец 0 для вертикальной панели стека, содержащей кнопки. Наиболее важной частью сетки является ячейка в строке 1 столбца 1. В этой ячейке мне нужно показать изображение (из URI файла). Мне нужно, чтобы размер изображения менялся при изменении размера окна. Мой XAML для изображения таков:
lt;Image Name="myImage" Source="C:UsersleighOneDriveDocumentsUsa.jpg" Stretch="Uniform" Grid.Row="1" Grid.Column="1"gt; lt;/Imagegt; Пока все хорошо-когда я изменяю размер окна во время выполнения, изображение сохраняет свои первоначальные пропорции при изменении размера окна. Теперь самое трудное…
В коде мне нужно добавить различные фигуры к изображению в определенных положениях. Например, мне нужно добавить эллипс, чтобы он отображался, скажем, на 25% вниз от верхней части изображения и на 65% справа от левой части изображения. Чтобы представить себе это, представьте себе изображение карты Соединенных Штатов. Я хочу разместить эллипс прямо над Чикаго. Когда пользователь изменяет размер окна, эллипс все равно должен появляться над Чикаго, но, конечно, Чикаго теперь находится в другом абсолютном положении на экране компьютера из-за изменения размера.
Нужно ли мне использовать элемент Canvas, чтобы содержать элемент изображения, а затем добавить свой эллипс на холст в указанной позиции (я могу пересчитать абсолютные координаты холста в событии с измененным размером)? Я попытался обернуть элемент изображения в холст, но размер холста не изменяется при изменении размера окна. Означает ли это, что я должен (1) получить абсолютный размер файла изображения, (2) выяснить «математику растяжения», чтобы установить размер холста таким образом, чтобы изображение не искажалось, когда я добавляю его на холст, (3) определить новое абсолютное положение эллипса на холсте и т. Д. и т. Д.
Все это кажется безнадежно сложным. Я просто хочу показать карту США, нарисовать эллипс над Чикаго во время выполнения и сохранить эллипс над Чикаго при изменении размера окна (конечно, без искажения формы США).
Предложения?
Ответ №1:
В принципе, вы на правильном пути. Вам не нужно иметь холст, содержащий изображение. Вы можете поместить как изображение, так и холст в одну и ту же «ячейку»сетки. Установите горизонтальное и вертикальное выравнивание холста Stretch равным . Затем вы можете подключиться к измененному размеру изображения, и теперь вам нужно:
- Получите фактический размер изображения;
- Получите фактический размер холста и найдите область холста, где они пересекаются.
- Вычислите положение маркеров (эллипсов, чего угодно) относительно размера изображения и преобразуйте их в координаты холста.