Html 将信息传递给单击时将返回的画布元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6148065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass information to a canvas element that will be returned when it is clicked
提问by dpham
Is there a way to pass some id or information to an canvas element so that when you click on it you can retrieve it back?
有没有办法将一些 id 或信息传递给画布元素，以便当您单击它时可以检索它？
回答by Putuko
I suggest you to take a look to Kinetic.jsan object oriented canvas library. There are other options, but from the ones I've tried until now this one is specially easy to integrate in a HTML5 / Canvas project (IMO) and has a great support for events (click, mouseOver, mouseOut... etc.) and also for Drag & Drop. Great to use in user-interaction-oriented canvases.
我建议你看看Kinetic.js一个面向对象的画布库。还有其他选项，但从我迄今为止尝试过的选项来看，这个选项特别容易集成到 HTML5 / Canvas 项目 (IMO) 中，并且对事件（单击、鼠标悬停、鼠标输出等）有很好的支持也适用于拖放。非常适合在面向用户交互的画布中使用。
Hope it helps you.
希望对你有帮助。
回答by YeJiabin
I'm afraid that you may not select canvaselement just like selecting HTML DOM element by id or class. But you still can add mouse event listeners to detect the coordinates. And I still think using HTML button tag is much better.
恐怕您可能不会canvas像通过 id 或 class 选择 HTML DOM 元素一样选择元素。但是您仍然可以添加鼠标事件侦听器来检测坐标。而且我仍然认为使用 HTML 按钮标签要好得多。
Here's a tutorial about it http://simonsarris.com/blog/140-canvas-moving-selectable-shapes.
这是关于它的教程http://simonsarris.com/blog/140-canvas-moving-selectable-shapes。
Hopefully, it can give you help.
希望，它可以给你帮助。
回答by thepolm3
I prefer to use the mousedown listner and then specify the area of the button, e.g here the button would be from (30,30) to (60,60)
我更喜欢使用 mousedown 监听器，然后指定按钮的区域，例如这里的按钮将从 (30,30) 到 (60,60)
window.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(event) {
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
if (x>=30 && x<=60 && y>=30 && y<=60) {
alert("BUTTON PRESSED")
}
}
This is probably the easiest method without importing any libraries
这可能是不导入任何库的最简单方法
回答by Expanding-Dev
I have made buttons in canvas many times. By using this mouse event handler for canvas
我在画布上做了很多次按钮。通过将此鼠标事件处理程序用于画布
function getPosition(event) {
var x,
y;
if (event.x != undefined && event.y != undefined) {
x = event.x;
y = event.y;
} else {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= canvasElement.offsetLeft;
y -= canvasElement.offsetTop;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
mouseX = x;
mouseY = y;
}
getPosition should be used/called by the canvas like this:
画布应该像这样使用/调用 getPosition：
<canvas onclick='getPosition(event);'></canvas>
It also works for mouseover and mousemove.
它也适用于鼠标悬停和鼠标移动。
So by using mouseX and Y you can check if the mouse is on the button. The button has to be rectangular.
所以通过使用 mouseX 和 Y 你可以检查鼠标是否在按钮上。按钮必须是矩形的。
if (mouseX > buttonX &&
mouseX < buttonX + buttonWidth &&
mouseY > buttonY &&
mouseY < buttonY + buttonHeight) {
//The mouse is on the button!
}
buttonX and Y are referring to the top left corner of the button/area. Similar to ctx.fillRect()
buttonX 和 Y 指的是按钮/区域的左上角。类似于 ctx.fillRect()
