如何使画布的一部分可点击？

问题描述：

我想要做的是使画布的一部分可点击。当我点击它时，函数会被调用。你如何在JavaScript中做到这一点？如何使画布的一部分可点击？

这是你想要点击的静态（是它总是在相同的位置）的一部分吗？ – pseudoh

答

您必须将点击事件绑定到整个画布，并检测光标在点击上的位置，然后，如果光标在特定维度内，则执行该功能。

这里有一个小提琴，用一个div为例： http://jsfiddle.net/R8rED/17/

function testAndExecute(elem, event, area, func){ 
    // area is relative to page : 
    // var area = { 
    //  x0: 60, 
    //  y0: 60, 
    //  x1: 100, 
    //  y1: 100 
    // }  
    elem.addEventListener(event, function(e){ 
     var page = { 
      x: e.pageX, 
      y: e.pageY 
     } 
     if(page.x >= area.x0 && page.x <= area.x1 && page.y >= area.y0 && page.y <= area.y1){ 
      func(); 
     } 
    }); 
}

这只适用于特定的屏幕分辨率。 –

答

如果你只是想在画布上点击的区域，一个简单的方法来做到这一点。将覆盖一种无形的div在画布上方。

CSS：

#clickable-overlay { 
    position: absolute; 
    opacity: 0; 
}

下面是一个例子，您可以在画布的左上角点击。 http://jsfiddle.net/tsanders/V6qGM/38/

如何使画布的一部分可点击？

相关推荐