Эдуард Неткачёв
Эдуард НеткачёвНаурыз 24, 2022, 2: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, 3: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
        }
    }

}

    Пікірлер

    Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
    Кіріңіз немесе Тіркеліңіз
    OI
    • Ora Iro
    • Жел. 24, 2024, 6:38 Т.Ж.

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

    • Нәтиже:40ұпай,
    • Бағалау ұпайлары-8
    AD

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

    • Нәтиже:50ұпай,
    • Бағалау ұпайлары-4
    m
    • molni99
    • Қаз. 26, 2024, 1:37 Т.Ж.

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

    • Нәтиже:80ұпай,
    • Бағалау ұпайлары4
    Соңғы пікірлер
    ИМ
    Игорь МаксимовҚар. 22, 2024, 11:51 Т.Ж.
    Django - Оқулық 017. Теңшелген Django кіру беті Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
    Evgenii Legotckoi
    Evgenii LegotckoiҚаз. 31, 2024, 2:37 Т.Қ.
    Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
    A
    ALO1ZEҚаз. 19, 2024, 8:19 Т.Ж.
    Qt Creator көмегімен fb3 файл оқу құралы Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
    ИМ
    Игорь МаксимовҚаз. 5, 2024, 7:51 Т.Ж.
    Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
    d
    dblas5Шілде 5, 2024, 11:02 Т.Ж.
    QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
    Енді форумда талқылаңыз
    Evgenii Legotckoi
    Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
    добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
    t
    tonypeachey1Қар. 15, 2024, 6:04 Т.Ж.
    google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
    NSProject
    NSProjectМаусым 4, 2022, 3:49 Т.Ж.
    Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
    9
    9AnonimҚаз. 25, 2024, 9:10 Т.Ж.
    Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

    Бізді әлеуметтік желілерде бақылаңыз