Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
f0ca6a2c
D
Docs
项目概览
OpenHarmony
/
Docs
接近 2 年 前同步成功
通知
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看板
未验证
提交
f0ca6a2c
编写于
9月 27, 2022
作者:
O
openharmony_ci
提交者:
Gitee
9月 27, 2022
浏览文件
操作
浏览文件
下载
差异文件
!10032 示例代码整改1
Merge pull request !10032 from luoying_ace/master
上级
137f21b9
cb9764f3
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
235 addition
and
139 deletion
+235
-139
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
.../reference/arkui-ts/ts-basic-gestures-longpressgesture.md
+23
-16
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
...on-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+34
-15
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
...-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
+27
-13
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
...v/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
+21
-12
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
...-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
+22
-19
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
...on-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
+18
-13
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
...pplication-dev/reference/arkui-ts/ts-combined-gestures.md
+46
-29
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-basic-gestures-longpressgesture.md
浏览文件 @
f0ca6a2c
# LongPressGesture
用于触发长按手势事件,触发长按手势的最少手指数为1,最短时间为500毫秒。
用于触发长按手势事件,触发长按手势的最少手指数为1,最短
长按
时间为500毫秒。
> **说明:**
>
...
...
@@ -36,24 +36,31 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
@
Entry
@
Component
struct
LongPressGestureExample
{
@
State
count
:
number
=
0
@
State
count
:
number
=
0
;
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
'
LongPress onAction:
'
+
this
.
count
)
Column
()
{
Text
(
'
LongPress onAction:
'
+
this
.
count
).
fontSize
(
28
)
// 单指长按文本触发该手势事件
.
gesture
(
LongPressGesture
({
repeat
:
true
})
// 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms)
.
onAction
((
event
:
GestureEvent
)
=>
{
if
(
event
.
repeat
)
{
this
.
count
++
;
}
})
// 长按动作一结束触发
.
onActionEnd
(()
=>
{
this
.
count
=
0
;
})
)
}
.
height
(
200
).
width
(
300
).
padding
(
60
).
border
({
width
:
1
}).
margin
(
30
)
.
gesture
(
LongPressGesture
({
repeat
:
true
})
// 长按动作存在会连续触发
.
onAction
((
event
:
GestureEvent
)
=>
{
if
(
event
.
repeat
)
{
this
.
count
++
}
})
// 长按动作一结束触发
.
onActionEnd
(()
=>
{
this
.
count
=
0
})
)
.
height
(
200
)
.
width
(
300
)
.
padding
(
20
)
.
border
({
width
:
3
})
.
margin
(
30
)
}
}
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @
f0ca6a2c
...
...
@@ -17,7 +17,7 @@ PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: numb
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发拖动的最少手指数,最小为1指,
最大取值为10指。
<br/>
默认值:1 |
| direction | PanDirection | 否 | 触发拖动的手势方向,此枚举值支持逻辑与(
&
)和逻辑或(
\|
)运算。
<br/>
默认值:PanDirection.All |
| distance | number | 否 | 最小拖动识别距离,单位为vp。
<br/>
默认值:5
.0
<br/>
**说明:**
<br/>
> tab滑动与该拖动手势事件同时存在时,可将distance值设为1,使拖动更灵敏,避免造成事件错乱。 |
| distance | number | 否 | 最小拖动识别距离,单位为vp。
<br/>
默认值:5
<br/>
**说明:**
<br/>
> tab滑动与该拖动手势事件同时存在时,可将distance值设为1,使拖动更灵敏,避免造成事件错乱。 |
## PanDirection枚举说明
...
...
@@ -73,28 +73,47 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
@
Entry
@
Component
struct
PanGestureExample
{
@
State
offsetX
:
number
=
0
@
State
offsetY
:
number
=
0
@
State
offsetX
:
number
=
0
;
@
State
offsetY
:
number
=
0
;
@
State
positionX
:
number
=
0
;
@
State
positionY
:
number
=
0
;
private
panOption
:
PanGestureOptions
=
new
PanGestureOptions
({
direction
:
PanDirection
.
Left
|
PanDirection
.
Right
});
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
'
PanGesture offset:
\n
X:
'
+
this
.
offsetX
+
'
\n
'
+
'
Y:
'
+
this
.
offsetY
)
}
.
height
(
100
).
width
(
200
).
padding
(
20
).
border
({
width
:
1
}).
margin
(
80
)
.
translate
({
x
:
this
.
offsetX
,
y
:
this
.
offsetY
,
z
:
5
})
.
gesture
(
PanGesture
({})
Column
()
{
Column
()
{
Text
(
'
PanGesture offset:
\n
X:
'
+
this
.
offsetX
+
'
\n
'
+
'
Y:
'
+
this
.
offsetY
)
}
.
height
(
200
)
.
width
(
300
)
.
padding
(
20
)
.
border
({
width
:
3
})
.
margin
(
50
)
.
translate
({
x
:
this
.
offsetX
,
y
:
this
.
offsetY
,
z
:
0
})
// 左右拖动触发该手势事件
.
gesture
(
PanGesture
(
this
.
panOption
)
.
onActionStart
((
event
:
GestureEvent
)
=>
{
console
.
info
(
'
Pan start
'
)
console
.
info
(
'
Pan start
'
)
;
})
.
onActionUpdate
((
event
:
GestureEvent
)
=>
{
this
.
offsetX
=
event
.
offsetX
this
.
offsetY
=
event
.
offsetY
this
.
offsetX
=
this
.
positionX
+
event
.
offsetX
;
this
.
offsetY
=
this
.
positionY
+
event
.
offsetY
;
})
.
onActionEnd
(()
=>
{
console
.
info
(
'
Pan end
'
)
this
.
positionX
=
this
.
offsetX
;
this
.
positionY
=
this
.
offsetY
;
console
.
info
(
'
Pan end
'
);
})
)
Button
(
'
修改PanGesture触发条件
'
)
.
onClick
(()
=>
{
// 将PanGesture手势事件触发条件改为双指以任意方向拖动
this
.
panOption
.
setDirection
(
PanDirection
.
All
);
this
.
panOption
.
setFingers
(
2
);
})
)
}
}
}
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @
f0ca6a2c
...
...
@@ -16,7 +16,7 @@ PinchGesture(value?: { fingers?: number, distance?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发捏合的最少手指数,
最小为2指,最大为5指。
<br/>
默认值:2 |
| distance | number | 否 | 最小识别距离,单位为vp。
<br/>
默认值:3
.0
|
| distance | number | 否 | 最小识别距离,单位为vp。
<br/>
默认值:3 |
## 事件
...
...
@@ -36,26 +36,40 @@ PinchGesture(value?: { fingers?: number, distance?: number })
@
Entry
@
Component
struct
PinchGestureExample
{
@
State
scaleValue
:
number
=
1
@
State
scaleValue
:
number
=
1
;
@
State
pinchValue
:
number
=
1
;
@
State
pinchX
:
number
=
0
;
@
State
pinchY
:
number
=
0
;
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
'
PinchGesture scale:
'
+
this
.
scaleValue
)
}
.
height
(
100
).
width
(
200
).
padding
(
20
).
border
({
width
:
1
}).
margin
(
80
)
.
scale
({
x
:
this
.
scaleValue
,
y
:
this
.
scaleValue
,
z
:
this
.
scaleValue
})
.
gesture
(
PinchGesture
()
Column
()
{
Column
()
{
Text
(
'
PinchGesture scale:
\n
'
+
this
.
scaleValue
)
Text
(
'
PinchGesture center:
\n
(
'
+
this
.
pinchX
+
'
,
'
+
this
.
pinchY
+
'
)
'
)
}
.
height
(
200
)
.
width
(
300
)
.
padding
(
20
)
.
border
({
width
:
3
})
.
margin
({
top
:
100
})
.
scale
({
x
:
this
.
scaleValue
,
y
:
this
.
scaleValue
,
z
:
1
})
// 三指捏合触发该手势事件
.
gesture
(
PinchGesture
({
fingers
:
3
})
.
onActionStart
((
event
:
GestureEvent
)
=>
{
console
.
info
(
'
Pinch start
'
)
console
.
info
(
'
Pinch start
'
)
;
})
.
onActionUpdate
((
event
:
GestureEvent
)
=>
{
this
.
scaleValue
=
event
.
scale
this
.
scaleValue
=
this
.
pinchValue
*
event
.
scale
;
this
.
pinchX
=
event
.
pinchCenterX
;
this
.
pinchY
=
event
.
pinchCenterY
;
})
.
onActionEnd
(()
=>
{
console
.
info
(
'
Pinch end
'
)
this
.
pinchValue
=
this
.
scaleValue
;
console
.
info
(
'
Pinch end
'
);
})
)
)
}.
width
(
'
100%
'
)
}
}
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @
f0ca6a2c
...
...
@@ -16,7 +16,7 @@ RotationGesture(value?: { fingers?: number, angle?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发旋转的最少手指数,
最小为2指,最大为5指。
<br/>
默认值:2 |
| angle | number | 否 | 触发旋转手势的最小改变度数,单位为deg。
<br/>
默认值:1
.0
|
| angle | number | 否 | 触发旋转手势的最小改变度数,单位为deg。
<br/>
默认值:1 |
## 事件
...
...
@@ -36,26 +36,35 @@ RotationGesture(value?: { fingers?: number, angle?: number })
@
Entry
@
Component
struct
RotationGestureExample
{
@
State
angle
:
number
=
0
@
State
angle
:
number
=
0
;
@
State
rotateValue
:
number
=
0
;
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
'
RotationGesture angle:
'
+
this
.
angle
)
}
.
height
(
100
).
width
(
200
).
padding
(
20
).
border
({
width
:
1
})
.
margin
(
80
).
rotate
({
x
:
1
,
y
:
2
,
z
:
3
,
angle
:
this
.
angle
})
.
gesture
(
Column
()
{
Column
()
{
Text
(
'
RotationGesture angle:
'
+
this
.
angle
)
}
.
height
(
200
)
.
width
(
300
)
.
padding
(
20
)
.
border
({
width
:
3
})
.
margin
(
80
)
.
rotate
({
angle
:
this
.
angle
})
// 双指旋转触发该手势事件
.
gesture
(
RotationGesture
()
.
onActionStart
((
event
:
GestureEvent
)
=>
{
console
.
log
(
'
Rotation start
'
)
console
.
info
(
'
Rotation start
'
);
})
.
onActionUpdate
((
event
:
GestureEvent
)
=>
{
this
.
angle
=
event
.
angle
this
.
angle
=
this
.
rotateValue
+
event
.
angle
;
})
.
onActionEnd
(()
=>
{
console
.
log
(
'
Rotation end
'
)
this
.
rotateValue
=
this
.
angle
;
console
.
info
(
'
Rotation end
'
);
})
)
)
}.
width
(
'
100%
'
)
}
}
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @
f0ca6a2c
# SwipeGesture
用于触发滑动事件,滑动
最小速度为100vp/s时
识别成功。
用于触发滑动事件,滑动
速度大于100vp/s时可
识别成功。
> **说明:**
>
...
...
@@ -24,8 +24,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| Horizontal | 水平方向
,手指滑动方向与x轴夹角小于45度时触发
。 |
| Vertical | 竖直方向
,手指滑动方向与y轴夹角小于45度时触发
。 |
| None | 任何方向均不可触发。 |
...
...
@@ -35,7 +35,6 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
| -------- | -------- |
| onAction(event:(event?:
[GestureEvent](ts-gesture-settings.md#gestureevent对象说明))
=
>
void) | 滑动手势识别成功回调。 |

## 示例
```
ts
...
...
@@ -43,25 +42,29 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
@
Entry
@
Component
struct
SwipeGestureExample
{
@
State
rotateAngle
:
number
=
0
@
State
speed
:
number
=
1
@
State
rotateAngle
:
number
=
0
;
@
State
speed
:
number
=
1
;
build
()
{
Column
()
{
Text
(
"
SwipGesture speed :
"
+
this
.
speed
)
Text
(
"
SwipGesture angle :
"
+
this
.
rotateAngle
)
}
.
position
({
x
:
80
,
y
:
200
})
.
border
({
width
:
2
})
.
width
(
260
).
height
(
260
)
.
rotate
({
x
:
0
,
y
:
0
,
z
:
1
,
angle
:
this
.
rotateAngle
})
.
gesture
(
SwipeGesture
({
fingers
:
1
,
direction
:
SwipeDirection
.
Vertical
})
Column
()
{
Text
(
"
SwipeGesture speed
\n
"
+
this
.
speed
)
Text
(
"
SwipeGesture angle
\n
"
+
this
.
rotateAngle
)
}
.
border
({
width
:
3
})
.
width
(
300
)
.
height
(
200
)
.
margin
(
100
)
.
rotate
({
angle
:
this
.
rotateAngle
})
// 单指竖直方向滑动时触发该事件
.
gesture
(
SwipeGesture
({
direction
:
SwipeDirection
.
Vertical
})
.
onAction
((
event
:
GestureEvent
)
=>
{
this
.
speed
=
event
.
speed
this
.
rotateAngle
=
event
.
angle
})
)
this
.
speed
=
event
.
speed
;
this
.
rotateAngle
=
event
.
angle
;
})
)
}.
width
(
'
100%
'
)
}
}
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @
f0ca6a2c
# TapGesture
支持单次
点击、
多次点击识别。
支持单次
或
多次点击识别。
> **说明:**
>
...
...
@@ -15,8 +15,8 @@ TapGesture(value?: { count?: number, fingers?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| count | number | 否 | 识别的连续点击次数。如果设置小于1,会被转化为默认值。
<br/>
默认值:1
<br/>
>
**说明:**
<br/>
>
如配置多击,上一次抬起和下一次按下的超时时间为300毫秒
(ms)
。 |
| fingers | number | 否 | 触发点击的
最少手指数,最小为1指,
最大为10指。
<br/>
默认值:1
<br/>
>
**说明:**
<br/>
>
1.
当配置多指时,第一根手指按下后300毫秒(ms)
内未有足够的手指数按下,手势识别失败。
<br/>
>
2.
实际点击手指数超过配置值,手势识别失败。 |
| count | number | 否 | 识别的连续点击次数。如果设置小于1,会被转化为默认值。
<br/>
默认值:1
<br/>
>
**说明:**
<br/>
>
如配置多击,上一次抬起和下一次按下的超时时间为300毫秒。 |
| fingers | number | 否 | 触发点击的
手指数,最小为1指,
最大为10指。
<br/>
默认值:1
<br/>
>
**说明:**
<br/>
>
1.
当配置多指时,第一根手指按下后300毫秒
内未有足够的手指数按下,手势识别失败。
<br/>
>
2.
实际点击手指数超过配置值,手势识别失败。 |
## 事件
...
...
@@ -33,20 +33,25 @@ TapGesture(value?: { count?: number, fingers?: number })
@
Entry
@
Component
struct
TapGestureExample
{
@
State
value
:
string
=
''
@
State
value
:
string
=
''
;
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
'
Click twice
'
)
Column
()
{
// 单指双击文本触发手势事件
Text
(
'
Click twice
'
).
fontSize
(
28
)
.
gesture
(
TapGesture
({
count
:
2
})
.
onAction
((
event
:
GestureEvent
)
=>
{
this
.
value
=
JSON
.
stringify
(
event
.
fingerList
[
0
]);
})
)
Text
(
this
.
value
)
}
.
height
(
200
).
width
(
300
).
padding
(
60
).
border
({
width
:
1
}).
margin
(
30
)
.
gesture
(
TapGesture
({
count
:
2
})
.
onAction
(()
=>
{
this
.
value
=
'
TapGesture onAction
'
})
)
.
height
(
200
)
.
width
(
300
)
.
padding
(
20
)
.
border
({
width
:
3
})
.
margin
(
30
)
}
}
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @
f0ca6a2c
# 组合手势
手势识别组
,
多种手势组合为复合手势,支持连续识别、并行识别和互斥识别。
手势识别组
合,即
多种手势组合为复合手势,支持连续识别、并行识别和互斥识别。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
...
...
@@ -38,39 +39,55 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
@
Entry
@
Component
struct
GestureGroupExample
{
@
State
count
:
number
=
0
@
State
offsetX
:
number
=
0
@
State
offsetY
:
number
=
0
@
State
borderStyles
:
BorderStyle
=
BorderStyle
.
Solid
@
State
count
:
number
=
0
;
@
State
offsetX
:
number
=
0
;
@
State
offsetY
:
number
=
0
;
@
State
positionX
:
number
=
0
;
@
State
positionY
:
number
=
0
;
@
State
borderStyles
:
BorderStyle
=
BorderStyle
.
Solid
;
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
}
)
{
Column
(
)
{
Text
(
'
sequence gesture
\n
'
+
'
LongPress onAction:
'
+
this
.
count
+
'
\n
PanGesture offset:
\n
X:
'
+
this
.
offsetX
+
'
\n
'
+
'
Y:
'
+
this
.
offsetY
)
}.
translate
({
x
:
this
.
offsetX
,
y
:
this
.
offsetY
,
z
:
5
})
.
height
(
100
).
width
(
200
).
padding
(
10
).
margin
(
80
).
border
({
width
:
1
,
style
:
this
.
borderStyles
})
}
.
translate
({
x
:
this
.
offsetX
,
y
:
this
.
offsetY
,
z
:
0
})
.
height
(
150
)
.
width
(
200
)
.
padding
(
20
)
.
margin
(
20
)
.
border
({
width
:
3
,
style
:
this
.
borderStyles
})
.
gesture
(
GestureGroup
(
GestureMode
.
Sequence
,
LongPressGesture
({
repeat
:
true
})
.
onAction
((
event
:
GestureEvent
)
=>
{
if
(
event
.
repeat
)
{
this
.
count
++
}
console
.
log
(
'
LongPress onAction
'
)
})
.
onActionEnd
(()
=>
{
console
.
log
(
'
LongPress end
'
)
}),
PanGesture
({})
.
onActionStart
(()
=>
{
this
.
borderStyles
=
BorderStyle
.
Dashed
console
.
log
(
'
pan start
'
)
})
.
onActionUpdate
((
event
:
GestureEvent
)
=>
{
this
.
offsetX
=
event
.
offsetX
this
.
offsetY
=
event
.
offsetY
console
.
log
(
'
pan update
'
)
})
)
//以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup
(
GestureMode
.
Sequence
,
LongPressGesture
({
repeat
:
true
})
.
onAction
((
event
:
GestureEvent
)
=>
{
if
(
event
.
repeat
)
{
this
.
count
++
;
}
console
.
info
(
'
LongPress onAction
'
);
})
.
onActionEnd
(()
=>
{
console
.
info
(
'
LongPress end
'
);
}),
PanGesture
()
.
onActionStart
(()
=>
{
this
.
borderStyles
=
BorderStyle
.
Dashed
;
console
.
info
(
'
pan start
'
);
})
.
onActionUpdate
((
event
:
GestureEvent
)
=>
{
this
.
offsetX
=
this
.
positionX
+
event
.
offsetX
;
this
.
offsetY
=
this
.
positionY
+
event
.
offsetY
;
console
.
info
(
'
pan update
'
);
})
.
onActionEnd
(()
=>
{
this
.
positionX
=
this
.
offsetX
;
this
.
positionY
=
this
.
offsetY
;
this
.
borderStyles
=
BorderStyle
.
Solid
;
console
.
info
(
'
pan end
'
);
})
)
.
onCancel
(()
=>
{
console
.
log
(
'
sequence gesture canceled
'
)
console
.
info
(
'
sequence gesture canceled
'
);
})
)
}
...
...
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @
f0ca6a2c
...
...
@@ -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
)
}
}
}
```

编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录