Вопрос по javascript, keyboard, html5, canvas – Каков наилучший способ создания ключевых событий в холсте HTML5?

14

Пожалуйста, предложите лучший способ создания ключевых событий для холста HTML5. Я не предпочитаю какую-либо библиотеку, но если вы считаете, что это лучший способ, тогда ответьте. Заранее спасибо!

Вы просто хотите иметь возможность выполнять определенные функции при нажатии клавиши (например, "W")? Rhyono
Да или просто активировать оповещение. user1441816
Вы должны переименовать вопрос. Кажется, вы хотите создать не события, а EventHandler, который запускает действия, основанные на событиях (которые здесь все неявно описывают как генерируемые пользователем с помощью клавиатуры). tnarik
в моем игровом движке visual-js я реализую события, ориентированные на объекты холста. Где виртуальная клавиатура для приложения canvas:jsfiddle.net/zlatnaspirala/0u5j1ap8 Nikola Lukic

Ваш Ответ

4   ответа
0

Использование класса:

var CONTROL = MOBILE_CONTROL();

Посмотрите на этот класс:

function MOBILE_CONTROL (){

      this.X =  null;
      this.Y =  null;
      this.LAST_X_POSITION = null;
      this.LAST_Y_POSITION = null;
      this.MULTI_TOUCH = 'NO';
      this.MULTI_TOUCH_X1 = null;  
      this.MULTI_TOUCH_X2 = null;
      this.MULTI_TOUCH_X3 = null;
      this.MULTI_TOUCH_X4 = null;
      this.MULTI_TOUCH_X5 = null;
      this.MULTI_TOUCH_Y1 = null;
      this.MULTI_TOUCH_Y2 = null;
      this.MULTI_TOUCH_Y3 = null;
,      this.MULTI_TOUCH_Y4 = null;
      this.MULTI_TOUCH_Y5 = null;
      this.MULTI_TOUCH_X6 = null;  
      this.MULTI_TOUCH_X7 = null;
      this.MULTI_TOUCH_X8 = null;
      this.MULTI_TOUCH_X9 = null;
      this.MULTI_TOUCH_X10 = null;
      this.MULTI_TOUCH_Y6 = null;
      this.MULTI_TOUCH_Y7 = null;
      this.MULTI_TOUCH_Y8 = null;
      this.MULTI_TOUCH_Y9 = null;
      this.MULTI_TOUCH_Y10 = null;
      this.MULTI_TOUCH_INDEX = 1;
      this.SCREEN = [window.innerWidth , window.innerHeight]; 
      this.SCREEN.W = this.SCREEN[0];
      this.SCREEN.H = this.SCREEN[1];
      //Application general
      this.AUTOR = "Nikola Lukic";
      this.APPLICATION_NAME = "mobile multi touch , system plugin for visual js .";


    }

    var CONTROL = new MOBILE_CONTROL();


    document.addEventListener('touchstart', function(event) 
    { 

    if (CONTROL.MULTI_TOUCH == 'NO') {
        var touch = event.touches[0];
        CONTROL.X = touch.pageX;
        CONTROL.Y = touch.pageY;
        console.log('TOUCH START AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );

    }
    else if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(CONTROL.MULTI_TOUCH_INDEX)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y,7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
      CONTROL.MULTI_TOUCH_INDEX = CONTROL.MULTI_TOUCH_INDEX + 1;


      }
    }
    CONTROL.MULTI_TOUCH = 'YES';

    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener('touchmove', function(event) 
    { 
    var touch = event.touches[0];
    CONTROL.X = touch.pageX;
    CONTROL.Y = touch.pageY;
    console.log('TOUCH MOVE AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    //#############
     if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(i)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
    }}
    //#############
    event.preventDefault();
    },false);
    //////////////////////////////////////////////////////// 
    document.addEventListener('touchend', function(event) 
    { 
    CONTROL.LAST_X_POSITION = CONTROL.X;  
    CONTROL.LAST_Y_POSITION = CONTROL.Y; 
    CONTROL.MULTI_TOUCH = 'NO';
    CONTROL.MULTI_TOUCH_INDEX = 1;
    CONTROL.MULTI_TOUCH_X1 = null;
    CONTROL.MULTI_TOUCH_X2 = null;
    CONTROL.MULTI_TOUCH_X3 = null;
    CONTROL.MULTI_TOUCH_X4 = null;
    CONTROL.MULTI_TOUCH_X5 = null;
    CONTROL.MULTI_TOUCH_X6 = null;
    CONTROL.MULTI_TOUCH_X7 = null;
    CONTROL.MULTI_TOUCH_X8 = null;
    CONTROL.MULTI_TOUCH_X9 = null;
    CONTROL.MULTI_TOUCH_X10 = null;
    CONTROL.MULTI_TOUCH_Y1 = null;
    CONTROL.MULTI_TOUCH_Y2 = null;
    CONTROL.MULTI_TOUCH_Y3 = null;
    CONTROL.MULTI_TOUCH_Y4 = null;
    CONTROL.MULTI_TOUCH_Y5 = null;
    CONTROL.MULTI_TOUCH_Y6 = null;
    CONTROL.MULTI_TOUCH_Y7 = null;
    CONTROL.MULTI_TOUCH_Y8 = null;
    CONTROL.MULTI_TOUCH_Y9 = null;
    CONTROL.MULTI_TOUCH_Y10 = null;
    console.log('LAST TOUCH POSITION AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener("touchcancel", function(event) 
    { 
    console.log('BREAK - LAST TOUCH POSITION AT:(X' + CONTROL.X + '(,(' + CONTROL.Y + ')' );
    }, false);
    ////////////////////////////////////////////////////////
1

Я пишу игру Canvas и использую игру по умолчанию.addEventListener и сдвинуться черезevent.keyCodeс этим. Кроме того, я не слушаю ключевые события самого элемента Canvas, а просто устанавливаю слушателя в окно.

window.addEventListener('keyup',keyUpListener,false);
window.addEventListener('keydown',keyDownListener,false); 
Это хорошая идея для работы с событиями окна? Что если кто-то захочет сделать что-то вне вашей игры, но в том же окне, например написать комментарий?
Не могли бы вы активировать предупреждение со стрелкой вверх (38). Благодарю. user1441816
@ erikb85, в этом случае вам может потребоваться отключить прослушиватели событий, когда пользователь фокусируется на области ввода.
16

Это вернет код ключа:

<canvas id="myCanvas" width="200" height="100" style="background:green"></canvas>
<script type="text/javascript">
window.addEventListener('keydown',this.check,false);

function check(e) {
    alert(e.keyCode);
}
</script>

Если вы хотите, чтобы демонстрация различных действий выполнялась на основе ключа:

function check(e) {
    var code = e.keyCode;
    //Up arrow pressed
    if (code == 38)
        alert("You pressed the Up arrow key");
    else
        alert("You pressed some other key I don't really care about.");
}

Или, если у вас есть длинный список ключей, которые вы будете использовать, сделайте это в переключателе:

function check(e) {
    var code = e.keyCode;
    switch (code) {
        case 37: alert("Left"); break; //Left key
        case 38: alert("Up"); break; //Up key
        case 39: alert("Right"); break; //Right key
        case 40: alert("Down"); break; //Down key
        default: alert(code); //Everything else
    }
}
Хорошо, это то, что я ищу. большое спасибо вам. user1441816
Спасибо. Можете ли вы просто связать один ключ? Пример стрелка вверх. Извините новенький вопрос user1441816
Просто чтобы отметить, что обычно лучше использовать keyup, чем keydown - более стабильно.
То есть только слушать этот ключ? К сожалению нет. Лучшее, что вы можете сделать, - это проверить его код ключа, если код ключа соответствует 38: делать что угодно, если он не делает: ничего не делать.
Просто хочу прокомментировать, что если у вас несколько холстов, вам нужно будет привязать события к определенному холсту. Установка tabindex для элемента canvas позволяет ему принимать ключевые события, когда они сфокусированы.
8

Если вы хотите установить обработку ключевых событий на<canvas> сам (неwindow или жеdocument), установите tabindex на<canvas> элемент. Обратите внимание, что холст должен быть в фокусе, чтобы поймать ключевые события.

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>

Вот как это делается наProcessing.js Веб-сайт.

Если вы не хотите, чтобы при нажатии на холст появлялась граница, установите его стиль наoutline: none.

Как установить индекс вкладки?
@ncmathsadist от 'set' apos; Я имею в виду, добавить html-атрибут «tabindex» кcanvas тег и дать ему целочисленное значение. Сами табиндексы выходят за рамки этого вопроса:developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

Похожие вопросы