0
236
ViewsClickable link from text on canvas in JavaScript
I have a video game made in JavaScript using the createjs library.
In the credits, I draw a URL on the canvas as text, but I wish to make it a clickable link.
After a lot of Googling and searching through forums I haven't found a similar question being asked.
I tried using the String link() method, but it does not work. The game launches but the credits won't open.
var oLink = new createjs.Text("www.amzd.hr"," 20px "+FONT_GAME, "#000080");
oLink.y = +270;
oLink.textAlign = "center";
oLink.textBaseline = "middle";
oLink.x = +100;
oLink.lineWidth = 300;
let oLink = oLink.link("https://www.amzd.hr");
_oPanelContainer.addChild(oLink);
·
Juan Pablo Isaza
1 answers
Answer question0
You can add an event listener to the Text instance that opens your link.
oLink.addEventListener("click", function(e) {
window.open("https://url");
});
One note is that hit areas on text are pixel perfect, so you will want to add a hitArea. Here is some pseudo-code using getBounds() to determine the text size.
var b = oLink.getBounds();
oLink.hitArea = new createsjs.Shape(
new createjs.Graphics().drawRect(b.x, b.y, b.width, b.height)
));
There is a tutorial on mouse interaction here: https://createjs.com/tutorials/Mouse%20Interaction/
Cheers,
·
Juan Pablo Isaza
Report
Answer question