# Zjbcool-virtual-joystick

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

mark

load script
create joystick
set joystick prop
joystick event
get data
remove joystick
更新日志

# load script

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

mark

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

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

# create joystick

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

mark

初始选项：

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

# 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}