BlinCTЖел. 18, 2023, 4:10 Т.Қ.
Растягивать Image на парент по высоте
Всем привет.
Такой вопрос, есть Rectangle в котором я открываю Image в qml, и пытаюсь найти как правильно растянуть картинку не теряя пропорций по высоте.
Посоветуйте как это правильно сделать к ниже приведенному коду.
Заранее спасибо.
Rectangle { id: parentImage anchors.fill: parent color: "#5a5a5a" Image { id: image fillMode: Image.PreserveAspectFit source: "file:///../name.jpg" anchors.centerIn: parent } }
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!
Пікірлер
m
- molni99
- Қаз. 26, 2024, 1:37 Т.Ж.
C++ - Тест 004. Указатели, Массивы и Циклы
- Нәтиже:80ұпай,
- Бағалау ұпайлары4
m
- molni99
- Қаз. 26, 2024, 1:29 Т.Ж.
C++ - Тест 004. Указатели, Массивы и Циклы
- Нәтиже:20ұпай,
- Бағалау ұпайлары-10
FФ
- FONLY- ФОНЛИ
- Қаз. 25, 2024, 10:04 Т.Ж.
C++ - Тест 003. Условия и циклы
- Нәтиже:42ұпай,
- Бағалау ұпайлары-8
Соңғы пікірлер
Evgenii LegotckoiҚаз. 31, 2024, 2:37 Т.Қ.
Qt Creator көмегімен fb3 файл оқу құралы Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
Игорь МаксимовҚаз. 5, 2024, 7:51 Т.Ж.
QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Qt Linux - Сабақ 001. Linux астында Autorun Qt қолданбасы как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Енді форумда талқылаңыз
IscanderCheҚаз. 31, 2024, 3:43 Т.Қ.
Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
ИМ
Реализация навигации по разделам Спасибо Евгений!
Игорь МаксимовҚаз. 3, 2024, 4:05 Т.Ж.
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …
Для растягивания изображения по высоте родительского Rectangle в QML, сохраняя пропорции, вы можете использовать fillMode: Image.PreserveAspectFit. Это правильный подход, но важно также правильно установить якоря (anchors) для Image, чтобы оно масштабировалось в соответствии с размером Rectangle.
В вашем случае, вы уже правильно установили anchors.centerIn: parent, что означает, что изображение будет центрировано внутри Rectangle. Однако, чтобы заставить изображение растягиваться по высоте Rectangle, вам нужно изменить якоря для Image.
Вот пример кода, который демонстрирует, как это можно сделать:
В этом примере Image имеет якоря top и bottom, установленные в соответствии с верхней и нижней границами Rectangle. Это заставляет изображение растягиваться по высоте Rectangle, сохраняя при этом пропорции изображения благодаря fillMode: Image.PreserveAspectFit. Якорь horizontalCenter используется для центрирования изображения по горизонтали.
Спасибо за ответ.
я правильно понимаю что если я буду поворачивать изображение на 90 градусов то оно так же будет прапорционально помещено в парент?
И еще, поворачивать а точнее делать ротацию изображерия я должен сам обьект image или все таки парент?
Ещё раз спасибо.
Если вы планируете поворачивать изображение на 90 градусов внутри Rectangle, вам следует учитывать несколько моментов:
Вот пример кода, который демонстрирует поворот только изображения на 90 градусов:
При таком подходе Image будет повёрнуто на 90 градусов, и его пропорции будут сохраняться в соответствии с новым положением в Rectangle.
Попробовал я ваше решение, при открытии изображения расположение было правильным. Но когда я сделал ротацию на 90 градусов то сверху и снизу были обрезаны края, те что у документа были левой и првой строными.
Фактически код у меня выглядит так
И еще вопрос есть связанный с зумом, вижу что вы понимаете как с изображением работать.
Вот смотрите, у меня есть вектор со значениями для зума, абсолютные числа(25, 50, 75, 200, 300). Так же есть две функции что мне надо применять к изображению, fitToWidth и fitToHeight. Первая должна растянуть по ширине картинки, и если картинка высокая то у нас будет скрол для прокрутки вниз и вверх.
А если вторая то возвращаем в дефолтное расположение как при открытии.
Теперь мы применили зус на 75, то есть приблизили. Теперь мы использовали fitToWidth и растянули а после использовали зум на 200.
Что произойдет? Мы же по логике как бы с 75 перешли на 200 дял зума? Если я прав то надо хранить дефолтный зум и текущий зум чтоыб знать куда переходить?
Извиняюсь за длинный вопрос. Хотел обьяснить так чтоыб понятно было.
Вектор зума : У вас есть предопределенные значения зума, например, 25, 50, 75, 200, 300. Эти числа указывают на масштаб, в котором будет показано изображение. Так, зум в 75% означает, что изображение будет увеличено до 75% от его исходного размера.
Функции fitToWidth и fitToHeight :
fitToHeight возвращает изображение в исходное состояние, как при его первоначальном открытии.
Применение зума и масштабирование :
Важно отметить, что fitToWidth и зум — это разные вещи. fitToWidth изменяет масштаб изображения для соответствия ширине контейнера, но не обязательно влияет на уровень зума.
Хранение уровня зума :
Если после зума 75% вы применяете fitToWidth, а затем меняете зум на 200%, изображение должно увеличиться до 200% относительно его первоначального размера. Предполагается, что fitToWidth сам по себе не меняет уровень зума, а лишь подгоняет ширину изображения под размер контейнера.
Моя рекомендация : Я бы предложила вам разработать систему, которая будет отслеживать текущий уровень зума независимо от операций масштабирования, таких как fitToWidth и fitToHeight. Это позволит вам всегда быть в курсе текущего уровня зума и правильно применять изменения масштаба.
В QML это можно реализовать с помощью создания свойств и привязок, которые будут обновляться в зависимости от действий пользователя.
Похоже, что проблема возникает из-за того, как вы располагаете и поворачиваете Image внутри Rectangle. Когда вы поворачиваете изображение на 90 градусов, его ширина и высота меняются местами, что может привести к обрезанию изображения, если размеры родительского Rectangle не соответствуют новым пропорциям изображения.
Чтобы решить эту проблему, вы можете применить следующие изменения:
Центрирование изображения : После поворота на 90 градусов вам, возможно, придется изменить способ якорения изображения, чтобы обеспечить его правильное центрирование.
Изменение якорей : Вы можете попробовать использовать anchors.fill: parent для Image, что должно автоматически масштабировать изображение так, чтобы оно полностью заполняло Rectangle. В этом случае, вам, возможно, придется отказаться от PreserveAspectFit, чтобы избежать обрезания.
Управление масштабированием : Вместо прямого использования rotation и fillMode, вы можете рассмотреть вариант управления масштабированием и поворотом программно, основываясь на размерах изображения и Rectangle.
Вот пример кода с измененными якорями:
Учтите, что такие изменения могут потребовать дополнительных настроек, чтобы изображение корректно отображалось во всех сценариях. Возможно, вам придется программно управлять поворотом и масштабированием, особенно если размеры Rectangle и изображения сильно различаются.
В общем я решил избавится от лишнего парента для Image, и оставил так как вы написали мне первый пример, то есть главный rectangle и в нем image.
Вот так выглядит расположение при открытии изображение, оставил границы для Image специально.
Screenshot_2023-12-27_130753.png
А вот что получается если я поворачиваю.
Не понимаю почему так поулчается ведь я верхней и нижней границу даю точное расположение. Так же я пока оставил anchors.horizontalCenter: parent.horizontalCenter так как дефолтно расположенеи правильное(изображение не растягивается а правильно расширяется в высоту и ширину).
Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так
Но я все таки не пойму как же с этой ротацией работать...
И мне из логики прилетает при изменении значение зума которое должно быть в данный момент у изображения.