# Zjbcool-virtual-joystick

这类拼图用于为移动设备创建虚拟摇杆控制器。

mark

# load script

load script拼图用于加载nipplejs.js (opens new window)库,需要在Init选项卡执行。

mark

或者,在.html文件中,使用<script>标签引入脚本。

<script src='./nipplejs.min.js'><script>
1

# create joystick

用于为移动设备创建虚拟摇杆控制器,最多5个实例(由id控制)。

mark

初始选项:

  • id - 摇杆实例的id(0-4)
  • to - 将摇杆添加到bodycontainer,默认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

# set joystick prop

配置虚拟摇杆的其它选项。

mark

以下配置都是可选项:

  • 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参数用于指定是哪一个摇杆。

mark

# get data

该拼图用于返回joystick event拼图on move插槽下的实时数据,该拼图需要在这个插槽下运行。

mark

打印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

该拼图返回一组字典类型的数据,可通过Dictionaries字典分类的拼图获取需要的数据项。例如,要获取direction中的angle,可使用以下拼图:

mark

# remove joystick

删除虚拟摇杆,并取消绑定的事件。id用于指定要删除的摇杆。

mark

# 更新日志

# 20210222 v 1.2

  • 该拼图分类更名为Virtual Joystick
  • create joystick拼图实现高级选项,隐藏部分不常用的参数
  • 移除重力感应拼图

# 20201218 v 1.1

  • 重力感应功能支持 IOS 13+ safari浏览器;
  • 移除create gyro拼图。

# 20201121 v 1.0

发布第1个版本。

上次更新: 2021-2-28 19:32:34