HTML5 캔버스 - 상황에 맞는 메뉴

HTML5 캔버스에 여러 직사각형을 그려서 상자를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴를 표시하려고합니다. 메뉴는 클릭하는 상자의 유형에 따라 달라야하고 완전히 사용자 지정됩니다. 즉, 다시로드, 다른 이름으로 저장, 다른 이름으로 저장 등을 포함해서는 안됩니다.HTML5 캔버스 - 상황에 맞는 메뉴

아무거나 말해 줄 수 있습니까?

감사합니다, 폴

출처

2013-06-13 PaulN

캔버스에 그리는 직사각형을 어떻게 추적하고 있습니까? – robertc

자바 스크립트 개체에서 위치와 크기를 유지하고 있습니다. – PaulN

이 답변이 도움이된다면 Kineticjs에 대해 생각해 보셨습니까 (http://stackoverflow.com/questions/15039915/kineticjs-right-click-fires-click) – jing3142

당신은 또는 addEventListener 컨텍스트 메뉴를 마우스 오른쪽 요청을 처리 할 수 있습니다에 대한 :

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

// listen for contextmenu requests 
canvas.addEventListener('contextmenu', handleContextmenu, 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 캔버스 - 상황에 맞는 메뉴

답변

관련 문제