update Drags

2025-01-31 21:22:58 +08:00 · 2020-10-21 11:50:22 +08:00 · 2020-10-21 11:50:22 +08:00 · 73961ef387
commit 73961ef387
parent 702e697d95
10 changed files with 300 additions and 1 deletions
--- a/examples/TaoQuickShow/Contents.qrc
+++ b/examples/TaoQuickShow/Contents.qrc
@ -5,5 +5,6 @@
        <file>Contents/Labels.qml</file>
        <file>Contents/DataEntrys.qml</file>
        <file>Contents/Miscs.qml</file>
+        <file>Contents/Drags.qml</file>
    </qresource>
 </RCC>
--- a/examples/TaoQuickShow/Contents/Drags.qml
+++ b/examples/TaoQuickShow/Contents/Drags.qml
@ -0,0 +1,51 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import TaoQuick 1.0
+
+Item {
+    anchors.fill: parent
+    Column {
+        anchors.centerIn: parent
+        spacing: 10
+        CusLabel {
+            text: qsTr("TemplateDragBorder can be use to resize, move or rotation Rectangle by draging corner or border handler") + trans.transString
+            wrapMode: Label.WordWrap
+            width: 400
+        }
+        Rectangle {
+            width: 600
+            height: 300
+            border.color: "lightblue"
+
+            Rectangle {
+                x: 30
+                y: 40
+                width: 200
+                height: 160
+                border.color: "red"
+                smooth: true
+                antialiasing: true
+                CusTemplateDragBorder {
+                    width: parent.width + borderMargin * 2
+                    height: parent.height + borderMargin * 2
+                    anchors.centerIn: parent
+                    visible: true
+                }
+            }
+        }
+        CusLabel {
+            text: qsTr("RectDraw, can draw rect by mouse press and move") + trans.transString
+            wrapMode: Label.WordWrap
+            width: 400
+        }
+        Rectangle {
+            width: 600
+            height: 300
+            border.color: "lightblue"
+
+            CusRectDraw {
+                anchors.fill: parent
+            }
+        }
+    }
+}
--- a/examples/TaoQuickShow/Qml/Pane/ContentModel.qml
+++ b/examples/TaoQuickShow/Qml/Pane/ContentModel.qml
@ -19,6 +19,11 @@ ListModel {
        name: "Data Entry"
        source: "DataEntrys.qml"
    }
+    ListElement {
+        name: "Drag Rect"
+        source: "Drags.qml"
+    }
+
    ListElement {
        name: "Misc"
        source: "Miscs.qml"
--- a/examples/TaoQuickShow/Trans/language_zh.json
+++ b/examples/TaoQuickShow/Trans/language_zh.json
@ -342,6 +342,18 @@
        {
            "key": "Sponsors",
            "value": "赞助"
+        },
+        {
+            "key": "RectDraw, can draw rect by mouse press and move",
+            "value": "RectDraw 可以通过鼠标按下和移动来画框"
+        },
+        {
+            "key": "Drag Rect",
+            "value": "拖动框"
+        },
+        {
+            "key": "TemplateDragBorder can be use to resize, move or rotation Rectangle by draging corner or border handler",
+            "value": "TemplateDragBorder 可通过操作器改变尺寸、坐标或旋转"
        }

    ]
--- a/src/TaoQuick/imports/TaoQuick/Images/rotate.png
+++ b/src/TaoQuick/imports/TaoQuick/Images/rotate.png
--- a/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusRectDraw.qml
+++ b/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusRectDraw.qml
@ -16,6 +16,7 @@ Item {
    signal doubleClicked(real mouseX, real mouseY)
    signal wheelEvent(real angle)
    property bool bPressed: false
+    property color rectBorderColor: "lightblue"
    MouseArea {
        id: drawArea
        anchors.fill: parent
@ -56,7 +57,7 @@ Item {
        y: Math.max(0, minY)
        width: Math.min(w, drawRectItem.width - x)
        height: Math.min(h, drawRectItem.height - y)
-        color: Config.tableSelectRectColor
+        color: rectBorderColor
        border.color: Qt.darker(color, 1.4)
        opacity: 0.3
    }
--- a/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusTemplateDragBorder.qml
+++ b/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusTemplateDragBorder.qml
@ -0,0 +1,212 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import ".."
+import "../.."
+
+CusResizeBorder {
+    id: root
+    x: 0
+    y: 0
+    width: parent.width
+    height: parent.height
+    readonly property int borderMargin: 6
+    readonly property int rotateHandleDistance: 25
+    property var controller: parent
+    property alias dragEnabled: dragItem.enabled
+    property bool rotationEnabled: true
+
+    property color rotateHandleColor: "lightgreen"
+
+    signal clicked(real x, real y)
+    signal doubleClicked(real x, real y)
+
+    //big
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: "transparent"
+        radius: borderMargin
+        anchors.fill: parent
+        anchors.margins: borderMargin
+    }
+    //line to rotateHandle and Border
+    Rectangle {
+        color: rotateHandleColor
+        width: 2
+        visible: rotationEnabled
+        height: rotateHandleDistance
+        anchors {
+            top: parent.top
+            horizontalCenter: parent.horizontalCenter
+            topMargin: -rotateHandleDistance
+        }
+    }
+    //top
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            top: parent.top
+            horizontalCenter: parent.horizontalCenter
+        }
+    }
+    //bottom
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            bottom: parent.bottom
+            horizontalCenter: parent.horizontalCenter
+        }
+    }
+    //left
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            left: parent.left
+            verticalCenter: parent.verticalCenter
+        }
+    }
+    //right
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+        }
+    }
+    //top left
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            top: parent.top
+            left: parent.left
+        }
+    }
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            top: parent.top
+            right: parent.right
+        }
+    }
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            left: parent.left
+            bottom: parent.bottom
+        }
+    }
+    Rectangle {
+        border.color: CusConfig.controlBorderColor
+        border.width: 1
+        color: CusConfig.backgroundColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+        }
+    }
+
+    Rectangle {
+        color: rotateHandleColor
+        width: borderMargin * 2
+        height: width
+        radius: width / 2
+        visible: rotationEnabled
+        anchors {
+            top: parent.top
+            horizontalCenter: parent.horizontalCenter
+            topMargin: -rotateHandleDistance
+        }
+        CusImage {
+            id: rotateCursor
+            source: CusConfig.imagePathPrefix + "rotate.png"
+            visible: rotateArea.containsMouse | rotateArea.pressed
+            x: rotateArea.mouseX - width / 2
+            y: rotateArea.mouseY - height / 2
+        }
+        MouseArea {
+            id: rotateArea
+            anchors.centerIn: parent
+            width: parent.width * 2
+            height: parent.height * 2
+            hoverEnabled: true
+            property int lastX: 0
+            onContainsMouseChanged: {
+                if (containsMouse) {
+                    cursorShape = Qt.BlankCursor
+                } else {
+                    cursorShape = Qt.ArrowCursor
+                }
+            }
+            onPressedChanged: {
+                if (containsPress) {
+                    lastX = mouseX
+                }
+            }
+            onPositionChanged: {
+                if (pressed) {
+                    var t = controller.rotation + (mouseX - lastX) / 5
+                    t = t % 360
+                    controller.rotation = t
+                }
+            }
+        }
+        BasicTooltip {
+            id: toolTip
+            x: rotateArea.mouseX + 30
+            y: rotateArea.mouseY
+            visible: rotateArea.pressed
+            text: parseInt(controller.rotation) + "°"
+        }
+    }
+    MouseArea {
+        id: dragItem
+        anchors.fill: parent
+        anchors.margins: borderMargin * 2
+        cursorShape: Qt.PointingHandCursor
+        drag.target: controller
+        onClicked: {
+            root.clicked(x, y)
+        }
+        onDoubleClicked: {
+            root.doubleClicked(x, y)
+        }
+    }
+}
--- a/src/TaoQuick/imports/TaoQuick/TaoQuick.qrc
+++ b/src/TaoQuick/imports/TaoQuick/TaoQuick.qrc
@ -74,9 +74,11 @@
        <file>Qml/Misc/CusRectDraw.qml</file>
        <file>Qml/Misc/CusResizeBorder.qml</file>
        <file>Qml/Misc/CusShortCutKeys.qml</file>
+        <file>Qml/Misc/CusTemplateDragBorder.qml</file>
        <file>Images/Check.png</file>
        <file>Images/ComboBox_Down.png</file>
        <file>Images/Expanded.png</file>
+        <file>Images/rotate.png</file>
        <file>Images/Search.png</file>
        <file>Images/Search_Clear.png</file>
        <file>Images/spinner.png</file>
--- a/src/TaoQuick/imports/TaoQuick/designer/TaoQuick.metainfo
+++ b/src/TaoQuick/imports/TaoQuick/designer/TaoQuick.metainfo
@ -979,4 +979,18 @@
            Property { name: "height"; type: "int"; value: 80 }
        }
    }
+    Type {
+        name: "TaoQuick.Qml.Misc.CusTemplateDragBorder"
+        icon: "images/CusTemplateDragBorder.png"
+
+        ItemLibraryEntry {
+            name: "CusTemplateDragBorder"
+            category: "TaoQuick - Misc"
+            libraryIcon: "images/CusTemplateDragBorder.png"
+            version: "1.0"
+            requiredImport: "TaoQuick"
+            Property { name: "width"; type: "int"; value: 120 }
+            Property { name: "height"; type: "int"; value: 80 }
+        }
+    }
 }
--- a/src/TaoQuick/imports/TaoQuick/qmldir
+++ b/src/TaoQuick/imports/TaoQuick/qmldir
@ -71,4 +71,5 @@ CusFPS 1.0 Qml/Misc/CusFPS.qml
 CusRectDraw 1.0 Qml/Misc/CusRectDraw.qml
 CusResizeBorder 1.0 Qml/Misc/CusResizeBorder.qml
 CusShortCutKeys 1.0 Qml/Misc/CusShortCutKeys.qml
+CusTemplateDragBorder 1.0 Qml/Misc/CusTemplateDragBorder.qml
 singleton CusConfig 1.0 Qml/CusConfig.qml