HTML5キャンバス - 状況依存メニュー

私はHTML5キャンバスに多数の長方形を描画しています。ボックスを右クリックしてコンテキストメニューを表示したいと考えています。メニューはクリックされるボックスのタイプに固有で、完全にユーザー指定されている必要があります。つまり、リロード、名前を付けて保存、印刷などを含めてはいけません。HTML5キャンバス - 状況依存メニュー

誰でも私に何か指摘できますか？

おかげで、ポール

出典

2013-06-13 PaulN

「キャンバス」に描画している矩形をどのように追跡していますか？ – robertc

私はjavascriptオブジェクトの位置とサイズを保持しています。 – PaulN

あなたがKineticjsについて考えたことがありますか？この[回答があれば]（http://stackoverflow.com/questions/15039915/kineticjs-right-click-fires-click） – jing3142

あなたはマウスの右要求を処理するために、コンテキストメニューのためにaddEventListenerすることができます

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

はその後ハンドラの中で、あなたがヒットのためにあなたのrectsの各点を確認してください。

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

を

ここでは動作するコードです（Xドメインのiframeでは右クリックしないためjsFiddleはありません）：

<!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>

出典

2013-06-13 17:29:21 markE

HTML5キャンバス - 状況依存メニュー

答えて

関連する問題