300 lines
10 KiB
QML
300 lines
10 KiB
QML
// ==========================================================
|
||
// =============== 可显示OCR文本的增强Image组件 ===============
|
||
// ==========================================================
|
||
|
||
import QtQuick 2.15
|
||
import QtQuick.Controls 2.15
|
||
import ".."
|
||
|
||
ImageScale {
|
||
id: iRoot
|
||
property bool showOverlay: true // 显示叠加层
|
||
|
||
Component.onCompleted: {
|
||
// 默认显示/关闭叠加层
|
||
showOverlay = qmlapp.globalConfigs.getValue("ui.imgShowOverlay")
|
||
}
|
||
|
||
beforeShow: () => {
|
||
mouseArea.initIndex() // 清空选字参数
|
||
textBoxes = [] // 清空旧文本块
|
||
}
|
||
|
||
// 展示文本块
|
||
function showTextBoxes(res) {
|
||
beforeShow()
|
||
// 提取文本框
|
||
if(res.code == 100 && res.data.length > 0) {
|
||
let tbs = []
|
||
for(let i in res.data) {
|
||
const d = res.data[i]
|
||
const info = {
|
||
x: d.box[0][0],
|
||
y: d.box[0][1],
|
||
width: d.box[2][0] - d.box[0][0],
|
||
height: d.box[2][1] - d.box[0][1],
|
||
text: d.text,
|
||
end: d.end || "", // 行尾间隔符
|
||
}
|
||
tbs.push(info)
|
||
}
|
||
textBoxes = tbs
|
||
}
|
||
}
|
||
|
||
// 弹出菜单
|
||
function popupMenu() {
|
||
selectMenu.popup()
|
||
}
|
||
// 显示/隐藏叠加层
|
||
function switchOverlay() {
|
||
showOverlay = !showOverlay
|
||
if(!showOverlay)
|
||
mouseArea.cursorShape = Qt.OpenHandCursor
|
||
}
|
||
|
||
property var textBoxes: [] // 文本块列表
|
||
|
||
// 文本块叠加层
|
||
overlayLayer: Item {
|
||
id: oRoot
|
||
anchors.fill: parent
|
||
visible: showOverlay
|
||
|
||
Repeater {
|
||
id: textBoxRepeater
|
||
model: textBoxes
|
||
TextBox {
|
||
text: modelData.text
|
||
x: modelData.x
|
||
y: modelData.y
|
||
end: modelData.end // 结尾间隔符
|
||
|
||
Component.onCompleted: {
|
||
width = modelData.width
|
||
height = modelData.height
|
||
resetSize() // 自适应字体和组件大小
|
||
textBoxes[index].width = width // 记录修改后的组件大小
|
||
textBoxes[index].height = height
|
||
textBoxes[index].obj = this
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
MouseArea {
|
||
id: mouseArea
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
property int startIndex: -1 // 拖拽开始时，文本框序号
|
||
property int startTextIndex: -1 // 拖拽开始时，字符序号
|
||
property int endIndex: -1 // 拖拽结束时，文本框序号
|
||
property int endTextIndex: -1 // 拖拽结束时，字符序号
|
||
property int selectUpdate: 0
|
||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||
|
||
// 清除index
|
||
function initIndex() {
|
||
startIndex = startTextIndex = endIndex = endTextIndex = -1
|
||
}
|
||
// 检测当前鼠标点，位于哪一个tb内
|
||
function mouseInTextBox() {
|
||
const localPoint = oRoot.mapFromItem(mouseArea, mouseX, mouseY)
|
||
const x = localPoint.x, y = localPoint.y
|
||
for (let i=0,l=textBoxes.length; i<l; i++) {
|
||
const rect = textBoxes[i]
|
||
if (x >= rect.x && x <= rect.x + rect.width &&
|
||
y >= rect.y && y <= rect.y + rect.height) {
|
||
return i
|
||
}
|
||
}
|
||
return -1
|
||
}
|
||
// 检测当前鼠标点，在index tb内的哪一个字符处
|
||
function mouseInTextIndex(index) {
|
||
return textBoxes[index].obj.where(mouseArea, mouseX, mouseY)
|
||
}
|
||
// 获取Index正确顺序。返回： [li 起始块, lt 起始块选区左侧, ri 结束块, rt 结束块选区右侧]
|
||
function getIndexes() {
|
||
let li, lt, ri, rt
|
||
if(startIndex < endIndex) {
|
||
li=startIndex; lt=startTextIndex; ri=endIndex; rt=endTextIndex;
|
||
}
|
||
else if(startIndex > endIndex) {
|
||
li=endIndex; lt=endTextIndex; ri=startIndex; rt=startTextIndex;
|
||
}
|
||
else {
|
||
li = ri = startIndex
|
||
if(startTextIndex < endTextIndex) {
|
||
lt=startTextIndex; rt=endTextIndex;
|
||
}
|
||
else if(startTextIndex > endTextIndex) {
|
||
lt=endTextIndex; rt=startTextIndex;
|
||
}
|
||
else { // 单击，未选中
|
||
lt = rt = -1
|
||
}
|
||
}
|
||
return [li, lt, ri, rt]
|
||
}
|
||
// 根据 Index 的参数，选择对应文本。
|
||
function selectIndex() {
|
||
const [li, lt, ri, rt] = getIndexes()
|
||
// 遍历每个文本框数据
|
||
for (let i = 0, l=textBoxes.length; i < l; i++) {
|
||
const tEdit = textBoxes[i].obj.textEdit
|
||
if( li<0 || ri<0 || i<li || i>ri ) { // 未被选中
|
||
tEdit.deselect()
|
||
}
|
||
else if(i === li && i === ri) { // 单个块
|
||
if(lt === rt) // 无有效选中
|
||
tEdit.deselect()
|
||
else
|
||
tEdit.select(lt, rt)
|
||
}
|
||
else if(i === li) { // 多个块的起始
|
||
const len = textBoxes[i].text.length
|
||
tEdit.select(lt, len)
|
||
}
|
||
else if(i === ri) { // 多个块的结束
|
||
tEdit.select(0, rt)
|
||
}
|
||
else { // 多个块的中间
|
||
tEdit.selectAll(0, rt)
|
||
}
|
||
}
|
||
}
|
||
// 全选
|
||
function selectAll() {
|
||
const l = textBoxes.length
|
||
if(l === 0) return
|
||
startIndex = startTextIndex = 0
|
||
endIndex = l-1
|
||
endTextIndex = textBoxes[endIndex].text.length
|
||
selectIndex()
|
||
}
|
||
// 复制已选中的内容
|
||
function selectCopy() {
|
||
let [li, lt, ri, rt] = getIndexes()
|
||
// 没有有效选中，则复制全部
|
||
if(li<0 || ri<0 || (li===ri && lt===rt)) {
|
||
selectAllCopy()
|
||
return
|
||
}
|
||
let copyText = ""
|
||
// 选中单个文本块
|
||
if(li === ri) {
|
||
copyText = textBoxes[li].text.substring(lt, rt)
|
||
}
|
||
// 选中多个块，则遍历多个块，提取各自的文本
|
||
else {
|
||
for(let i = li; i <= ri; i++) {
|
||
const text = textBoxes[i].text
|
||
const end = textBoxes[i].end
|
||
if(i === li) // 多个块的起始
|
||
copyText = text.substring(lt) + end
|
||
else if(i === ri) // 多个块的结束
|
||
copyText += text.substring(0, rt)
|
||
else // 多个块的中间
|
||
copyText += text + end
|
||
}
|
||
}
|
||
if(copyText && copyText.length > 0) {
|
||
qmlapp.utilsConnector.copyText(copyText)
|
||
qmlapp.popup.simple(qsTr("图片：复制%1字").arg(copyText.length), "")
|
||
}
|
||
else {
|
||
qmlapp.popup.simple(qsTr("图片：无选中文字"), "")
|
||
}
|
||
}
|
||
// 复制所有
|
||
function selectAllCopy() {
|
||
let copyText = ""
|
||
for (let i = 0, l=textBoxes.length; i < l; i++) {
|
||
copyText += textBoxes[i].text
|
||
if(i < l-1) copyText += textBoxes[i].end
|
||
}
|
||
qmlapp.utilsConnector.copyText(copyText)
|
||
qmlapp.popup.simple(qsTr("图片：复制全部%1字").arg(copyText.length), "")
|
||
selectAll()
|
||
}
|
||
|
||
// 按下
|
||
onPressed: {
|
||
mouseArea.forceActiveFocus()
|
||
if (mouse.button === Qt.RightButton) {
|
||
selectMenu.popup()
|
||
return
|
||
}
|
||
if(!showOverlay) {
|
||
mouse.accepted = false
|
||
return
|
||
}
|
||
initIndex()
|
||
const tbi = mouseInTextBox()
|
||
cursorShape = tbi < 0 ? Qt.ClosedHandCursor : Qt.IBeamCursor
|
||
if(tbi >= 0) { // 选择文本
|
||
startIndex = tbi
|
||
startTextIndex = mouseInTextIndex(tbi)
|
||
}
|
||
else {
|
||
mouse.accepted = false
|
||
}
|
||
}
|
||
// 移动
|
||
onPositionChanged: {
|
||
if(!showOverlay) return
|
||
const tbi = mouseInTextBox()
|
||
if(pressed) { // 拖拽中
|
||
if(tbi >= 0) { // 选择文本
|
||
endIndex = tbi
|
||
endTextIndex = mouseInTextIndex(tbi)
|
||
selectIndex()
|
||
}
|
||
}
|
||
else { // 悬停中
|
||
cursorShape = tbi < 0 ? Qt.OpenHandCursor : Qt.IBeamCursor
|
||
}
|
||
}
|
||
// 抬起
|
||
onReleased: {
|
||
if(!showOverlay) return
|
||
if (mouse.button === Qt.RightButton) return
|
||
const tbi = mouseInTextBox()
|
||
cursorShape = tbi < 0 ? Qt.OpenHandCursor : Qt.IBeamCursor
|
||
if(startIndex === -1) return
|
||
if(tbi >= 0) {
|
||
endIndex = tbi
|
||
endTextIndex = mouseInTextIndex(tbi)
|
||
}
|
||
selectIndex()
|
||
}
|
||
// 菜单
|
||
Menu_ {
|
||
id: selectMenu
|
||
menuList: [
|
||
[mouseArea.selectCopy, qsTr("复制 （Ctrl+C）")],
|
||
[mouseArea.selectAll, qsTr("全选 （Ctrl+A）")],
|
||
[iRoot.copyImage, qsTr("复制图片（Ctrl+X）")],
|
||
[iRoot.saveImage, qsTr("保存图片（Ctrl+S）")],
|
||
[iRoot.switchOverlay, qsTr("显示/隐藏文字（Tab）")],
|
||
[iRoot.openImage, qsTr("用默认应用打开图片")],
|
||
[iRoot.clear, qsTr("删除图片（Ctrl+D）"), "noColor"],
|
||
]
|
||
}
|
||
// 按键事件
|
||
Keys.onPressed: {
|
||
if (event.modifiers & Qt.ControlModifier) {
|
||
event.key===Qt.Key_A && selectAll()
|
||
event.key===Qt.Key_C && selectCopy()
|
||
event.key===Qt.Key_X && iRoot.copyImage()
|
||
event.key===Qt.Key_S && iRoot.saveImage()
|
||
event.key===Qt.Key_D && iRoot.clear()
|
||
}
|
||
if (event.key === Qt.Key_Tab) {
|
||
iRoot.switchOverlay()
|
||
Qt.callLater(mouseArea.forceActiveFocus)
|
||
}
|
||
}
|
||
}
|
||
} |