QML 五指触摸（捏操作）的实现

最新推荐文章于 2024-07-23 09:07:58 发布

「已注销」

最新推荐文章于 2024-07-23 09:07:58 发布

阅读量2.5k

点赞数 3

分类专栏： QML code snippet 文章标签： QML

本文链接：https://blog.csdn.net/dawnyuan/article/details/84493783

版权

该博客介绍了如何在QML中实现五指触摸操作，特别是在Surface等多点触控设备上的捏合缩放功能。由于QML的MultiPointTouchArea不直接支持手势识别，作者通过计算五边形的面积变化来判断缩放，并应用了全排列算法确定最佳顶点顺序。提供了相关算法链接和Qt官方文档参考。

摘要由CSDN通过智能技术生成

需求

在支持多点触摸的设备（比如 Surface 等）上，五个手指在屏幕上执行捏操作，可以控制 QML Item，让其随手指移动而缩放。

困难

QML 中MultiPointTouchArea可以得到多指触摸的信息，但无手势的接口，需要自己实现。
Qt 版本：5.11.1

思路

触摸的 5 个点可以形成一个五边形，算出其面积，根据面积的变化判断缩放
找到不规则多边形面积算法 polygonArea，参考：Algorithm to find the area of a polygon
由于上一步骤中计算多边形面积需要将各个顶点逆时针排列，故利用全排列算法 permutate 比较出面积最大的一组作为排好序的目标顶点组，参考：浅谈数组全排列、去重、求最大值的 JavaScript 实现

代码示例

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
   
    id: root

    function permutate(arr) {
   
        if (arr.length === 1) {
   
            return arr
        } else if (arr.length === 2) {
   
            return [[arr[0], arr[1]], [arr[1], arr[0]]]
        } else {
   
            var temp = []
            for (var i = 0; i < arr.length; ++i) {
   
                var save = arr[i]
                arr.splice(i, 1) // 取出 arr[i]
                var resul