HTML5 Canvas 中的图像点击事件
[英]Image Click Event in HTML5 Canvas
问题描述
I have a HTML5 canvas and I have added an image in it and I want to call click event of image but event doesn't fire.
我有一个 HTML5 画布，我在其中添加了一个图像，我想调用图像的单击事件，但事件不会触发。 I am writing a html code and some code of jqmobile我正在编写一个 html 代码和一些 jqmobile 的代码
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.2.1.js"></script>
<script src="jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<canvas id="canvas1" style="position: absolute; left: 0px; top: 0px;" width="1280" height="960">This text is displayed if your browser does not shown.
</canvas>
<script>
$(function () {
var ctx = document.getElementById("canvas1").getContext("2d");
var imgBasket = new Image();
imgBasket.id = "imgBasket";
imgBasket.src = "Basket.png";
ctx.drawImage(imgBasket, 580, 260, 200, 200);
//this jquery mobile event not working in canvas
$("document").on("vclick", "#imgBasket", function () {
alert("Hello");
});
});
</script>
</body>
</html>
5 个解决方案
解决方案1
8 已采纳 2014-04-07 11:20:35
Now I understand what you are trying to achieve, you want to put an image in a canvas and then use jquery to see when you clicked on the image.现在我了解您要实现的目标，您想将图像放在画布中，然后使用 jquery 查看单击图像的时间。 Well, sadly, it doesn't work like this.好吧，可悲的是，它不是这样工作的。 Images in the canvas are no longer dom elements, only the canvas itself is one.画布中的图像不再是 dom 元素，只有画布本身是一个。 This means you can call:这意味着您可以调用：
$('#canvas').on('click', function() {});
but you can't call但你不能打电话
$("document").on("click", "#canvasImage", function () {});
Because the #canvasImage isn't there, even if the original image was a dom node.因为 #canvasImage 不存在，即使原始图像是 dom 节点。 If there's really no other way of going with your project, fabricjs might help:如果您的项目真的没有其他方法，fabricjs 可能会有所帮助：
解决方案2
3 2014-04-07 11:49:50
You cannot add eventlistener on image or shape you drawed on canvas so you have to add eventlistener on pixels where you have drawed the image means for example:您不能在画布上绘制的图像或形状上添加事件监听器，因此您必须在绘制图像的像素上添加事件监听器，例如：
var img=document.getElementById("img1");
//ctx.drawImage(img,x,y,height,width);
ctx.drawImage(img,10,10,20,20);
$("#canvas1").on("click",function(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do{
totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while(currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
//Image x y cordinates adding width and height
if((canvasX>=10 && canvasX<=30) && (canvasY>=10 && canvasY<=30))
{
alert("canvasX:"+canvasX+" "+"canvasY:"+canvasY);
}
});
解决方案3
2 2014-04-07 11:22:05
image is painted on canvas, you can't considered it as a element.图像是在画布上绘制的，您不能将其视为元素。
you can do it like checking co-ordinates of click, if it lies on your image or not.你可以像检查点击的坐标一样，如果它位于你的图像上。
here is a sample.这是一个示例。
var canvas = document.getElementById("canvas1");
canvas.addEventListener("mousedown", clicked, false);
function clicked(e){
e.preventDefault();
var x = e.clientX;
var y = e.clientY;
if(x>580 && x<780 && y>260 && y>460){ //780 = 580+(200) <- image width
alert('Hello');
}
}
解决方案4
0 2022-05-21 06:12:32
Well, you can actually use a workaround that involves converting your image to vector SVG image (You can do that using PNGtoSVG )好吧，您实际上可以使用一种解决方法， converting您的图像转换为矢量SVG图像（您可以使用PNGtoSVG来实现）
Then, you need to extract the path (the 'd' attribute in your SVG file if you open it in a text editor) from your svg file and use that in you canvas:然后，您需要从 svg 文件中提取path （如果您在文本编辑器中打开 SVG 文件中的'd'属性）并在画布中使用它：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const yourImg = new Path2D('d'); // extracted path as parameter
ctx.fill(yourImg);
// Listen for click event
canvas.addEventListener('click', (e) => {
// See if it lies inside the given path
if (ctx.isPointInPath(yourImg, e.offsetX, e.offsetY))
alert('Hello'); // clicked on your Image
// Draw Image
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fill(yourImg);
});
It creates a trackable element using Path2D() and then checks precisely if the element was clicked inside, the event and should meet OP's needs in principle.它使用 Path2D() 创建一个可跟踪元素，然后精确检查该元素是否在内部被点击、事件并原则上应满足 OP 的需求。
const canvas = document.getElementById('canvas'); canvas.style.border = 'solid 1px #000'; const ctx = canvas.getContext('2d'); const yourImg = new Path2D('M17.21 9l-4.38-6.56c-.19-.28-.51-.42-.83-.42-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'); ctx.fill(yourImg); canvas.addEventListener('click', (e) => { if (ctx.isPointInPath(yourImg, e.offsetX, e.offsetY)) { alert('Hello') } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fill(yourImg); });
<h4>Try clicking the 'bucket' icon:</h4> <canvas id="canvas" width="400" height="250"></canvas>
解决方案5
-1 2014-04-07 10:44:09
It seems like the listener for the click event is missing.似乎缺少单击事件的侦听器。 What about doing it this way:这样做怎么样：
<!DOCTYPE html><html>
<head><title>Canvas HTML5 Test Page</title>
<script>
function newCanvasListen() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var imgBasket = new Image();
imgBasket.src = "Basket.png";
imgBasket.id = "imgBasket";
imgBasket.onload = function() {
var imageBasket = ctx.drawImage(imgBasket, 0, 0);
ctx.fillStyle = imageBasket;
};
canvas.addEventListener("mousedown", doMouseDown, false);
}
function doMouseDown(event) {
alert("Hello");
}
</script>
</head>
<body onLoad=newCanvasListen()>
<canvas width="256" HEIGHT="256" ID="canvas1">
This text is displayed if your browser does not shown.
</canvas>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.