如何将简单的 onClick 事件处理程序添加到画布元素?

Posted

技术标签:

【中文标题】如何将简单的 onClick 事件处理程序添加到画布元素?【英文标题】:How do I add a simple onClick event handler to a canvas element? 【发布时间】:2012-04-10 10:30:31 【问题描述】:

我是一名经验丰富的 Java 程序员,但我在大约十年来第一次看到一些 javascript/html5 的东西。我完全不知道什么应该是有史以来最简单的事情。

作为一个例子,我只是想画一些东西并向它添加一个事件处理程序。我确定我在做一些愚蠢的事情,但我已经搜索了所有内容,但没有任何建议(例如,这个问题的答案:Add onclick property to input with JavaScript)有效。我正在使用 Firefox 10.0.1。我的代码如下。您会看到几行注释,每行末尾都有对发生(或未发生)情况的描述。

这里的正确语法是什么?我要疯了!

<html>
<body>
    <canvas id="myCanvas"  />
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function()  alert('hello world!'); ;  - does nothing
        // elem.onClick = function()  alert("hello world!"); ;  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, 150, 100);
    </script>

</body>

【问题讨论】:

使用onclick 而不是onClick 详细说明为什么这些尝试不起作用...前几个 cmets 立即显示警报,因为您直接在 &lt;script&gt; 中调用 alert(),而不是定义将致电alert()。由于onclick 的大写,其余的什么都不做。 你可以使用这个库 jsfiddle.net/user/zlatnaspirala/fiddles ,看看 bitbucket.org/nikola_l/visual-js 。您将获得很多功能 + 【参考方案1】:

当您绘制到canvas 元素时,您只是在immediate mode 中绘制位图。

绘制的元素(形状、线条、图像)除了它们使用的像素和颜色之外没有任何表示。

因此,要在canvas 元素(形状)上获得click 事件,您需要捕获canvas HTML 元素上的点击事件并使用一些确定单击了哪个元素的数学运算,前提是您要存储元素的宽度/高度和 x/y 偏移量。

要将click 事件添加到您的canvas 元素,请使用...

canvas.addEventListener('click', function()  , false);

要确定点击了哪个元素...

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) 
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) 
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) 
            alert('clicked an element');
        
    );

, false);

// Add element.
elements.push(
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
);

// Render elements.
elements.forEach(function(element) 
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
);​

jsFiddle.

此代码将click 事件附加到canvas 元素,然后将一个形状(在我的代码中称为element)推送到elements 数组。您可以在此处添加任意数量。

创建对象数组的目的是为了让我们以后可以查询它们的属性。在所有元素都被推入数组后,我们循环遍历并根据它们的属性渲染每个元素。

click 事件被触发时,代码循环遍历元素并确定点击是否在elements 数组中的任何元素上。如果是这样,它会触发一个alert(),可以很容易地对其进行修改以执行诸如删除数组项之类的操作,在这种情况下,您需要一个单独的render 函数来更新canvas


为了完整起见,为什么您的尝试没有成功...

elem.onClick = alert("hello world"); // displays alert without clicking

这是将alert() 的返回值分配给elemonClick 属性。它立即调用alert()

elem.onClick = alert('hello world');  // displays alert without clicking

在 JavaScript 中,'" 在语义上是相同的,词法分析器可能使用 ['"] 作为引号。

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

您正在为elemonClick 属性分配一个字符串。

elem.onClick = function()  alert('hello world!'); ; // does nothing

JavaScript 区分大小写。 onclick 属性是附加事件处理程序的古老方法。它只允许将一个事件附加到该属性中,并且在序列化 HTML 时该事件可能会丢失。

elem.onClick = function()  alert("hello world!"); ; // does nothing

再说一遍,' === "

【讨论】:

嗯...如果我误解了,请原谅我 - 但我不是在画布元素上捕获点击事件吗?我不确定您点击了 what 元素是什么意思。这个页面上只有一个元素,对吧? 他的意思是“画布中的哪个元素”——可以说是哪个“形状”。 谢谢,非常感谢——尽管我对最后一个不是很清楚。我在这里遵循示例:developer.mozilla.org/en/DOM/element.onclick(使用他们描述的匿名函数)并且它可以工作,即使我将跨度更改为画布也是如此。所以我不难慢慢将他们的例子转化为我的例子,看看我做错了什么。感谢您的详细回复!解释为什么我的各种尝试都错了特别有帮助。 @Jer 不用担心,如果您有更多问题,请随时在 Twitter 上发帖并联系我,@alexdickson。 @HashRocketSyntax 它应该可以正常工作,只需更新对象在内存中的位置并使用这些定义进行渲染【参考方案2】:

2021:

要创建可跟踪元素,您应该使用new Path2D() 方法。

首先在画布上监听鼠标事件以获取点(鼠标)坐标event.offsetXevent.offsetY,然后使用CanvasRenderingContext2D.isPointInPath()CanvasRenderingContext2D.isPointInStroke() 精确检查鼠标是否悬停在您的元素上。

IsPointInPath:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);

// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) 
  // Check whether point is inside circle
  if (ctx.isPointInPath(circle, event.offsetX, event.offsetY)) 
    ctx.fillStyle = 'green';
  
  else 
    ctx.fillStyle = 'red';
  

  // Draw circle
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fill(circle);
);
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

IsPointInStroke:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Create ellipse
const ellipse = new Path2D();
ellipse.ellipse(150, 75, 40, 60, Math.PI * .25, 0, 2 * Math.PI);
ctx.lineWidth = 25;
ctx.strokeStyle = 'red';
ctx.fill(ellipse);
ctx.stroke(ellipse);

// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) 
  // Check whether point is inside ellipse's stroke
  if (ctx.isPointInStroke(ellipse, event.offsetX, event.offsetY)) 
    ctx.strokeStyle = 'green';
  
  else 
    ctx.strokeStyle = 'red';
  

  // Draw ellipse
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fill(ellipse);
  ctx.stroke(ellipse);
);
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

多元素示例:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const circle = new Path2D();
circle.arc(50, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);

const circletwo = new Path2D();
circletwo.arc(200, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circletwo);

// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) 
  // Check whether point is inside circle
  if (ctx.isPointInPath(circle, event.offsetX, event.offsetY)) 
    ctx.fillStyle = 'green';
    ctx.fill(circle);
  
  else 
    ctx.fillStyle = 'red';
    ctx.fill(circle);
  
  
    if (ctx.isPointInPath(circletwo, event.offsetX, event.offsetY)) 
    ctx.fillStyle = 'blue';
    ctx.fill(circletwo);
  
  else 
    ctx.fillStyle = 'red';
    ctx.fill(circletwo);
  
  
);
html cursor: crosshair;
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

如果您有要检查的动态元素列表,可以循环检查它们,如下所示:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var elementslist = []

const circle = new Path2D();
circle.arc(50, 75, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);

const circletwo = new Path2D();
circletwo.arc(150, 75, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circletwo);

const circlethree = new Path2D();
circlethree.arc(250, 75, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circlethree);

elementslist.push(circle,circletwo,circlethree)

document.getElementById("canvas").addEventListener('mousemove', function(event) 
event = event || window.event;
var ctx = document.getElementById("canvas").getContext("2d")

for (var i = window.elementslist.length - 1; i >= 0; i--)  

if (window.elementslist[i] && ctx.isPointInPath(window.elementslist[i], event.offsetX, event.offsetY)) 
document.getElementById("canvas").style.cursor = 'pointer';
    ctx.fillStyle = 'orange';
    ctx.fill(window.elementslist[i]);
return
 else 
document.getElementById("canvas").style.cursor = 'default';
    ctx.fillStyle = 'red';
    for (var d = window.elementslist.length - 1; d >= 0; d--) 
    ctx.fill(window.elementslist[d]);
    

  

);
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

来源:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath & https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke

【讨论】:

【参考方案3】:

可能很晚才得到答案,但我只是在准备我的70-480 考试时阅读了这篇文章,发现这很有效 -

var elem = document.getElementById('myCanvas');
elem.onclick = function()  alert("hello world"); 

注意事件为onclick 而不是onClick

JS Bin 示例。

【讨论】:

OP 想要将onclick 添加到画布内的元素,而不是画布本身【参考方案4】:

作为亚历克斯答案的替代方案:

您可以使用 SVG 绘图而不是 Canvas 绘图。在那里,您可以直接将事件添加到绘制的 DOM 对象。

例如:

Making an svg image object clickable with onclick, avoiding absolute positioning

【讨论】:

抱歉热情,只是我有一个问题,使用 SVG 是显而易见的解决方案,直到你的评论我才想到它^^【参考方案5】:

我推荐以下文章:Hit Region Detection For HTML5 Canvas And How To Listen To Click Events On Canvas Shapes,它经历了各种情况。

但是,它不包括addHitRegion API,这一定是最好的方法(使用数学函数和/或比较很容易出错)。这个方法详解on developer.mozilla

【讨论】:

"[addHitRegion] 已过时。尽管它可能在某些浏览器中仍然有效,但不鼓励使用它,因为它可能随时被删除。尽量避免使用它。" - 从您包含的 dev.moz 链接中,节省其他人的点击次数。【参考方案6】:

您还可以将 DOM 元素(例如 div)放在画布顶部,以表示您的画布元素并以相同的方式定位。

现在您可以将事件侦听器附加到这些 div 并运行必要的操作。

【讨论】:

对于愚蠢的 ios 程序员来说,知道如何做到这一点会很棒:)【参考方案7】:

作为在有些静态画布上的另一种廉价替代方案,使用带有 usemap 定义的覆盖 img 元素既快速又脏。特别适用于基于多边形的画布元素,如饼图。

【讨论】:

【参考方案8】:

Alex Answer 非常简洁,但是当使用上下文旋转时,很难跟踪 x,y 坐标,所以我制作了一个 Demo 来展示如何跟踪它。

基本上我正在使用这个函数,并在绘制对象之前给它一个角度和在那个天使中经过的距离。

function rotCor(angle, length)
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = length*cos;
    var newy = length*sin;

    return 
        x : newx,
        y : newy
    ;

【讨论】:

以上是关于如何将简单的 onClick 事件处理程序添加到画布元素?的主要内容,如果未能解决你的问题,请参考以下文章

反应 onClick 事件处理程序没有触发......?

深入理解js Dom事件机制——添加事件处理程序

如何将 onclick 事件添加到表格列?

请简单说明javascript中处理事件的步骤

addEventListener和attachEvent以及element.onclick的区别

如何将 onclick 事件添加到 reactjs 中由 dangerouslysetInnerHtml 呈现的字符串?