Umożliwienie użytkownikowi wpisywania tekstu w grze Canvas w języku HTML5

Próbuję napisać moją pierwszą grę HTML5, używając kombinacji Canvas i doskonałej biblioteki KineticJS, a wcześnie trafiłem na ścianę.Umożliwienie użytkownikowi wpisywania tekstu w grze Canvas w języku HTML5

Chcę poprosić użytkownika o wpisanie nazwiska w polu w grze. Po przeprowadzeniu pewnych badań nie widzę żadnego sposobu na zrobienie tego na zewnątrz, puszczając pływający element HTML na tę część płótna, której używam.

Czy to prawda?

Po narodzinach w wielu grach Flash i grach internetowych jestem pewien, że za każdym razem, gdy muszę wprowadzić nazwę lub zapisać nazwę pliku, jest ona bezpośrednio wprowadzana do samej gry i nie polega na kodzie HTML wygenerować?

Wszelkie porady, jak to zrobić, zostaną przyjęte z wdzięcznością.

Źródło

2012-11-17 Craigeve

Nie sądzę, istnieje jakikolwiek z możliwością skrzynki w Kinetic JS do dodawania pola tekstowego. Zapoznaj się z dokumentacją KineticJS dla tego samego: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ To odpowie na większość twoich pytań. Musisz utworzyć obszar tekstowy na płótnie, dodając procedury obsługi zdarzeń w obrysach klawiszy w prostokącie. Następnie wyświetl tekst otrzymany od użytkownika w obszarze roboczym w określonym formacie. – Amber

Omawia to umieszczanie tekstu na płótnie, a nie przechwytywanie tekstu od użytkownika. Używam już dużo tekstu KineticJS, aby moje guziki, co chcę powiedzieć, wpisz swoje imię: (które będzie używało atrybutu tekstowego), a następnie przechwyć tekst w funkcji Canvas JS. – Craigeve

Właśnie zredagowałem swoją odpowiedź. W Kinetic JS nie ma czegoś takiego jak obszar tekstu HTML. – Amber

Możesz pobrać pływający element HTML na górze płótna, korzystając z poniższej techniki CSS.

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

Zrób pozycję wrapper Gr: względną
Dodaj płótna wewnątrz używając position: absolute
dodać inne kontrolki HTML wewnątrz używając position: absolute

Ta aplikacja s dla wszystkich elementów HTML, a nie tylko na płótnie.

Źródło

2012-11-17 13:08:24

Będę szczery, jestem bardziej programistą JavaScript/Java niż HTML. Zasadniczo zignorowałem CSS w tej chwili (więc nie mam części dokumentu) i skupiłem się tylko na utworzeniu pojedynczego div, w którym wkładam płótno KineticJS. Jeśli postępuję zgodnie z tym przewodnikiem, wszystkie moje obiekty wewnątrz płótna będą miały być transponowanym Zgaduję? – Craigeve

Tak. W tym przypadku absolutnie pozycjonowane są elementy relatywne względem rodzica. –

Szybki i brudny sposób:

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

To działa, ale na pewno nie jest najładniejsza sposób to zrobić. System iOS ma całkiem niezłą podpowiedzi.

Źródło

2012-11-29 11:45:40 pillar15

wiem, że to jest trochę stary, ale ....

Canvas Input jest wielką bibliotekę, którego używam w mojej grze:

Jak widać, mogę wpisać w pole i pokaż go na ekranie. Jest łatwy w użyciu:

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) 
    }, 
});

Oświadczenie: Ja jestem w żaden sposób związany z CanvasInput a ja nie odbiera niczego za ten post :)

Źródło

2016-10-24 01:25:03 Meinkraft

Umożliwienie użytkownikowi wpisywania tekstu w grze Canvas w języku HTML5

Odpowiedz

Powiązane problemy