QML实现图片拖入拖出、剪贴板复制粘贴 |
您所在的位置：网站首页 › 移动卡板图片 › QML实现图片拖入拖出、剪贴板复制粘贴 |
QML实现图片拖入拖出、剪贴板复制粘贴
|
实现效果：
代码链接：https://github.com/gongjianbo/MyTestCode/tree/master/Qml/TestQml_20221125_CopyPaste 1.图片拖入QML 中提供了 DropArea 类型来处理拖放，使用 containsDrag 属性判断是否有拖拽动作，使用 dropped(DragEvent drop) 信号处理拖拽的释放动作，此信号带一个 DragEvent 参数，可以从中获取拖放的内容。如果拖放的是文件，可以通过 DragEvent 的 urls 属性取文件路径列表，再将路径设置给 Image source。 DropArea { id: drop_area anchors.fill: parent onDropped: (drop)=>{ console.log("drop hasUrls:", drop.hasUrls) if (drop.hasUrls) { drop_image.source = drop.urls[0] //这里只取了一个文件url } } } Image { id: drop_image anchors.fill: parent //按比例缩放 fillMode: Image.PreserveAspectFit //异步加载 asynchronous: true }考虑到 QML 中缺少对路径有效性的判断，以及拖入时我们可能需要执行复制、转码、缩放等操作，所以需要写一个 C++ 的工具类来处理。 2.图片拖出拖出可以参考 QML drag 相关的示例，即 MouseArea + Drag 附加属性来完成。主要就是设置 Drag 的 supportedActions 拖拽支持的操作和 mimeData 拖拽内容。 //onLoading 正在加载图片 property bool onLoading: drop_image.status === Image.Loading Image { id: drop_image anchors.fill: parent } Item { id: drag_item Drag.active: mouse_area.drag.active //imageSource是拖拽时的图标 //这里有个问题，图片是原始大小，而且没看到有设置大小或者缩放的接口 //可以在拖入的时候就生成一个 //Drag.imageSource: drop_image.source //hotSpot是鼠标与imageSource的偏移距离 Drag.hotSpot.x: 5 Drag.hotSpot.y: 5 //拖拽类型默认Drag.Internal动画是拖动Item //Drag.Automatic动画是拖动imageSource，结束后才移动Item Drag.dragType: Drag.Automatic //拖拽拷贝文件，默认好像是移动了文件 Drag.supportedActions: Qt.CopyAction //mimeData是拖拽的内容 Drag.mimeData: { "text/uri-list": drop_image.source } } MouseArea { id: mouse_area anchors.fill: parent //加载好图片后允许拖出 drag.target: (!onLoading && drop_image.frameCount > 0) ? drag_item : null } 3.剪贴板操作QML 似乎没有引入剪切板的类，所以得自己封装后注册到 QML。界面上使用一个 FocusScope 捕获焦点，然后处理按键消息。 FocusScope { id: focus_scope Keys.enabled: true //用release的话，按键释放顺序不能保证 Keys.onPressed: (event)=>{ if (event.modifiers & Qt.ControlModifier) { if (event.key === Qt.Key_C) { //Ctrl+C复制 console.log("ctrl + c") } else if(event.key === Qt.Key_V) { //Ctrl+V复制 console.log("ctrl + v") } } } } MouseArea { id: mouse_area anchors.fill: parent onClicked: { focus_scope.forceActiveFocus() } }然后封装一下 QClipboard 剪贴板的相关接口，读写资源路径。 QUrl ClipboardTool::currentUrl() { QClipboard *clipboard = QGuiApplication::clipboard(); if (clipboard) { auto md = clipboard->mimeData(); if (md) { auto urls = md->urls(); if (!urls.isEmpty()) { return urls.first(); } } } return QUrl(); } void ClipboardTool::setCurrentUrl(const QUrl &url) { QClipboard *clipboard = QGuiApplication::clipboard(); if (clipboard) { QMimeData *md = new QMimeData; md->setUrls(QList() |
【本文地址】