首頁猿問如何將事件偵聽器添加到畫布上繪制的矩形？

如何將事件偵聽器添加到畫布上繪制的矩形？

JavaScript

江戶川亂折騰 2023-06-15 16:45:36

我有一個畫布元素，當頁面加載時，圖像和一些形狀被繪制到畫布上。單擊圖像時，我想觸發一個功能。我首先嘗試了這個。const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);btn.onmousedown = function () { // do stuff}這沒有用。我也沒有在控制臺中收到任何錯誤。然后我嘗試使用該addEventListener功能。const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);btn.addEventListener("click", function (event) { // do stuff}, false);再一次，這沒有用。這是否可能無需使用 CSSz-index屬性在畫布上浮動按鈕？

查看完整描述

1 回答

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

你想做的事是不可能的——至少不是這樣。問題是畫布實際上并不知道你畫的東西的形狀。它只知道單個像素顏色。

但是，您可以做的是將按鈕的邊界框 - 屏幕位置和尺寸 - 保留為 Path2D 矩形，并使用該函數context.isPointInPath(path2d,x,y)檢查是否有人在畫布上按鈕占據的區域內單擊。

這是一個示例（只需單擊“運行代碼片段”）：

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var image = new Image();

var buttons = [];

function draw(e) {

let x, y, width, height, path;

// first button

x = 20;

y = 20;

width = 100;

height = 20;

context.drawImage(e.target, x, y, width, height);

path = new Path2D();

path.rect(x, y, width, height);

buttons.push(path);

// second button

x = 150;

y = 20;

width = 100;

height = 20;

context.drawImage(e.target, x, y, width, height);

path = new Path2D();

path.rect(x, y, width, height);

buttons.push(path);

}

function canvasClicked(e) {

let button;

for (var a = 0; a < buttons.length; a++) {

button = buttons[a];

if (context.isPointInPath(button, e.offsetX, e.offsetY)) {

console.log("button " + (a + 1) + " clicked");

}

image.onload = draw;

image.src = "https://picsum.photos/id/866/200/300";

canvas.addEventListener("click", canvasClicked);

反對回復 2023-06-15

1 回答
0 關注
111 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將事件偵聽器添加到畫布上繪制的矩形？

如何將事件偵聽器添加到畫布上繪制的矩形？

1 回答

添加回答

如何將事件偵聽器添加到畫布上繪制的矩形？