Управление с помощью ngxJoystick на основе соска JS не реагирует на взаимодействие с сенсорным мобильным устройством - PullRequest
0 голосов
/ 29 апреля 2020

Я использую джойстик 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 */
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...