229 lines
7.2 KiB
QML
229 lines
7.2 KiB
QML
// ==================================================
|
||
// =============== 可缩放的图片预览组件 ===============
|
||
// ==================================================
|
||
|
||
import QtQuick 2.15
|
||
import QtQuick.Controls 2.15
|
||
|
||
import ".."
|
||
|
||
Rectangle {
|
||
id: iRoot
|
||
// ========================= 【接口】 =========================
|
||
|
||
// 可设置
|
||
property real scaleMax: 2.0 // 比例上下限
|
||
property real scaleMin: 0.1 // 比例上下限
|
||
property QtObject overlayLayer // 图片叠加层
|
||
property var border: bRect.border // 边框
|
||
// 只读
|
||
property alias showImage: showImage // 图片组件
|
||
property real scale: 1.0 // 图片缩放比例
|
||
property int imageSW: 0 // 图片原始宽高
|
||
property int imageSH: 0
|
||
// 子类重写
|
||
property var beforeShow: undefined // 展示图片之前执行的操作
|
||
|
||
// 设置图片源，展示一张图片
|
||
function setSource(source) {
|
||
if(source) {
|
||
// 特殊字符#替换为%23
|
||
if(source.startsWith("file:///") && source.includes("#"))
|
||
source = source.replace(new RegExp("#", "g"), "%23");
|
||
showImage.source = source // 设置源
|
||
}
|
||
else
|
||
showImage.source = ""
|
||
}
|
||
|
||
// 传入路径，展示图片
|
||
function showPath(path) {
|
||
if(beforeShow) beforeShow()
|
||
showImage.showPath(path)
|
||
}
|
||
|
||
// 传入imgID，展示图片
|
||
function showImgID(imgID) {
|
||
if(beforeShow) beforeShow()
|
||
showImage.showImgID(imgID)
|
||
}
|
||
|
||
// 清空展示
|
||
function clear() {
|
||
if(beforeShow) beforeShow()
|
||
// showImage.clear()
|
||
showImage.source = ""
|
||
imageSW = imageSH = 0
|
||
}
|
||
|
||
// 复制当前图片
|
||
function copyImage() {
|
||
if(showImage.source == "") return
|
||
const res = qmlapp.imageManager.copyImage(showImage.source)
|
||
if(res === "[Success]")
|
||
qmlapp.popup.simple(qsTr("复制图片"), "")
|
||
else
|
||
qmlapp.popup.simple(qsTr("复制图片失败"), res)
|
||
}
|
||
|
||
// 用系统默认应用打开图片
|
||
function openImage() {
|
||
if(showImage.source == "") return
|
||
const res = qmlapp.imageManager.openImage(showImage.source)
|
||
if(res === "[Success]")
|
||
qmlapp.popup.simple(qsTr("打开图片"), "")
|
||
else
|
||
qmlapp.popup.simple(qsTr("打开图片失败"), res)
|
||
}
|
||
|
||
// 保存当前图片
|
||
function saveImage() {
|
||
if(showImage.source == "") return
|
||
saveDialog.open()
|
||
}
|
||
|
||
FileDialog_ {
|
||
id: saveDialog
|
||
title: qsTr("保存图片")
|
||
selectExisting: false
|
||
selectFolder: false
|
||
folder: shortcuts.desktop // 默认放桌面
|
||
nameFilters: ["*.png", "*.jpg"]
|
||
onAccepted: {
|
||
if(!fileUrl) {
|
||
console.log("文件对话框：未选择任何文件")
|
||
return
|
||
}
|
||
let filePath = fileUrl
|
||
const res = qmlapp.imageManager.saveImage(showImage.source, filePath)
|
||
if(res.startsWith("[Success]"))
|
||
qmlapp.popup.simple(qsTr("保存图片"), res)
|
||
else
|
||
qmlapp.popup.simple(qsTr("保存图片失败"), res)
|
||
}
|
||
}
|
||
|
||
// ========================= 【处理】 =========================
|
||
|
||
Component.onCompleted: {
|
||
// 叠加层挂父级
|
||
if(overlayLayer && overlayLayer.hasOwnProperty("parent"))
|
||
overlayLayer.parent = showImage
|
||
}
|
||
|
||
|
||
// 图片组件的状态改变
|
||
function imageStatusChanged(s) {
|
||
// 已就绪
|
||
if(s == Image.Ready) {
|
||
imageSW = showImage.sourceSize.width // 记录图片原始宽高
|
||
imageSH = showImage.sourceSize.height
|
||
imageFullFit() // 初始大小
|
||
}
|
||
else {
|
||
imageSW = imageSH = 0
|
||
iRoot.scale = 1
|
||
}
|
||
}
|
||
|
||
// 缩放，传入 flag>0 放大， <0 缩小 ，0回归100%。以相框中心为锚点。
|
||
function imageScaleAddSub(flag=0, step=0.1) {
|
||
if(showImage.status != Image.Ready) return
|
||
// 计算缩放比例
|
||
let s = 1.0 // flag==0 时复原
|
||
if (flag > 0) { // 放大
|
||
s = (iRoot.scale + step).toFixed(1)
|
||
// 禁止大于上限 或 图片填满大小（裁切）
|
||
const max = Math.max(flickable.width/imageSW, flickable.height/imageSH, scaleMax)
|
||
if(s > max) s = max
|
||
}
|
||
else if(flag < 0) { // 缩小
|
||
s = (iRoot.scale - step).toFixed(1)
|
||
// 禁止小于下限 或 图片填满大小（不裁切）
|
||
const min = Math.min(flickable.width/imageSW, flickable.height/imageSH, scaleMin)
|
||
if(s < min) s = min
|
||
}
|
||
|
||
// 目标锚点
|
||
let gx = -flickable.width/2
|
||
let gy = -flickable.height/2
|
||
// 目标锚点在图片中的原比例
|
||
let s1x = (flickable.contentX-gx)/showImageContainer.width
|
||
let s1y = (flickable.contentY-gy)/showImageContainer.height
|
||
// 目标锚点在图片中的新比例，及差值
|
||
iRoot.scale = s // 更新缩放
|
||
let s2x = (flickable.contentX-gx)/showImageContainer.width
|
||
let s2y = (flickable.contentY-gy)/showImageContainer.height
|
||
let sx = s2x-s1x
|
||
let sy = s2y-s1y
|
||
// 实际长度差值
|
||
let lx = sx*showImageContainer.width
|
||
let ly = sy*showImageContainer.height
|
||
// 偏移
|
||
flickable.contentX -= lx
|
||
flickable.contentY -= ly
|
||
}
|
||
|
||
// 图片填满组件，不裁切
|
||
function imageFullFit() {
|
||
if(showImage.source == "" || imageSW <= 0) return
|
||
iRoot.scale = Math.min(flickable.width/imageSW, flickable.height/imageSH)
|
||
// 图片中心对齐相框
|
||
flickable.contentY = - (flickable.height - showImageContainer.height)/2
|
||
flickable.contentX = - (flickable.width - showImageContainer.width)/2
|
||
}
|
||
|
||
// ======================== 【布局】 =========================
|
||
color: theme.bgColor
|
||
|
||
|
||
// 滑动区域，显示图片，监听左键拖拽
|
||
Flickable {
|
||
id: flickable
|
||
anchors.fill: parent
|
||
contentWidth: showImageContainer.width
|
||
contentHeight: showImageContainer.height
|
||
clip: true
|
||
|
||
// 图片容器，大小不小于滑动区域
|
||
Item {
|
||
id: showImageContainer
|
||
width: Math.max( imageSW * iRoot.scale , flickable.width )
|
||
height: Math.max( imageSH * iRoot.scale , flickable.height )
|
||
Image_ {
|
||
id: showImage
|
||
anchors.centerIn: parent
|
||
scale: iRoot.scale
|
||
onStatusChanged: imageStatusChanged(status)
|
||
}
|
||
}
|
||
|
||
// 滚动条
|
||
ScrollBar.vertical: ScrollBar { }
|
||
ScrollBar.horizontal: ScrollBar { }
|
||
}
|
||
|
||
// 监听滚轮缩放
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
acceptedButtons: Qt.NoButton
|
||
// 滚轮缩放
|
||
onWheel: {
|
||
if (wheel.angleDelta.y > 0) {
|
||
imageScaleAddSub(1) // 放大
|
||
}
|
||
else {
|
||
imageScaleAddSub(-1) // 缩小
|
||
}
|
||
}
|
||
}
|
||
|
||
// 边框
|
||
Rectangle {
|
||
id: bRect
|
||
anchors.fill: parent
|
||
color: "#00000000"
|
||
border.width: 1
|
||
border.color: theme.coverColor4
|
||
}
|
||
} |