Разрешение пользователю вводить текст в игре HTML5 Canvas

Я пытаюсь написать свою первую игру на HTML5, используя комбинацию Canvas и превосходной библиотеки KineticJS, и на раннем этапе я немного уперся в стену.

Я хочу попросить пользователя ввести свое имя в поле в игре. Проведя некоторое исследование, я не вижу никакого способа сделать это, кроме как получить плавающий элемент HTML над той частью холста, которую я использую.

Это верно?

Я вырос на большом количестве Flash и веб-игр, и я уверен, что каждый раз, когда мне нужно вводить имя или сохранять имя файла, это делается непосредственно в самой игре и не зависит от HTML для его создания?

Любые советы о том, как это сделать, будут с благодарностью получены.


canvas html html5-canvas kineticjs
person Craigeve    schedule 17.11.2012    source источник
comment
Я не думаю, что в Kinetic JS есть какие-либо готовые возможности для добавления текстового поля. Пожалуйста, обратитесь к документации KineticJS для того же: Это ответит на большинство ваших вопросов. Вам нужно создать текстовую область на холсте, добавив обработчики событий на нажатия клавиш на прямоугольнике. Затем отобразите текст, полученный от пользователя, на холсте в определенном формате.   -  person Amber    schedule 17.11.2012
comment
Это обсуждает размещение текста на холсте, а не захват текста от пользователя. Я уже использую много текста KineticJS для создания своих кнопок, и я хочу сказать: «Пожалуйста, введите свое имя: (которое будет использовать текстовый атрибут), а затем запишите текст в функции Canvas JS.   -  person Craigeve    schedule 17.11.2012
comment
Я только что отредактировал свой ответ. В Kinetic JS нет такой вещи, как текстовая область HTML.   -  person Amber    schedule 17.11.2012
comment
Извините, не увидел вашу правку! Посмотрю, как захватывать нажатия клавиш над прямоугольником, и посмотрю, смогу ли я затем передать его обратно через текстовую функцию.   -  person Craigeve    schedule 17.11.2012

Ответы (3)


arrow_upward
4
arrow_downward

Вы можете получить плавающий элемент HTML в верхней части холста, используя следующую технику CSS.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  • Сделать оболочку div position: относительная

  • Добавьте холст внутрь, используя position: absolute

  • Добавьте другие элементы управления HTML внутри, используя position: absolute

Это относится ко всем элементам HTML, а не только к холсту.

person Mikko Ohtamaa    schedule 17.11.2012
comment
Честно говоря, я больше программист на Javascript/Java, чем на HTML. Так что в основном я проигнорировал CSS на данный момент (поэтому нет «стиля» части документа) и просто сосредоточился на создании одного div, в который я загружаю холст KineticJS. Если я буду следовать этому руководству, все мои объекты внутри холста надо будет транспонировать, я так понимаю? - person Craigeve; 17.11.2012
comment
Да. Хитрость заключается в абсолютном позиционировании элементов относительно родителя. - person Mikko Ohtamaa; 17.11.2012

arrow_upward
3
arrow_downward

Быстрый и грязный способ:

var userInput = prompt('What is your name?');

Это работает, но, конечно, это не самый красивый способ сделать это. iOS на самом деле имеет довольно приятную подсказку.

person pillar15    schedule 29.11.2012

arrow_upward
2
arrow_downward

Я знаю, что это немного старо, но....

Canvas Input — отличная библиотека. которые я использую в своей игре:

введите описание изображения здесь

Как видите, я могу ввести текст в поле и вывести его на экран. Его легко использовать:

var input = new CanvasInput({
    canvas: document.getElementById("ctx"),
    x: 0,
    y: 0,
    fontSize: 18,
    fontFamily: 'Arial',
    fontColor: '#212121',
    fontWeight: 'bold',
    width: 200,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 3,
    onsubmit: function() {
        // your code here for submitting (when user presses enter)
    },
});

Отказ от ответственности: я никоим образом не связан с CanvasInput и ничего не получаю за этот пост :)

person sguan    schedule 24.10.2016