Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

HTML5 Canvas keypress (keydown) to tigger the same function as a click event

Explorer ,
Dec 28, 2020 Dec 28, 2020

I am using the click event, but would like to use a key press (keydown) on the right arrow to fire the same function nextPage_2

this.page_1.nextBtn.addEventListener("click", nextPage_2.bind(this));

function nextPage_2()
{
	createjs.Tween.get(this.page_2).to({alpha: 1}, 800, createjs.Ease.quadOut);
}

 This may be quite simple but i cant find the answer. Please help 🙂

1.4K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 28, 2020 Dec 28, 2020

HTML5 Canvas scripting is literally just bare-metal browser JavaScript, plus the CreateJS API to handle Animate-specific stuff.

 

https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 28, 2020 Dec 28, 2020
LATEST

I found a way to do this (see code below) - but does anybody know how I could limit how far the pages instance can be moved in each direcrtion? Thabnsk in advance for any help 🙂

//key events
var sym = this;
document.addEventListener("keydown", handleKeyDown);

function handleKeyDown(event) {
	//Left and right arrow keys
	if (event.which == 37 || event.which == 39) {
		
		//Direction; adds 10 * 1 or -1 to current X  value of pages
		var newX = sym.pages.x+ (1440* (38-event.which) );
		//Move pages to new x position
		createjs.Tween.get(sym.pages).to({x: newX}, 1);
	}
}

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines