# Zjbcool-virtual-joystick
这类拼图用于为移动设备创建虚拟摇杆控制器。
EN
virtual joystick controller for mobile devices.
# load script
load script拼图用于加载nipplejs.js (opens new window)，当脚本加载完成后，在do插槽中创建和控制虚拟摇杆。
或者，在.html文件中，使用<script>标签引入脚本。
<script src='https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js'><script>
1
# 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），则启用。默认关闭
- follow - 如果当触控位置到达控制器边缘时，控制器会跟随触控。默认关闭
EN
- threshold - defaults to 0.1 This is the strength needed to trigger a directional event. Basically, the center is 0 and the outer is 1. You need to at least go to 0.1 to trigger a directional event.
- fade time - defaults to 250 The time it takes for joystick to fade-out and fade-in when activated or de-activated.
- mulitytouch - defaults to false Enable the multitouch capabilities. If, for reasons, you need to have multiple nipples in the same zone. Otherwise, it will only get one, and all new touches won't do a thing. Please note that multitouch is off when in static or semi modes.
- max num of nipples - defaults to 1 If you need to, you can also control the maximum number of instances that could be created. Obviously in a multitouch configuration.
- data only - defaults to false The library won't draw anything in the DOM and will only trigger events with data.
- rest joystick - defaults to true Reset the joystick's position when it enters the rest state.
- rest opacity - defaults to 0.5 The opacity to apply when the joystick is in a rest position.
- catch distance - defaults to 200 This is only useful in the semi mode, and determine at which distance we recycle the previous joystick. At 200 (px), if you press the zone into a rayon of 200px around the previously displayed joystick, it will act as a static one.
- lockX - defaults to false Locks joystick's movement to the x (horizontal) axis
- lockY - defaults to false Locks joystick's movement to the y (vertical) axis
- shap - defaults to 'circle'
The shape of region within which joystick can move.
- 'circle' Creates circle region for joystick movement
- 'square' Creates square region for joystick movement
- dynamic page - defaults to false Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM.
- follow - defaults to false Makes the joystick follow the thumbstick when it reaches the border.
# create joystick
创建虚拟摇杆控制器。
初始选项：
- to - 将摇杆添加到body或container，默认body
- mode - 摇杆类型：静态、动态和折中3种（static,dynamic,semi），默认静态类型
- position - 摇杆位置，窗口的4个角
- size - 摇杆的大小，默认100
- color - 摇杆的颜色，默认天蓝色，支持CSS方式输入，如
skyblue#ff0000 - extra option - 其它配置选项，字典（对象）类型，可以通过set joystick prop拼图设置，默认为空
- id - 摇杆实例的id（0-4）
# set joystick background
设置摇杆元素的背景。值可以是CSS格式的图片和颜色。
EN
The background of your joystick's elements. Can be any valid CSS image and color.
# set joystick opacity
设置摇杆元素的不透明度。默认为0.5。
EN
The opacity of your joystick's elements. defaults to 0.5.
# 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用于指定要删除的摇杆。
