BlinCT
BlinCT18 декабря 2023 г. 16:10

Растягивать Image на парент по высоте

qml

Всем привет.
Такой вопрос, есть 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
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

9
EVA
  • 26 декабря 2023 г. 4:12

Для растягивания изображения по высоте родительского Rectangle в QML, сохраняя пропорции, вы можете использовать fillMode: Image.PreserveAspectFit. Это правильный подход, но важно также правильно установить якоря (anchors) для Image, чтобы оно масштабировалось в соответствии с размером Rectangle.

В вашем случае, вы уже правильно установили anchors.centerIn: parent, что означает, что изображение будет центрировано внутри Rectangle. Однако, чтобы заставить изображение растягиваться по высоте Rectangle, вам нужно изменить якоря для Image.

Вот пример кода, который демонстрирует, как это можно сделать:

Rectangle
{
    id: parentImage

    anchors.fill: parent
    color: "#5a5a5a"

    Image
    {
        id: image

        fillMode: Image.PreserveAspectFit
        source: "file:///../name.jpg"

        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

В этом примере Image имеет якоря top и bottom, установленные в соответствии с верхней и нижней границами Rectangle. Это заставляет изображение растягиваться по высоте Rectangle, сохраняя при этом пропорции изображения благодаря fillMode: Image.PreserveAspectFit. Якорь horizontalCenter используется для центрирования изображения по горизонтали.

    BlinCT
    • 26 декабря 2023 г. 9:18

    Спасибо за ответ.
    я правильно понимаю что если я буду поворачивать изображение на 90 градусов то оно так же будет прапорционально помещено в парент?
    И еще, поворачивать а точнее делать ротацию изображерия я должен сам обьект image или все таки парент?
    Ещё раз спасибо.

      EVA
      • 26 декабря 2023 г. 11:45

      Если вы планируете поворачивать изображение на 90 градусов внутри Rectangle, вам следует учитывать несколько моментов:

      1. Сохранение пропорций: Когда вы поворачиваете изображение на 90 градусов, его ширина и высота меняются местами. Если Rectangle имеет разные размеры по ширине и высоте, и вы используете fillMode: Image.PreserveAspectFit, изображение по-прежнему будет масштабироваться, чтобы соответствовать новым ориентациям и сохранять пропорции. Это может привести к тому, что изображение будет меньше, чем Rectangle, в одном из направлений (ширина или высота), чтобы оно полностью поместилось внутри Rectangle.
      2. Объект для поворота: Поворот можно применить как к самому объекту Image, так и к Rectangle. Выбор зависит от желаемого эффекта:
        • Поворот Image: Если вы повернёте только Image, сам Rectangle останется на месте, а изображение внутри него повернётся. Это полезно, если вы хотите, чтобы только изображение повернулось, не затрагивая другие элементы внутри Rectangle.
        • Поворот Rectangle: Если вы повернёте весь Rectangle, то вместе с ним повернутся все содержащиеся в нём элементы, включая Image. Это может быть полезно, если вы хотите синхронно повернуть несколько элементов.

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

      Rectangle
      {
          id: parentImage
      
          anchors.fill: parent
          color: "#5a5a5a"
      
          Image
          {
              id: image
      
              fillMode: Image.PreserveAspectFit
              source: "file:///../name.jpg"
      
              anchors.top: parent.top
              anchors.bottom: parent.bottom
              anchors.horizontalCenter: parent.horizontalCenter
      
              rotation: 90  // Поворачиваем изображение на 90 градусов
          }
      }
      
      

      При таком подходе Image будет повёрнуто на 90 градусов, и его пропорции будут сохраняться в соответствии с новым положением в Rectangle.

        BlinCT
        • 26 декабря 2023 г. 15:06

        Попробовал я ваше решение, при открытии изображения расположение было правильным. Но когда я сделал ротацию на 90 градусов то сверху и снизу были обрезаны края, те что у документа были левой и првой строными.
        Фактически код у меня выглядит так

        Rectangle
        {
            id: root
        
            property int defaultScaleSize: 1
        
            Rectangle
            {
                id: parentImage
        
                anchors.fill: parent
                color: "#5a5a5a"
                clip: true
        
                Image
                {
                    id: imageJpg
        
                    fillMode: Image.PreserveAspectFit
                    source: "pathToFile"
        
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
        
                    Rectangle
                    {
                        anchors.fill: parent
                        border.color: "blue"
                        border.width: 1
                        color: "transparent"
                    }
        
                    antialiasing: true
                    rotation: 90
                }
            }
        }
        
          BlinCT
          • 26 декабря 2023 г. 15:28

          И еще вопрос есть связанный с зумом, вижу что вы понимаете как с изображением работать.
          Вот смотрите, у меня есть вектор со значениями для зума, абсолютные числа(25, 50, 75, 200, 300). Так же есть две функции что мне надо применять к изображению, fitToWidth и fitToHeight. Первая должна растянуть по ширине картинки, и если картинка высокая то у нас будет скрол для прокрутки вниз и вверх.
          А если вторая то возвращаем в дефолтное расположение как при открытии.
          Теперь мы применили зус на 75, то есть приблизили. Теперь мы использовали fitToWidth и растянули а после использовали зум на 200.
          Что произойдет? Мы же по логике как бы с 75 перешли на 200 дял зума? Если я прав то надо хранить дефолтный зум и текущий зум чтоыб знать куда переходить?
          Извиняюсь за длинный вопрос. Хотел обьяснить так чтоыб понятно было.

            EVA
            • 26 декабря 2023 г. 18:25
            1. Вектор зума : У вас есть предопределенные значения зума, например, 25, 50, 75, 200, 300. Эти числа указывают на масштаб, в котором будет показано изображение. Так, зум в 75% означает, что изображение будет увеличено до 75% от его исходного размера.

            2. Функции fitToWidth и fitToHeight :

            3. fitToWidth масштабирует изображение так, чтобы его ширина соответствовала ширине контейнера. Если изображение высокое, то появится вертикальная прокрутка.
            4. fitToHeight возвращает изображение в исходное состояние, как при его первоначальном открытии.

            5. Применение зума и масштабирование :

            6. Вы начинаете с зума в 75%, затем применяете fitToWidth и после изменяете зум на 200%.
            7. Важно отметить, что fitToWidth и зум — это разные вещи. fitToWidth изменяет масштаб изображения для соответствия ширине контейнера, но не обязательно влияет на уровень зума.

            8. Хранение уровня зума :

            9. Вам действительно стоит отслеживать текущий уровень зума, чтобы понимать, какой масштаб у изображения в данный момент.
            10. Если после зума 75% вы применяете fitToWidth, а затем меняете зум на 200%, изображение должно увеличиться до 200% относительно его первоначального размера. Предполагается, что fitToWidth сам по себе не меняет уровень зума, а лишь подгоняет ширину изображения под размер контейнера.

            11. Моя рекомендация : Я бы предложила вам разработать систему, которая будет отслеживать текущий уровень зума независимо от операций масштабирования, таких как fitToWidth и fitToHeight. Это позволит вам всегда быть в курсе текущего уровня зума и правильно применять изменения масштаба.

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

              EVA
              • 26 декабря 2023 г. 18:29

              Похоже, что проблема возникает из-за того, как вы располагаете и поворачиваете Image внутри Rectangle. Когда вы поворачиваете изображение на 90 градусов, его ширина и высота меняются местами, что может привести к обрезанию изображения, если размеры родительского Rectangle не соответствуют новым пропорциям изображения.

              Чтобы решить эту проблему, вы можете применить следующие изменения:

              1. Центрирование изображения : После поворота на 90 градусов вам, возможно, придется изменить способ якорения изображения, чтобы обеспечить его правильное центрирование.

              2. Изменение якорей : Вы можете попробовать использовать anchors.fill: parent для Image, что должно автоматически масштабировать изображение так, чтобы оно полностью заполняло Rectangle. В этом случае, вам, возможно, придется отказаться от PreserveAspectFit, чтобы избежать обрезания.

              3. Управление масштабированием : Вместо прямого использования rotation и fillMode, вы можете рассмотреть вариант управления масштабированием и поворотом программно, основываясь на размерах изображения и Rectangle.

              Вот пример кода с измененными якорями:

              Rectangle
              {
                  id: root
              
                  property int defaultScaleSize: 1
              
                  Rectangle
                  {
                      id: parentImage
              
                      anchors.fill: parent
                      color: "#5a5a5a"
                      clip: true
              
                      Image
                      {
                          id: imageJpg
              
                          fillMode: Image.PreserveAspectFit // Вы можете изменить это на Image.Stretch, если хотите избежать обрезания
                          source: "pathToFile"
              
                          anchors.fill: parent // Изменено для заполнения всего родительского элемента
              
                          Rectangle
                          {
                              anchors.fill: parent
                              border.color: "blue"
                              border.width: 1
                              color: "transparent"
                          }
              
                          antialiasing: true
                          rotation: 90 // Поворот на 90 градусов
                      }
                  }
              }
              

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

                BlinCT
                • 27 декабря 2023 г. 7:19

                В общем я решил избавится от лишнего парента для Image, и оставил так как вы написали мне первый пример, то есть главный rectangle и в нем image.
                Вот так выглядит расположение при открытии изображение, оставил границы для Image специально.
                Screenshot_2023-12-27_130753.png Screenshot_2023-12-27_130753.png
                А вот что получается если я поворачиваю.

                Не понимаю почему так поулчается ведь я верхней и нижней границу даю точное расположение. Так же я пока оставил anchors.horizontalCenter: parent.horizontalCenter так как дефолтно расположенеи правильное(изображение не растягивается а правильно расширяется в высоту и ширину).

                  BlinCT
                  • 27 декабря 2023 г. 8:57

                  Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так

                  Flickable
                  {
                      id: root
                  
                      anchors.fill: parent
                      clip: true
                  
                      property url linkFile
                      property CC2gimgv_ImageViewerProperties pelData
                  
                      property int defaultScaleSize: 1
                  
                      ScrollBar.vertical: ScrollBar
                      {
                          policy: ScrollBar.AsNeeded
                      }
                  
                  
                      Rectangle
                      {
                          id: parentImage
                  
                          anchors.fill: parent
                          color: "#5a5a5a"
                          clip: true
                          border.color: "red"
                          border.width: 1
                  
                          Image
                          {
                              id: imageJpg
                  
                              fillMode: Image.PreserveAspectFit
                  
                              source: "pathToFile"
                  
                              anchors.top: parent.top
                              anchors.bottom: parent.bottom
                              anchors.horizontalCenter: parent.horizontalCenter
                  
                              Rectangle
                              {
                                  anchors.fill: parent
                                  border.color: "blue"
                                  border.width: 1
                                  color: "transparent"
                              }
                  
                              antialiasing: true
                              rotation: "value from logical part"
                          }
                      }
                  }
                  

                  Но я все таки не пойму как же с этой ротацией работать...
                  И мне из логики прилетает при изменении значение зума которое должно быть в данный момент у изображения.

                    Комментарии

                    Только авторизованные пользователи могут публиковать комментарии.
                    Пожалуйста, авторизуйтесь или зарегистрируйтесь
                    e
                    • ehot
                    • 1 апреля 2024 г. 0:29

                    C++ - Тест 003. Условия и циклы

                    • Результат:78баллов,
                    • Очки рейтинга2
                    B

                    C++ - Тест 002. Константы

                    • Результат:16баллов,
                    • Очки рейтинга-10
                    B

                    C++ - Тест 001. Первая программа и типы данных

                    • Результат:46баллов,
                    • Очки рейтинга-6
                    Последние комментарии
                    k
                    kmssr9 февраля 2024 г. 5:43
                    Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                    АК
                    Анатолий Кононенко5 февраля 2024 г. 12:50
                    Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                    EVA
                    EVA25 декабря 2023 г. 21:30
                    Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                    J
                    JonnyJo25 декабря 2023 г. 19:38
                    Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                    G
                    Gvozdik19 декабря 2023 г. 8:01
                    Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                    Сейчас обсуждают на форуме
                    a
                    a_vlasov14 апреля 2024 г. 16:41
                    Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                    Павел Дорофеев
                    Павел Дорофеев14 апреля 2024 г. 12:35
                    QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
                    Mm
                    Mind mingles12 апреля 2024 г. 10:42
                    ASO Service Forum: Enhancing App Visibility and Reach Welcome to the ASO Service Forum, your ultimate destination for insights, discussions, and strategies revolving around App Store Optimization. ASO (App Store Optimization) is paramoun…
                    f
                    fastrex4 апреля 2024 г. 14:47
                    Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…
                    P
                    Pisych27 февраля 2023 г. 15:04
                    Как получить в массив значения из связанной модели? Спасибо, разобрался:))

                    Следите за нами в социальных сетях