空间缩放(Spatial Magnify)
概述
表示完成了一次对空间目标的双手「选择、激活、持续」动作,并产生缩放效果。无论这种交互是通过间接的「注视 + 捏合」完成,还是通过直接触摸完成。
触发条件
| 目标 | 触发时机 |
|---|---|
| 空间化 2D HTML 元素 | 在自身内容占据的 3D 空间位置被「捏住不放」后触发这套事件。 |
| 3D 容器元素 | 在自身可交互内容占据的 3D 空间位置被「捏住不放」后触发这套事件。 |
心智模型
双手之间的连线(相当于一个真实物体)可以在 3D 空间中做拉伸。
事件类型名称
| 阶段 | DOM 事件 |
|---|---|
| 缩放持续中 | spatialmagnify |
| 缩放结束 | spatialmagnifyend |
React 用法
| 阶段 | JSX 属性 |
|---|---|
| 缩放持续中 | onSpatialMagnify |
| 缩放结束 | onSpatialMagnifyEnd |
原生 DOM 用法
当前限制
WebSpatial SDK 现阶段不允许在 DOM 元素(包括来自 Ref 的元素)上直接监听空间事件。
事件生命周期
「选择」过程中不触发事件;捏住不放激活后,保持动作会持续触发 spatialmagnify,松开后触发 spatialmagnifyend。
SpatialMagnifyEvent 事件数据
| 字段 | 取值 | 含义 |
|---|---|---|
magnification | 百分比风格的数字,比如 1 表示 100%,1.5 表示 150%。 | 相对于初始状态的缩放量。 |
SpatialMagnifyEndEvent 事件数据
没有额外数据
spatialmagnifyend 回调拿到的 SpatialMagnifyEndEvent 对象没有额外属性。