QML使用PinchArea实现捏拉缩放与旋转并单手拖放控件

因为要实现一个类似微信换头像的功能，所以使用到了背景图片的捏拉缩放

并且还要能单手拖放控件！

根据查阅文档，了解到要实现捏拉缩放可以使用PinchArea来实现，当然也

可以自己实现，只是相对花点时间，这边就直接用系统的方法，而使用单手

拖放控件可以直接用Drag这个控件，下面是实现代码：

 Image {

            id:  previewImage

            width: previewRect.width

            height: previewRect.height

            fillMode: Image.PreserveAspectFit

            Drag.active: dragArea.drag.active

            Drag.hotSpot.x: 10

            Drag.hotSpot.y: 10

        }

 PinchArea

        {

            anchors.fill: parent

            pinch.maximumScale: 3;

            pinch.minimumScale: 0.8;

            pinch.dragAxis:Pinch.XAndYAxis

            onPinchStarted: {

                     pinch.accepted = true;

                 }

                 onPinchUpdated: {     

                     previewImage.scale =pinch.scale;

                 }

                 onPinchFinished: {

                     previewImage.scale =Math.floor(pinch.scale);

                 }

            MouseArea {

                id: dragArea

                anchors.fill: parent

                drag.target: previewImage

            }

        }

我在使用PinchArea时并没有直接复制pinch.target:previewImage;

而是使用事件自己进行缩放，在这边有一个说明，我在自己使用事件缩放时，

  pinch.maximumScale: 3;

  pinch.minimumScale: 0.8;

onPinchUpdated事件中自己去限制会让缩放卡住，

所以只能自己再finish里面进行判断最好！

使用target进行缩放会缩放时， 

 pinch.maximumScale: 3;

  pinch.minimumScale: 0.8;

使用事件来操控。

当然只是单纯实现效果可以直接使用pinch.target: previewImage;代码，

不用自己操心其他的东西。

关于drag的解释，因为我没有使用DropArea这个控件，所以只是单纯的

让控件东西来，只要设置drag.target和Drag.active:dragArea.drag.active

就可以了！代码实现起来很简单，我在看别人网上写的时候特别好麻烦，头都要晕，

最后还是自己看文档实现更方便!

最后说明下使用单手拖放控件上，因为使用了PinchArea所以会遮挡鼠标事件，

故一定要把鼠标事件放进PinchArea里面不然drag是接收不到没有任何操作！