From d1455d05af82da912e983293ad88040494606c00 Mon Sep 17 00:00:00 2001 From: Tian Shilin Date: Fri, 2 Aug 2024 14:59:34 +0800 Subject: [PATCH] fix: Problems caused by image display ratio Log: Handled the problem that when the height/width of the image is too small, the actual size of the display style is incorrect and the interface problem when the image is displayed in the original scale. BUG: https://pms.uniontech.com/bug-view-219009.html https://pms.uniontech.com/bug-view-168397.html --- .../ListView/ThumbnailListDelegate.qml | 105 +++++++++--------- .../ListView/ThumbnailListDelegate2.qml | 105 +++++++++--------- 2 files changed, 104 insertions(+), 106 deletions(-) mode change 100644 => 100755 src/qml/Control/ListView/ThumbnailListDelegate.qml mode change 100644 => 100755 src/qml/Control/ListView/ThumbnailListDelegate2.qml diff --git a/src/qml/Control/ListView/ThumbnailListDelegate.qml b/src/qml/Control/ListView/ThumbnailListDelegate.qml old mode 100644 new mode 100755 index 23890a76..aca3674d --- a/src/qml/Control/ListView/ThumbnailListDelegate.qml +++ b/src/qml/Control/ListView/ThumbnailListDelegate.qml @@ -135,7 +135,9 @@ Item { //border and shadow Rectangle { id: borderRect - anchors.fill: image + anchors.centerIn: parent + width: image.paintedWidth + height: image.paintedHeight color: Qt.rgba(0, 0, 0, 0) border.color: Qt.rgba(0, 0, 0, 0.1) border.width: 1 @@ -264,37 +266,53 @@ Item { Component { id: selectedIconComponent Item { - id: imageArea - anchors.top: parent.top - anchors.right: parent.right - anchors.topMargin: 2 - anchors.rightMargin: 2 - width: 20 - height: 20 - - //选中后显示的图标 - DciIcon { - name: "select_active_1" - visible: true - anchors.centerIn: parent - } + id: iconArea - DciIcon { - name: "Inner_shadow" - visible: true - anchors.centerIn: parent - } + anchors.centerIn: parent// 确保阴影框居中于图片 + width: image.paintedWidth + 14 + height: image.paintedHeight + 14 - DciIcon { - name: "shadow" - visible: true - anchors.centerIn: parent - } + Rectangle { + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 2 + anchors.rightMargin: 2 + color: Qt.rgba(0,0,0,0) + width: 20 + height: 20 + + + // 选中后显示的图标 + DciIcon { + id: selectIcon + name: "select_active_1" + visible: true + anchors.centerIn: parent + } - DciIcon { - name: "yes" - visible: true - anchors.centerIn: parent + // 内部阴影 + DciIcon { + id: innerShadow + name: "Inner_shadow" + visible: true + anchors.centerIn: parent + } + + // 外部阴影 + DciIcon { + id: outerShadow + name: "shadow" + visible: true + anchors.centerIn: parent + } + + // 确认图标 + DciIcon { + id: confirmIcon + name: "yes" + visible: true + anchors.centerIn: parent + } } } } @@ -303,24 +321,16 @@ Item { Component { id: selectedFrameComponent Item { - anchors.fill: parent + anchors.fill: image z: -1 - // 计算图片区域的位置 - Rectangle { - id: imageArea - anchors.centerIn: parent - width: parent.width - 14 - height: parent.height - 14 - visible: false - } - //选中后显示的阴影框 + // 选中后显示的阴影框 Rectangle { id: selectShader - anchors.centerIn: parent - width: parent.width - height: parent.height + anchors.centerIn: parent// 确保阴影框居中于图片 + width: image.paintedWidth + 14 + height: image.paintedHeight + 14 radius: 10 color: "#AAAAAA" visible: true @@ -329,17 +339,6 @@ Item { border.color: Qt.rgba(0,0,0,0.1) border.width: 1 } - - //遮罩执行 - OpacityMask { - id: mask - anchors.fill: imageArea - source: imageArea - maskSource: selectShader - antialiasing: true - smooth: true - } - } } diff --git a/src/qml/Control/ListView/ThumbnailListDelegate2.qml b/src/qml/Control/ListView/ThumbnailListDelegate2.qml old mode 100644 new mode 100755 index a06ca173..902058ab --- a/src/qml/Control/ListView/ThumbnailListDelegate2.qml +++ b/src/qml/Control/ListView/ThumbnailListDelegate2.qml @@ -114,7 +114,9 @@ Item { //border and shadow Rectangle { id: borderRect - anchors.fill: image + anchors.centerIn: parent + width: image.paintedWidth + height: image.paintedHeight color: Qt.rgba(0, 0, 0, 0) border.color: Qt.rgba(0, 0, 0, 0.1) border.width: 1 @@ -204,37 +206,53 @@ Item { Component { id: selectedIconComponent Item { - id: imageArea - anchors.top: parent.top - anchors.right: parent.right - anchors.topMargin: 2 - anchors.rightMargin: 2 - width: 20 - height: 20 - - //选中后显示的图标 - DciIcon { - name: "select_active_1" - visible: true - anchors.centerIn: parent - } + id: iconArea - DciIcon { - name: "Inner_shadow" - visible: true - anchors.centerIn: parent - } + anchors.centerIn: parent// 确保阴影框居中于图片 + width: image.paintedWidth + 14 + height: image.paintedHeight + 14 - DciIcon { - name: "shadow" - visible: true - anchors.centerIn: parent - } + Rectangle { + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 2 + anchors.rightMargin: 2 + color: Qt.rgba(0,0,0,0) + width: 20 + height: 20 + + + // 选中后显示的图标 + DciIcon { + id: selectIcon + name: "select_active_1" + visible: true + anchors.centerIn: parent + } - DciIcon { - name: "yes" - visible: true - anchors.centerIn: parent + // 内部阴影 + DciIcon { + id: innerShadow + name: "Inner_shadow" + visible: true + anchors.centerIn: parent + } + + // 外部阴影 + DciIcon { + id: outerShadow + name: "shadow" + visible: true + anchors.centerIn: parent + } + + // 确认图标 + DciIcon { + id: confirmIcon + name: "yes" + visible: true + anchors.centerIn: parent + } } } } @@ -243,24 +261,16 @@ Item { Component { id: selectedFrameComponent Item { - anchors.fill: parent + anchors.fill: image z: -1 - // 计算图片区域的位置 - Rectangle { - id: imageArea - anchors.centerIn: parent - width: parent.width - 14 - height: parent.height - 14 - visible: false - } - //选中后显示的阴影框 + // 选中后显示的阴影框 Rectangle { id: selectShader - anchors.centerIn: parent - width: parent.width - height: parent.height + anchors.centerIn: parent// 确保阴影框居中于图片 + width: image.paintedWidth + 14 + height: image.paintedHeight + 14 radius: 10 color: "#AAAAAA" visible: true @@ -269,17 +279,6 @@ Item { border.color: Qt.rgba(0,0,0,0.1) border.width: 1 } - - //遮罩执行 - OpacityMask { - id: mask - anchors.fill: imageArea - source: imageArea - maskSource: selectShader - antialiasing: true - smooth: true - } - } }