QML实现PinchArea和MouseArea实现图片缩放和平移功能同时具备

最新推荐文章于 2024-03-16 09:56:17 发布

smartvxworks

最新推荐文章于 2024-03-16 09:56:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： qml quick QT

本文链接：https://blog.csdn.net/smartvxworks/article/details/118382402

本文详细介绍了如何在QML中结合PinchArea和MouseArea组件，实现图片的平移及缩放功能。通过这两个组件的事件处理和坐标转换，可以创建出灵活的触摸交互体验，适用于移动设备或桌面应用中的图像查看器功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        Image {
            id: photoImage
            //fillMode: Image.Pad  //Image.Pad：原始图像不做处理
            source:  (typeof picture_Scan_D_Area.pictureList[picture_Scan_D_Area.pictureIndex] === 'undefined') ? "" : picture_Scan_D_Area.pictureList[picture_Scan_D_Area.pictureIndex]  //pictureIndex = 0
            smooth: true
            mipmap: true
            antialiasing: true
            Component.onCompleted: {           //它的存在就是在页面完成加载的时候，同时进行的操作
                x = parent.width / 2 - width / 2     //width:1180
                y = parent.height / 2 - height / 2   //height:770
                photoImage.scale =  80 / 100         // 让图片显示80%大小
                console.log("picture_Scan_D_Area.pictureList:",picture_Scan_D_Area.pictureList.length)
            }

           // Drag.active: mouseArea.drag.active

            PinchArea {   //PinchArea 本身是一个不可见的 Item ，通常和一个可见的 Item 配合使用来处理捏拉手势，这里和Image一块使用实现图片缩放、旋转等效果
                id:pinchArea
                anchors.fill: