如何在QML中使用multitouch

在Qt QML中,它可以利用multitouch来做一些我们想做的事情。在今天的文章中,我们将介绍如何使用multitouch来做一些我们想做的事。

其实,在QML中利用多点触控是非常容易的一件事。我们下面直接来展示我们的例程来给大家讲解一下:

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "multitouchtest.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("multitouchtest")

        MultiPointTouchArea {
            anchors.fill: parent
            touchPoints: [
                TouchPoint { id: point1 },
                TouchPoint { id: point2 },
                TouchPoint { id: point3 },
                TouchPoint { id: point4 }
            ]
        }

        Image {
            width: parent.width/5
            height: parent.height/5
            source: "images/image1.jpg"
            x: point1.x
            y: point1.y
        }

        Image {
            width: parent.width/5
            height: parent.height/5
            source: "images/image2.jpg"
            x: point2.x
            y: point2.y
        }

        Image {
            width: parent.width/5
            height: parent.height/5
            source: "images/image3.jpg"
            x: point3.x
            y: point3.y
        }

        Image {
            width: parent.width/5
            height: parent.height/5
            source: "images/image4.jpg"
            x: point4.x
            y: point4.y
        }

    }
}

如上面的介绍的那样,我们定义了一个“MultiPointTouchArea”。我们在Image中,绑定它们的坐标和TouchPoint在一起。这样,TouchPoint的坐标变化时,Image可以随时移动。 在它的里面,我们同时定义了4个TouchPoint。当我们只有一个手指触屏时,我们可以看见只有image1.jpg可以随着我们的手指移动:

  

当我们同时两个手指触屏时,我们可以看到同时可以有两个图片image1.jpg及image2.jpg来同时移动我们的画面:

同时3个手指触屏时,我们可以看到3个照片同时出现在屏幕上,并随我们的手指移动:

整个项目的源码在:git clone https://gitcafe.com/ubuntu/multitouchtest.git

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-07-29 16:53:55

如何在QML中使用multitouch的相关文章

如何在QML中利用Sprite来做我们需要的动画

在游戏中动画的设计非常中要.在QML中,它提供了丰富的animation,但是有时我们需要对图像进行变化,就像放电影一样.在今天的这篇文章中,我们将设计一个可以变化图像的动画.我们可以通过Qt所提供的Sprite功能来实现. 为了设计的方便,我们先设计一个我们自己的bear动画,这个动画的图像大小为: 2048x256.它刚好是8副图256x256 在我们的Sprite设计中,我们想按照上述图像显示的顺序依次显示每个图像,这样就可以形成一个可以连续变化的动画效果. 直接把我们的动画设计文件Bea

如何在QML中使用ListView并导航到其它页面中

我们知道ListView在QML应用中扮演非常重要的角色.看看我们的很多的应用都是在使用ListView.那么当我们点击ListView中的item并导航到另外一个页面呢?其实这样的方法有很多.在这篇文章中,我们来介绍其中的几种.开发者可以参照其中的设计,或自己想出更好的设计. 1)使用PageStack来完成 在我们的RssReader中的例子中,我们使用了PageStack来完成我们的导航.我们可以把我们的每个页面都做成我们的Page.当我们的页面被点击后,我们把新的Page压入栈中.在返回

如何在QML中使用camera API来拍照

在先前的例程中"如何使用Ubuntu手机平台中的照相机API来存储照片",我们已经展示了如何使用Item的属性来存储我们的照片.在这篇文章中,我们将使用Camera API来完成同样的功能. 我们来直接贴自己的代码: main.qml import QtQuick 2.0 import Ubuntu.Components 1.1 import QtMultimedia 5.0 /*! \brief MainView with a Label and Button elements. *

如何在QML中设计一个expandable ListView

在前面的文章"如何在QML中使用ListView并导航到其它页面中"中,我们已经介绍了各种在ListView中导航到其它页面的方法.在这篇文章中,我来介绍如何建立一个expandable的ListView.通过这样的方法,ListView可以不用导航到其它的页面中,但是它可以通过状态的控制占据整个页面,而得到显示. 首先我们可以使用Ubuntu SDK来创建一个最简单的"QML App with Simple UI (qmlproject)"项目.我们的Main.q

qml 中 使用 shader

使用绘制工具如Photoshop .Flash已经可以创建许多效果非常绚丽的图像.动画等. Qt/QML 的努力其实是在这些工具发展的后面, 因此很多效果在Qt中无法实现. 不得不佩服Qt小组的才智, 他们为了解决这个矛盾, 采取了让qt 5.x 跟opengl 紧密结合的方法, openGL是现代图形学的一个有力的编程工具,很多图形学的概念都已经在opengl中实现: 因此虽然实现一些特效虽然需要比较丰富的图形学知识, 但已经让以前很多的不可能变为可能. Qt 中可以有多种方法使用opengl

如何在QML应用中启动Scope

在这篇文章中,我们将介绍如何在QML应用中调用Scope,并把搜索的关键词传进去.这对有些QML应用需要用到Scope的情况非常有用.更多关于url-dispatcher的知识,请在文章"使用URL dispatcher的范例"看到. Scope ID 首先我们来讲一下什么是Scope ID.我们打开我们创建的任何一个Scope的manifest.json文件: { "architecture": "@[email protected]", &q

如何在QML应用中动态修改ListModel中的数据并存储它为JSON格式

我们知道JSON数据格式被广泛使用在很多的应用中,它可以帮我们保存我们应用的设置数据等.在QML中的ListView或GridView中,我们使用ListModel来显示它里面的数据.这个数据可以来源于xml或JSON.在ListView或GridView中,我们也可以动态修改ListModel中的数据.那么我们将如何保存这个数据呢?本篇文章也同样适用于xml格式的保存.这个练习就留个开发者自己了.当然保存ListModel中的数据也可以使用到SQLite数据库.这个因人而已! 为了方便我们的设

如何在makfile中查看变量的值

在makefile中查看变量的取值是多少应该是一个比较麻烦的问题,但是本大神自己研究出一个十分方便的方法.这个方法十分简单.现在介绍如下 如果在一个十分复杂庞大的makefile文件中,有个地方用到一个变量SRC_FILE,你很想知道makefile运行到此处的时候这个变量的值为多少.那么你可以在这个变量的下面写两行东东: $(shell echo $(SRC_FILE) > readme.txt ) rrrrrrrrrrrrrrrrrrr 第一行其实是调用shell命令来将这个变量的值输入到r

如何在Angular2-cli中使用插件(不使用配置)

重要点: 要把插件放在src/assets文件中 如何在angular-cli中使用jquery插件 a.在index.html中引入 <script  src="./assets/jquery-1.8.3.min.js"></script> b. 在要使用jquery的组件中声明(XX.component.ts) declare var $ : any; c.导入onInit import { OnInit} from '@angular/core'; d.输