Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
fc8a0a92
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
fc8a0a92
编写于
9月 27, 2022
作者:
L
luoying_ace
提交者:
Gitee
9月 27, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
35778617
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
44 addition
and
22 deletion
+44
-22
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
...application-dev/reference/arkui-ts/ts-gesture-settings.md
+44
-22
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @
fc8a0a92
...
...
@@ -3,15 +3,14 @@
为组件绑定不同类型的手势事件,并设置事件的响应方法。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 绑定手势识别
通过如下属性给组件绑定手势识别,手势识别成功后可以通过事件回调通知组件。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| gesture | gesture:
[GestureType](#gesturetype),
<br/>
mask?:
[
GestureMask
](
#gesturemask枚举说明
)
| gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定手势。
<br/>
- gesture:
绑定的手势类型,
<br>
- mask:
事件响应设置。 |
...
...
@@ -37,10 +36,9 @@
| Normal | 不屏蔽子组件的手势,按照默认手势识别顺序进行识别。 |
| IgnoreInternal | 屏蔽子组件的手势,仅当前容器的手势进行识别。
<br/>
子组件上系统内置的手势不会被屏蔽,如子组件为List组件时,内置的滑动手势仍然会触发。 |
## 响应手势事件
组件通过手势事件绑定不同GestureType的手势对象,各手势对象
提供的事件响应手势操作,提供手势相关信息。下面通过TapGesture
对象的onAction事件响应点击事件,获取事件相关信息。其余手势对象的事件定义见各个手势对象章节。
组件通过手势事件绑定不同GestureType的手势对象,各手势对象
在响应手势操作的事件回调中提供手势相关信息。下面通过TapGesture手势
对象的onAction事件响应点击事件,获取事件相关信息。其余手势对象的事件定义见各个手势对象章节。
-
TapGesture事件说明
| 名称 | 功能描述 |
...
...
@@ -50,18 +48,18 @@
## GestureEvent对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md#eventtarget8对象说明
)
| 触发手势事件的元素对象显示区域。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
#sourcetype枚举说明
)
| 事件输入设备。 |
| repeat | boolean | 是否为重复触发事件,用于LongPressGesture手势触发场景。 |
| fingerList
<sup>
8+
</sup>
|
[
FingerInfo
](
#fingerinfo对象说明
)[]
| 触发事件的所有手指信息,用于LongPressGesture与TapGesture手势触发场景。 |
| offsetX | number | 手势事件x轴相对偏移量,单位为vp,用于PanGesture手势触发场景,从左向右滑动offsetX为正,反之为负。 |
| offsetY | number | 手势事件y轴相对偏移量,单位为vp,用于PanGesture手势触发场景,从上向下滑动offsetY为正,反之为负。 |
| angle | number | 用于RotationGesture手势触发场景时,表示旋转角度;用于SwipeGesture手势触发场景时,表示滑动手势的角度,即两根手指间的线段与水平方向的夹角变化的度数。
<br/>
>
**说明:**
<br/>
>
角度计算方式:滑动手势被识别到后,连接两根手指之间的线被识别为起始线条,随着手指的滑动,手指之间的线条会发生旋转,根据起始线条两端点和当前线条两端点的坐标,使用反正切函数分别计算其相对于水平方向的夹角,最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系,顺时针旋转为0到180度,逆时针旋转为-180到0度。 |
| speed
<sup>
8+
</sup>
| number | 滑动手势速度,即所有手指滑动的平均速度,单位为vp/秒,用于SwipeGesture手势触发场景。 |
| angle | number | 用于RotationGesture手势触发场景时,表示旋转角度。
<br/>
用于SwipeGesture手势触发场景时,表示滑动手势的角度,即两根手指间的线段与水平方向的夹角变化的度数。
<br/>
>
**说明:**
<br/>
>
角度计算方式:滑动手势被识别到后,连接两根手指之间的线被识别为起始线条,随着手指的滑动,手指之间的线条会发生旋转,根据起始线条两端点和当前线条两端点的坐标,使用反正切函数分别计算其相对于水平方向的夹角,最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系,顺时针旋转为0到180度,逆时针旋转为-180到0度。 |
| scale | number | 缩放比例,用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点相对于当前组件元素左上角x轴坐标,单位为vp,用于PinchGesture手势触发场景。 |
| pinchCenterY | number | 捏合手势中心点相对于当前组件元素左上角y轴坐标,单位为vp,用于PinchGesture手势触发场景。 |
| speed
<sup>
8+
</sup>
| number | 滑动手势速度,即所有手指滑动的平均速度,单位为vp/秒,用于SwipeGesture手势触发场景。 |
| fingerList
<sup>
8+
</sup>
|
[
FingerInfo
](
#fingerinfo对象说明
)[]
| 触发事件的所有手指信息,用于LongPressGesture与TapGesture手势触发场景。 |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md#eventtarget8对象说明
)
| 触发手势事件的元素对象显示区域。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
#sourcetype枚举说明
)
| 事件输入设备。 |
## SourceType枚举说明
| 名称 | 描述 |
...
...
@@ -87,30 +85,54 @@
@
Entry
@
Component
struct
GestureSettingsExample
{
@
State
value
:
string
=
''
@
State
priorityTestValue
:
string
=
''
;
@
State
parallelTestValue
:
string
=
''
;
build
()
{
Column
(){
Column
()
{
Column
()
{
Text
(
'
Click
\n
'
+
this
.
value
)
Text
(
'
TapGesture:
'
+
this
.
priorityTestValue
).
fontSize
(
28
)
.
gesture
(
TapGesture
()
.
onAction
(()
=>
{
this
.
value
=
'
gesture onAction
'
this
.
priorityTestValue
+=
'
\n
Text
'
;
}))
}.
height
(
200
).
width
(
300
).
padding
(
60
).
border
({
width
:
1
})
//设置为priorityGesture时,会优先识别该绑定手势忽略内部gesture手势
}
.
height
(
200
)
.
width
(
250
)
.
padding
(
20
)
.
margin
(
20
)
.
border
({
width
:
3
})
// 设置为priorityGesture时,点击文本会忽略Text组件的TapGesture手势事件,优先识别父组件Column的TapGesture手势事件
.
priorityGesture
(
TapGesture
()
.
onAction
((
event
:
GestureEvent
)
=>
{
this
.
value
=
'
priorityGesture onAction
'
+
'
\n
component globalPos:(
'
+
event
.
target
.
area
.
globalPosition
.
x
+
'
,
'
+
event
.
target
.
area
.
globalPosition
.
y
+
'
)
\n
width:
'
+
event
.
target
.
area
.
width
+
'
\n
height:
'
+
event
.
target
.
area
.
height
}),
GestureMask
.
IgnoreInternal
)
}.
padding
(
60
)
this
.
priorityTestValue
+=
'
\n
Column
'
;
}),
GestureMask
.
IgnoreInternal
)
Column
()
{
Text
(
'
TapGesture:
'
+
this
.
parallelTestValue
).
fontSize
(
28
)
.
gesture
(
TapGesture
()
.
onAction
(()
=>
{
this
.
parallelTestValue
+=
'
\n
Text
'
;
}))
}
.
height
(
200
)
.
width
(
250
)
.
padding
(
20
)
.
margin
(
20
)
.
border
({
width
:
3
})
// 设置为parallelGesture时,点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件
.
parallelGesture
(
TapGesture
()
.
onAction
((
event
:
GestureEvent
)
=>
{
this
.
parallelTestValue
+=
'
\n
Column
'
;
}),
GestureMask
.
Normal
)
}
}
}
```
![
zh-cn_image_0000001210195016
](
figures/zh-cn_image_0000001210195016.gif
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录