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

Forum|Forum|5 years ago
December 28, 2020
2 replies
1595 views

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 🙂

This topic has been closed for replies.

R

richiebenoAuthor

Inspiring

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

C

ClayUUID

Legend

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded