logo标签列表

HTML5画布 - 上下文敏感菜单

htmluser-interfacebrowserhtml5-canvas
5
我在HTML5画布上绘制了多个矩形，希望能够右键点击盒子并显示上下文菜单。该菜单应特定于所点击的框类型，并且完全由用户指定，即不应包括“重新加载”，“另存为”，“打印”等选项...
请问有什么建议吗？
谢谢， 保罗
你是如何跟踪在画布上绘制的矩形的？ - robertc
我将它们的位置和大小存储在JavaScript对象中。 - PaulN
你有没有考虑过使用Kineticjs？如果是这样，这个答案会对你有所帮助。 - jing3142
1个回答
9
您可以使用addEventListener为上下文菜单添加事件侦听器，以处理鼠标右键请求：
// listen for contextmenu requests
canvas.addEventListener('contextmenu', handleContextmenu, false);

然后在处理程序中，您检查每个矩形是否被命中：
    function handleContextmenu(e){

      // get mouse position relative to the canvas
      var x=parseInt(e.clientX-offsetX);
      var y=parseInt(e.clientY-offsetY);


      // check each rect for hits
      for(var i=0;i<rects.length;i++){
          var rect=rects[i];
          var rectRight=rect.x+rect.width;
          var rectBottom=rect.y+rect.height;

          // if this rect is hit, display an alert
          if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom  ){
              alert("Context menu request on the "+rect.color+" rectangle.");
          }
      }

      // prevents the usual context from popping up
      e.preventDefault()
      return(false); 
    }

以下是可正常工作的代码（没有jsFiddle，因为在X-Domain iframes中无法右键单击）：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var rects=[];

    rects.push({x:50,y:50,width:50,height:50,color:"red"});
    rects.push({x:150,y:100,width:75,height:75,color:"blue"});

    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<rects.length;i++){
        var rect=rects[i];
        ctx.beginPath();
        ctx.fillStyle=rect.color;
        ctx.rect(rect.x,rect.y,rect.width,rect.height);
        ctx.fill();
    }

    // listen for contextmenu requests
    canvas.addEventListener('contextmenu', handleMouseDown, false);  

    function handleMouseDown(e){

      // get mouse position relative to the canvas
      var x=parseInt(e.clientX-offsetX);
      var y=parseInt(e.clientY-offsetY);


      // check each rect for hits
      for(var i=0;i<rects.length;i++){
          var rect=rects[i];
          var rectRight=rect.x+rect.width;
          var rectBottom=rect.y+rect.height;

          // check each rect for hits
          if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom  ){
              alert("Context menu request on the "+rect.color+" rectangle.");
          }
      }

      // prevents the usual context from popping up
      e.preventDefault()
      return(false); 
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接