画布绘制对象的鼠标事件

Posted 2023-03-23

【中文标题】画布绘制对象的鼠标事件

【英文标题】：Mouse events for canvas draw objects

【发布时间】：2013-01-13 13:37:00

【问题描述】：

我想使用this 插件创建基于画布的站点菜单，以创建“乘法”效果。然而，这个，还有globalCompositeOperation，正在同一个画布上处理 ctx 对象。 （在上下文混合器中，它使用屏幕外画布并使用其绘制信息，globalcompoperation 混合相同的 ctx）。 我想为每个 ctx 对象创建鼠标事件（悬停和单击），因此每个 ctx 都会导致不同的 url。

这是我的测试：

      function draw()
      var ctx = document.getElementById('canvasOff1').getContext('2d');
      var ctx2 = document.getElementById('canvasReal').getContext('2d');
      var ctx3 = document.getElementById('canvasOff3').getContext('2d');

      // draw circles - each circle should link to different url and has its own focus
      ctx.fillStyle = "#c7302a";
      ctx.beginPath();
      ctx.arc(50,75,35,0,Math.PI*2,true);
      ctx.fill();

      ctx2.fillStyle = "#395797";
      ctx2.beginPath();
      ctx2.arc(100,75,35,0,Math.PI*2,true);
      ctx2.fill();

  ctx3.fillStyle = "#454";
      ctx3.beginPath();
      ctx3.arc(150,75,35,0,Math.PI*2,true);
      ctx3.fill();

    var over = canvasOff1.getContext('2d'); 
    var under = canvasReal.getContext('2d');
    over.blendOnto(under,'multiply');

    var over2 = canvasOff3.getContext('2d'); 
    var under2 = canvasReal.getContext('2d');
    over2.blendOnto(under2,'multiply',destX:0,destY:0);
    

很高兴知道我如何在这里实现 jQuery。 谢谢。

【参考方案1】：

您不能将事件侦听器添加到上下文中，只能添加到画布中：

document.getElementById('canvasOff1').addEventLsitener(
    'click',
    function() goToUrl('http://www.test1.com'); 
);
document.getElementById('canvasReal').addEventLsitener(
    'click',
    function() goToUrl('http://www.test2.com'); 
);
document.getElementById('canvasOff3').addEventLsitener(
    'click',
    function() goToUrl('http://www.test3.com'); 
);

function goToUrl(url)
    window.location = url;

或者，使用 jQuery：

$('#canvasOff1').on(
    'click',
    function() goToUrl('http://www.test1.com'); 
);
$('#canvasReal').on(
    'click',
    function() goToUrl('http://www.test2.com'); 
);
$('#canvasOff3').on(
    'click',
    function() goToUrl('http://www.test3.com'); 
);

function goToUrl(url)
    window.location = url;

（我更喜欢为window.location = X 使用单独的函数，当然，您也可以在onclick 函数中使用它，如下所示：

function() window.location = 'http://www.test1.com'; 

【讨论】：

嘿，感谢重播。然而，这并没有回答我的问题，因为 CanvasOff 都是屏幕外画布。唯一可见的画布是 canvasReal - 它从屏幕外画布获取信息并进行多重操作。也许有鼠标定位的解决方案可以完成这项工作？

如果画布不在屏幕上，如何单击？我的意思是，你看不到元素，所以你不能点击它，所以你不能访问他们链接到的页面。

这就是我提出问题的原因 - 如果我可以为画布内的上下文对象创建鼠标事件，而不是为整个画布创建鼠标事件。离屏画布中的 ctxs 显示在真实画布上。

啊，那你得确定鼠标点击的坐标，并根据用户点击的位置设置window.location。

谢谢！使用window.location的任何参考？