JavaScript 中画布上文本的可点击链接答案

【问题标题】：Clickable link from text on canvas in JavaScriptJavaScript 中画布上文本的可点击链接
【发布时间】：2022-01-27 04:46:06
【问题描述】：

我有一个使用 createjs 库用 JavaScript 制作的视频游戏。

在演职员表中，我在画布上绘制了一个 URL 作为文本，但我希望将其设为可点击的链接。

经过大量谷歌搜索和论坛搜索后，我没有发现有人问过类似的问题。

我尝试使用String link() method，但它不起作用。游戏启动，但积分打不开。

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

【问题讨论】：

“在画布上绘制 URL”是问题所在。画布只是一个图像，它不包含任何元素。一个简单的方法是在画布上绝对放置一个真正的a 元素。也可以检测画布上的点击像素，但识别某些文本需要大量脚本。
如果点击点击“链接”周围的矩形，更简单的方法是获取点击的坐标，并使用 JS 重定向。

标签： javascript html canvas hyperlink anchor

【解决方案1】：

您可以向打开链接的 Text 实例添加事件侦听器。

oLink.addEventListener("click", function(e) {
    window.open("https://url");
});

请注意，文本上的命中区域是像素完美的，因此您需要添加一个 hitArea。这是一些使用getBounds() 来确定文本大小的伪代码。

var b = oLink.getBounds();
oLink.hitArea = new createsjs.Shape(
    new createjs.Graphics().drawRect(b.x, b.y, b.width, b.height)
));

这里有一个鼠标交互的教程： https://createjs.com/tutorials/Mouse%20Interaction/

干杯，

【讨论】：