HTML5画布-上下文相关菜单_Html_User Interface_Browser_Html5 Canvas

HTML5画布-上下文相关菜单

html user-interface browser html5-canvas

HTML5画布-上下文相关菜单,html,user-interface,browser,html5-canvas,Html,User Interface,Browser,Html5 Canvas,我在HTML5画布上绘制了许多矩形，希望能够右键单击框并显示上下文相关菜单。菜单应特定于所单击的框类型，并完全由用户指定，即不应包括重新加载、另存为、打印等有人能给我指点吗谢谢， Paul您可以为上下文菜单添加EventListener来处理鼠标右键请求： // listen for contextmenu requests canvas.addEventListener('contextmenu', handleContextmenu, false); 然后在处理程序中，检查每个矩形

我在HTML5画布上绘制了许多矩形，希望能够右键单击框并显示上下文相关菜单。菜单应特定于所单击的框类型，并完全由用户指定，即不应包括重新加载、另存为、打印等

有人能给我指点吗

谢谢，

Paul

您可以为上下文菜单添加EventListener来处理鼠标右键请求：

// 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); 
    }

功能手柄ContextMenu（e）{
//获取相对于画布的鼠标位置
var x=parseInt（e.clientX-offsetX）；
变量y=parseInt（e.clientY-offsetY）；
//检查每个rect的命中率
对于（var i=0；i=rect.x&&x=rect.y&&y）如何跟踪在画布上绘制的矩形？我在javascript对象中保持它们的位置和大小。如果是这样，您是否考虑过Kineticjs
<!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>