diff --git a/examples/TaoQuickShow/Contents.qrc b/examples/TaoQuickShow/Contents.qrc index 18596ea..56ee76d 100644 --- a/examples/TaoQuickShow/Contents.qrc +++ b/examples/TaoQuickShow/Contents.qrc @@ -5,5 +5,6 @@ Contents/Labels.qml Contents/DataEntrys.qml Contents/Miscs.qml + Contents/Drags.qml diff --git a/examples/TaoQuickShow/Contents/Drags.qml b/examples/TaoQuickShow/Contents/Drags.qml new file mode 100644 index 0000000..7a23336 --- /dev/null +++ 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 + } + } + } +} diff --git a/examples/TaoQuickShow/Qml/Pane/ContentModel.qml b/examples/TaoQuickShow/Qml/Pane/ContentModel.qml index 213289a..3360ee3 100644 --- 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" diff --git a/examples/TaoQuickShow/Trans/language_zh.json b/examples/TaoQuickShow/Trans/language_zh.json index 1fe2061..530a60e 100644 --- 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 可通过操作器改变尺寸、坐标或旋转" } ] diff --git a/src/TaoQuick/imports/TaoQuick/Images/rotate.png b/src/TaoQuick/imports/TaoQuick/Images/rotate.png new file mode 100644 index 0000000..b4de197 Binary files /dev/null and b/src/TaoQuick/imports/TaoQuick/Images/rotate.png differ diff --git a/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusRectDraw.qml b/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusRectDraw.qml index 2700cbe..996fef5 100644 --- 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 } diff --git a/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusTemplateDragBorder.qml b/src/TaoQuick/imports/TaoQuick/Qml/Misc/CusTemplateDragBorder.qml new file mode 100644 index 0000000..bc51871 --- /dev/null +++ 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) + } + } +} diff --git a/src/TaoQuick/imports/TaoQuick/TaoQuick.qrc b/src/TaoQuick/imports/TaoQuick/TaoQuick.qrc index 132a4da..dd07723 100644 --- a/src/TaoQuick/imports/TaoQuick/TaoQuick.qrc +++ b/src/TaoQuick/imports/TaoQuick/TaoQuick.qrc @@ -74,9 +74,11 @@ Qml/Misc/CusRectDraw.qml Qml/Misc/CusResizeBorder.qml Qml/Misc/CusShortCutKeys.qml + Qml/Misc/CusTemplateDragBorder.qml Images/Check.png Images/ComboBox_Down.png Images/Expanded.png + Images/rotate.png Images/Search.png Images/Search_Clear.png Images/spinner.png diff --git a/src/TaoQuick/imports/TaoQuick/designer/TaoQuick.metainfo b/src/TaoQuick/imports/TaoQuick/designer/TaoQuick.metainfo index 988d451..7dca7a5 100644 --- 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 } + } + } } diff --git a/src/TaoQuick/imports/TaoQuick/qmldir b/src/TaoQuick/imports/TaoQuick/qmldir index 2ccc808..957350e 100644 --- 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