文档章节

QML手势及多点触摸之PinchArea

eightfingerdhuta
 eightfingerdhuta
发布于 2014/07/29 15:27
字数 474
阅读 2596
收藏 1

PinchArea

可以参看PinchArea文档。下面是SDK自带的demo。通过此demo可以了解PinchArea的使用。 PinchArea实现了“挤压”操作。 **要点:**在PinchArea中可以使用一个内置的pinch参数。这个参数是一个PinchEvent实例(instance)。 而pinch内置参数中,有一个target属性用来标识被控对象的。

  • 使用 pinch.target 这种方式,你什么都不用关心,甚至不需要弄明白 pinch 属性到底是什么含义,就可以得到一个不错的变换效果, Qt Quick 默认帮你处理所有的事情。

  • 使用 onPinchStarted() / onPinchUpdated() / onPinchFinished() 要稍微麻烦一些,你必须要了解 PinchEvent 每个参数的含义,自己设计变换策略。不过好处是,七十二般变化都由你控制。

    <!-- lang: js -->

      import QtQuick 1.1
    
      Rectangle {
      width: 640
      height: 360
      color: "gray"
    
      Flickable {
      id: flick
      anchors.fill: parent
      contentWidth: 500
      contentHeight: 500
    
      PinchArea {
          width: Math.max(flick.contentWidth, flick.width)
          height: Math.max(flick.contentHeight, flick.height)
    
          property real initialWidth
          property real initialHeight
          onPinchStarted: {
              initialWidth = flick.contentWidth
              initialHeight = flick.contentHeight
          }
    
          onPinchUpdated: {
              // adjust content pos due to drag
              flick.contentX += pinch.previousCenter.x - pinch.center.x
              flick.contentY += pinch.previousCenter.y - pinch.center.y
    
              // resize content
              flick.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
          }
    
          onPinchFinished: {
              // Move its content within bounds.
              flick.returnToBounds()
          }
    
          Rectangle {
              width: flick.contentWidth
              height: flick.contentHeight
              color: "white"
              Image {
                  anchors.fill: parent
                  source: "qt-logo.jpg"
                  MouseArea {
                      anchors.fill: parent
                      onDoubleClicked: {
                          flick.contentWidth = 500
                          flick.contentHeight = 500
                      }
                  }
              }
          }
      }
      }
      }
    

其他不再赘述。很简单。

PinchArea的使用

参考博文:Qt Quick 事件处理之捏拉缩放与旋转 缩放与旋转实现要点: 要想使用 PinchArea 来变换一个 Item ,有两个办法:

  • 设定 target 属性,将其指向要变换的 Item ,然后 PinchArea 就会在合适的时候帮你变换它。
  • 处理 onPinchStarted() / onPinchUpdated() / onPinchFinished() 信号,在信号处理器中变换目标 Item 。这种方式更灵活,你甚至可以同时处理多个 Item 。

选定一种方式后,你可能还要配置 PinchArea.pinch 属性,给不同的参数设置合理的值,比方说最大可以放大到多少倍。scale、angle等属性此时就发挥巨大作用了!

© 著作权归作者所有

eightfingerdhuta
粉丝 3
博文 12
码字总数 13021
作品 0
卢湾
私信 提问
QML手势相关的实验模块:Qt.labs.gestures模块介绍

1、QtQuick 1 vs QtQuick2 二者还是有很大区别的,无论从模块重组还是从底层实现,均需注意。下面是两个官方文档给出的差别说明及列表: 差别说明 差别列表 2、Qt.labs.gestures 虽然没有正式...

eightfingerdhuta
2014/07/29
941
0
Ubuntu多点触摸系统--uTouch

Canonical宣布了uTouch 1.0,这是一个多点触摸系统,将集成到Ubuntu 10.10中,Canonical已建立了多点触摸手势识别和API。这些组件将为开发者提供帮助,建立可以响应用户手势识别的应用。 Ca...

匿名
2010/08/18
3.7K
0
Ubuntu 10.10 支持多点触摸

Ubuntu 10.10多点触摸支持 Canonical宣布了uTouch 1.0的发布。uTouch 1.0是一个多点触摸/手势栈,将被移用于即将上线的10.10发行当中。“在Ubuntu 10.10(代号Maverick Meerkat)当中,用户和...

xyxzfj
2010/08/17
1K
1
Android笔记:触摸事件的分析与总结----多点触控

其他相关博文: Android笔记:触摸事件的分析与总结----MotionEvent对象 Android笔记:触摸事件的分析与总结----TouchEvent处理机制 Android笔记:触摸事件的分析与总结----多点触控 一、多点触...

glblong
2014/10/29
0
0
让 Linux 支持多点触摸手势--Touchegg

Touchegg 可以为 Linux 提供类似于 MacOSX 的多点触摸手势功能,当然前提是你必须拥有一块 Apple Magic Trackpad 之类的多点触摸设备。Touchegg 采用 C++, QT 及 Ubuntu 的 uTouch-geis 库编...

匿名
2011/03/15
2.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
6
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部