Я использую джойстик NgxJoystick (https://github.com/wweitzel/ngx-joystick), джойстик на основе соска JS (https://github.com/yoannmoinet/nipplejs) для интеграции с мобильным телефоном Ioni c Angular приложение через Кордову.
Проблема в том, что управление вверх / вниз не работает напрямую с сенсорным взаимодействием, и пользователь должен провести пальцем влево / вправо, прежде чем джойстик будет разблокирован, и только тогда он может go вверх / вниз.
Что можно сделать, чтобы иметь возможность управлять джойстиком вверх / вниз без необходимости сначала go влево / вправо?
Вот HTML, показывающий ngx- Компонент джойстика:
<div class="joystick-ngx">
<div class="container noselect" *ngIf="init">
<div class="zone">
<ngx-joystick #staticJoystic [options]="staticOptions" (start)="onStartStatic($event)" (end)="onEndStatic($event)"
(move)="onMoveStatic($event)" (plainUp)="onPlainUpStatic($event)" (plainDown)="onPlainDownStatic($event)"
(plainLeft)="onPlainLeftStatic($event)" (plainRight)="onPlainRightStatic($event)">
</ngx-joystick>
</div>
</div>
</div>
Параметры определены в компоненте:
staticOptions: JoystickManagerOptions = {
mode: 'static',
position: { left: '50%', top: '50%' },
color: "#1e72a3",
size: 160
}
CSS для контейнера джойстика:
.joystick-ngx {
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.zone {
position: relative;
width: 160px;
height: 160px;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
}