Эдуард Неткачёв
Эдуард Неткачёв24 марта 2022 г. 14:29

Выделение нескольких объектов

QML, выделение нескольких элементов мышкой

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

Вот кусок основной программы main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible:    true
    title:      qsTr("Selection and Scaling")
    width:      Screen.desktopAvailableWidth*50/100
    height:     Screen.desktopAvailableHeight*80/100
    color:      "whitesmoke"

    property double my_scale: 1.0

    Flickable {
        id:             _scrollSetup
        anchors.fill:   parent
        boundsMovement: Flickable.StopAtBounds    // если контент больше видимой области, то при перемещении контента он останавливается на границе контента с видимой областью
        contentWidth:   _сolumn.width*my_scale >parent.width ? (_сolumn.width*my_scale):parent.width
        contentHeight:  _сolumn.height*my_scale >parent.height ? (_сolumn.height*my_scale):parent.height
        MouseArea {
            id: _mouseFlickable
            anchors.fill: parent
            property point clickPos: "0,0"
            onWheel:    if (wheel.angleDelta.y>0) { my_scale*=1.05; } else { my_scale*=0.95; } // реакция на скролл
            onClicked:  console.log("_mouseFlickable.onClicked");
            onPressed:  { console.log("_mouseFlickable.onPressed");
                clickPos  = Qt.point(mouse.x,mouse.y)
                _rect_select.x=clickPos.x; _rect_select.y=clickPos.y;
                _rect_select.width=0; _rect_select.height=0;
                _rect_select.visible=true;
            }
            onReleased: { console.log("_mouseFlickable.onReleased");
                _rect_select.visible=false;
            }
            onEntered:  console.log("_mouseFlickable.onEntered");
            onExited:   console.log("_mouseFlickable.onExited");
            onPositionChanged: {
                _rect_select.x=Math.min(mouse.x,clickPos.x)
                _rect_select.y=Math.min(mouse.y,clickPos.y)
                _rect_select.width=Math.abs(clickPos.x-mouse.x)
                _rect_select.height=Math.abs(clickPos.y-mouse.y)
            }
            Column {
                id: _сolumn
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                scale: my_scale

                Row {
                    id: _rowUpper
                    MyElement {
                        id: element_1
                        number: 1
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_2
                        number: 2
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_3
                        number: 3
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_4
                        number: 4
                        height: 160
                        width:  160
                    }
                }
                Rectangle {
                    anchors.horizontalCenter:   parent.horizontalCenter
                    height:                     4
                    color:                      "lightsteelblue"
                    width:                      parent.width
                }
                Row {
                    id: _rowLower
                    MyElement {
                        id: element_5
                        number: 5
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_6
                        number: 6
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_7
                        number: 7
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_8
                        number: 8
                        height: 160
                        width:  160
                    }
                }
            }
        }
    }

    Rectangle {
        id: _rect_select
        visible: false
        color: "blue"
        opacity : 0.3
    }
}

Вот код элемента MyElement.qml:

import QtQuick 2.0

Item {
    property int number: 0
    property bool select: false

    MouseArea {
        id: _mouseArea
        anchors.fill: parent
        hoverEnabled: true      // это для работы функции containsMouse (наведение курсора мыши на область)
        propagateComposedEvents: true
        onClicked: { console.log("_mouse_" + number + ".onClicked");    mouse.accepted = false; }
        onPressed: { console.log("_mouse_" + number + ".onPressed");    mouse.accepted = false; }
        onReleased:{ console.log("_mouse_" + number + ".onReleased");   mouse.accepted = false; }
        onEntered: { console.log("_mouse_" + number + ".onEntered");  }
        onExited:  { console.log("_mouse_" + number + ".onExited");   }

        Rectangle {
            id: _rect
            anchors.fill: parent
            color:  "green"
            scale:  select ? 1.0 : _mouseArea.containsMouse ? 0.95 : 0.90
        }
    }
}

Может есть мысли как это сделать.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

1
P
  • 27 марта 2022 г. 15:29
  • Ответ был помечен как решение.

Как вариант, считать пересечение объектов с прямоугольником выделения,
примерный код набрасал:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible:    true
    title:      qsTr("Selection and Scaling")
    width:      Screen.desktopAvailableWidth*50/100
    height:     Screen.desktopAvailableHeight*80/100
    color:      "whitesmoke"

    property double my_scale: 1.0

    Flickable {
        id:             _scrollSetup
        anchors.fill:   parent
        boundsMovement: Flickable.StopAtBounds    // если контент больше видимой области, то при перемещении контента он останавливается на границе контента с видимой областью
        contentWidth:   _сolumn.width*my_scale >parent.width ? (_сolumn.width*my_scale):parent.width
        contentHeight:  _сolumn.height*my_scale >parent.height ? (_сolumn.height*my_scale):parent.height
        MouseArea {
            id: _mouseFlickable
            anchors.fill: parent
            property point clickPos: "0,0"
            onWheel:    if (wheel.angleDelta.y>0) { my_scale*=1.05; } else { my_scale*=0.95; } // реакция на скролл
            onClicked:  console.log("_mouseFlickable.onClicked");
            onPressed:  { console.log("_mouseFlickable.onPressed");
                clickPos  = Qt.point(mouse.x,mouse.y)
                _rect_select.x=clickPos.x; _rect_select.y=clickPos.y;
                _rect_select.width=0; _rect_select.height=0;
                _rect_select.visible=true;
            }
            onReleased: { console.log("_mouseFlickable.onReleased");
                _rect_select.visible=false;
            }
            onEntered:  console.log("_mouseFlickable.onEntered");
            onExited:   console.log("_mouseFlickable.onExited");
            onPositionChanged: {
                _rect_select.x=Math.min(mouse.x,clickPos.x)
                _rect_select.y=Math.min(mouse.y,clickPos.y)
                _rect_select.width=Math.abs(clickPos.x-mouse.x)
                _rect_select.height=Math.abs(clickPos.y-mouse.y)
            }
            Column {
                id: _сolumn
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                scale: my_scale

                Row {
                    id: _rowUpper
                    MyElement {
                        id: element_1
                        selectionRectangle: _rect_select
                        number: 1
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_2
                        selectionRectangle: _rect_select
                        number: 2
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_3
                        selectionRectangle: _rect_select
                        number: 3
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_4
                        selectionRectangle: _rect_select
                        number: 4
                        height: 160
                        width:  160
                    }
                }
                Rectangle {
                    anchors.horizontalCenter:   parent.horizontalCenter
                    height:                     4
                    color:                      "lightsteelblue"
                    width:                      parent.width
                }
                Row {
                    id: _rowLower
                    MyElement {
                        id: element_5
                        selectionRectangle: _rect_select
                        number: 5
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_6
                        selectionRectangle: _rect_select
                        number: 6
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_7
                        selectionRectangle: _rect_select
                        number: 7
                        height: 160
                        width:  160
                    }
                    MyElement {
                        id: element_8
                        selectionRectangle: _rect_select
                        number: 8
                        height: 160
                        width:  160
                    }
                }
            }
        }
    }

    Rectangle {
        id: _rect_select
        visible: false
        color: "blue"
        opacity : 0.3
    }
}

import QtQuick 2.0

Item {
    id: _item
    property int number: 0
    property bool select: false
    property QtObject selectionRectangle

    MouseArea {
        id: _mouseArea
        anchors.fill: parent
        hoverEnabled: true      // это для работы функции containsMouse (наведение курсора мыши на область)
        propagateComposedEvents: true
        onClicked: { console.log("_mouse_" + number + ".onClicked");    mouse.accepted = false; }
        onPressed: { console.log("_mouse_" + number + ".onPressed");    mouse.accepted = false; }
        onReleased:{ console.log("_mouse_" + number + ".onReleased");   mouse.accepted = false; }
        onEntered: { console.log("_mouse_" + number + ".onEntered");  }
        onExited:  { console.log("_mouse_" + number + ".onExited");   }

        Rectangle {
            id: _rect
            anchors.fill: parent
            color:  "green"
            scale:  select ? 1.0 : _mouseArea.containsMouse ? 0.95 : 0.90

        }
    }

    Connections {
        target: selectionRectangle
        function onHeightChanged() {
            intersect(_rect, selectionRectangle)
        }
    }

    Connections {
        target: selectionRectangle
        function onWidthChanged() {
            intersect(_rect, selectionRectangle)
        }
    }


    function intersect(rect1, rect2) {
        var r1 = rect1.mapToItem(null, 0, 0, rect1.width, rect1.height)
        var r2 = rect2.mapToItem(null, 0, 0, rect2.width, rect2.height)

        var xOverlap = Math.min(r1.x + r1.width, r2.x + r2.width) - Math.max(r1.x, r2.x);
        var yOverlap = Math.min(r1.y + r1.height, r2.y + r2.height) - Math.max(r1.y, r2.y);

        if (xOverlap >= 0 && yOverlap >= 0) {
            _item.select = true
        } else {
            _item.select = false
        }
    }

}

    Комментарии

    Только авторизованные пользователи могут публиковать комментарии.
    Пожалуйста, авторизуйтесь или зарегистрируйтесь
    AD

    C++ - Тест 004. Указатели, Массивы и Циклы

    • Результат:50баллов,
    • Очки рейтинга-4
    m
    • molni99
    • 26 октября 2024 г. 1:37

    C++ - Тест 004. Указатели, Массивы и Циклы

    • Результат:80баллов,
    • Очки рейтинга4
    m
    • molni99
    • 26 октября 2024 г. 1:29

    C++ - Тест 004. Указатели, Массивы и Циклы

    • Результат:20баллов,
    • Очки рейтинга-10
    Последние комментарии
    ИМ
    Игорь Максимов22 ноября 2024 г. 11:51
    Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
    Evgenii Legotckoi
    Evgenii Legotckoi31 октября 2024 г. 14:37
    Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
    A
    ALO1ZE19 октября 2024 г. 8:19
    Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
    ИМ
    Игорь Максимов5 октября 2024 г. 7:51
    Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
    d
    dblas55 июля 2024 г. 11:02
    QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
    Сейчас обсуждают на форуме
    Evgenii Legotckoi
    Evgenii Legotckoi24 июня 2024 г. 15:11
    добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
    t
    tonypeachey115 ноября 2024 г. 6:04
    google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
    NSProject
    NSProject4 июня 2022 г. 3:49
    Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
    9
    9Anonim25 октября 2024 г. 9:10
    Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

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