首頁(yè) 猿問(wèn) 如何將事件偵聽(tīng)器添加到畫(huà)布上繪制的矩形？

如何將事件偵聽(tīng)器添加到畫(huà)布上繪制的矩形？

JavaScript

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

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

查看完整描述

1 回答

吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

你想做的事是不可能的——至少不是這樣。問(wèn)題是畫(huà)布實(shí)際上并不知道你畫(huà)的東西的形狀。它只知道單個(gè)像素顏色。

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

這是一個(gè)示例（只需單擊“運(yùn)行代碼片段”）：

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

反對(duì) 回復(fù) 2023-06-15

1 回答
0 關(guān)注
110 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何將事件偵聽(tīng)器添加到畫(huà)布上繪制的矩形？

如何將事件偵聽(tīng)器添加到畫(huà)布上繪制的矩形？

1 回答

添加回答

如何將事件偵聽(tīng)器添加到畫(huà)布上繪制的矩形？

如何將事件偵聽(tīng)器添加到畫(huà)布上繪制的矩形？