HTML5 Canvas - Menu sensibile al contesto

Sto disegnando un numero di rettangoli su un'area di disegno HTML5 e voglio poter fare clic con il pulsante destro del mouse sulle caselle e visualizzare un menu sensibile al contesto. Il menu dovrebbe essere specifico per il tipo di box su cui si fa clic e essere totalmente specificato dall'utente, cioè non dovrebbe includere Ricarica, Salva come, Stampa ecc ...HTML5 Canvas - Menu sensibile al contesto

Qualcuno può darmi qualche suggerimento?

Grazie, Paul

fonte

2013-06-13 PaulN

Come stai tenendo traccia dei rettangoli che stai disegnando sulla 'tela'? – robertc

Sto mantenendo la loro posizione e dimensione in oggetti javascript. – PaulN

Hai pensato a Kineticjs se è così [la risposta sarebbe di aiuto] (http://stackoverflow.com/questions/15039915/kineticjs-right-click-fires-click) – jing3142

È possibile addEventListener per il menu contestuale per gestire le richieste destro del mouse:

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

Poi nel gestore, di controllare ciascuno dei vostri rettangoli per i colpi:

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

Ecco un codice funzionante (no jsFiddle perché non fa clic con il pulsante destro del mouse negli iframe X-Domain):

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

fonte

2013-06-13 17:29:21 markE

HTML5 Canvas - Menu sensibile al contesto

risposta

Problemi correlati