# Zjbcool-virtual-joystick
这类拼图用于为移动设备创建虚拟摇杆控制器。
# load script
load script拼图用于加载nipplejs.js (opens new window)库,需要在Init选项卡执行。
或者,在.html文件中,使用<script>
标签引入脚本。
<script src='./nipplejs.min.js'><script>
1
# create joystick
用于为移动设备创建虚拟摇杆控制器,最多5个实例(由id控制)。
初始选项:
- id - 摇杆实例的id(0-4)
- to - 将摇杆添加到body或container,默认body
- mode - 摇杆类型:静态、动态和折中3种(static,dynamic,semi),默认静态类型
- position - 摇杆的位置,默认位于右下角。支持CSS方式输入,如
100px
25%
2rem
等 - size - 摇杆的大小,默认100
- color - 摇杆的颜色,默认天蓝色,支持CSS方式输入,如
skyblue
#ff0000
还可以通过set joystick prop设置更多选项。
修改样式:
虚拟摇杆的样式可以通过.back .front类来修改,默认样式如下:
.back {
position: absolute;
display: block;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background: #f00;
opacity: 0.5;
border-radius: 50%;
}
.front {
width: 50px;
height: 50px;
position: absolute;
display: block;
margin-left: -25px;
margin-top: -25px;
background: #f00;
opacity: 0.5;
border-radius: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# set joystick prop
配置虚拟摇杆的其它选项。
以下配置都是可选项:
- threshold - 触发定向事件所需的强度,默认值0.1。中心是0,外部是1。至少需要滑动0.1才能触发定向事件。
- fade time - 激活或取消激活摇杆时淡出和淡入所花费的时间。默认250
- mulitytouch - 启用多点触控功能,默认关闭。当需要在同一区域内有多个摇杆时开启此功能。注意,在静态和折中模式下,该功能处于关闭状态。
- max num of nipples - 在开启多点触控时,用于控制可以创建的最大摇杆数量,默认为1
- data only - 不创建图形界面,只触发事件和返回数据,默认关闭
- rest joystick - 进入静止状态时重置摇杆的位置,默认开启
- rest opacity - 当摇杆处于静止状态时的不透明度,默认0.5
- catch distance - 默认200。仅在折中模式下启用,确保触摸区域距前一个摇杆200px之外,如果不是,则它将看作静态摇杆
- lockX - 锁定X轴,默认否
- lockY - 锁定Y轴,默认否
- shap - 摇杆形状,圆形和方形可先,默认圆形
- dynamic page - 如果页面具有动态显示的元素(例如Vue,React,Angular或仅用CSS控制显示/隐藏DOM),则启用。默认关闭
# joystick event
虚拟摇杆事件,当按下时执行on start下面的拼图,当滑动时执行on move下面的拼图,滑动时会返回一组实时数据,通过get data拼图获取;当抬起时执行on end下面的拼图。id参数用于指定是哪一个摇杆。
# get data
该拼图用于返回joystick event拼图on move插槽下的实时数据,该拼图需要在这个插槽下运行。
打印get data到控制台,输出结果:
angle: {radian: 1.9853032013796823, degree: 113.74949449286675}
direction: {x: "left", y: "up", angle: "up"}
distance: 27.313000567495326
force: 0.5462600113499065
identifier: 1
instance: {el: div#nipple_0_0.nipple.collection_0, on: ƒ, off: ƒ, show: ƒ, hide: ƒ, …}
lockX: false
lockY: false
position: {x: 1149, y: 844}
pressure: 0.5
raw: {distance: 27.313000567495326, position: {…}}
vector: {x: -0.22, y: 0.5}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
该拼图返回一组字典类型的数据,可通过Dictionaries字典分类的拼图获取需要的数据项。例如,要获取direction中的angle,可使用以下拼图:
# remove joystick
删除虚拟摇杆,并取消绑定的事件。id用于指定要删除的摇杆。
# 更新日志
# 20210222 v 1.2
- 该拼图分类更名为Virtual Joystick
- 为create joystick拼图实现高级选项,隐藏部分不常用的参数
- 移除重力感应拼图
# 20201218 v 1.1
- 重力感应功能支持 IOS 13+ safari浏览器;
- 移除
create gyro拼图。
# 20201121 v 1.0
发布第1个版本。