HTML5 Tuval - Bağlam Duyarlı Menüsü

HTML5 kanvasında bir dizi dikdörtgen çiziyorum ve kutulara sağ tıklayıp içeriğe duyarlı bir menü görüntüleyebilmeyi istiyorum. Menü, tıklatılan kutunun türüne ve tamamen kullanıcı tarafından belirtilmiş olmalıdır, yani, Yeniden Yükle, Farklı Kaydet, Yazdır vb. Içermemelidir.HTML5 Tuval - Bağlam Duyarlı Menüsü

Herhangi biri bana herhangi bir işaretçi verebilir mi?

sayesinde Paul

kaynak

2013-06-13 PaulN

Çizim yaptığınız dikdörtgenleri tuvale nasıl kaydedersiniz? – robertc

Konumlarını ve boyutlarını javascript nesnelerine saklıyorum. – PaulN

Kineticjs'i düşündünüz mü, eğer bu [cevap yardımcı olur] (http://stackoverflow.com/questions/15039915/kineticjs-right-click-fires-click) – jing3142

Sen addEventListener içerik menüsü sağ fare isteklerini işlemek için olabilir için:

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

Sonra işleyicisinde, size isabet için rects her çek

İşte çalışma kodu (X-Domain iframe'lerinde sağ tıklama yapılmadığından jsFiddle yok):

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

kaynak

2013-06-13 17:29:21 markE

HTML5 Tuval - Bağlam Duyarlı Menüsü

cevap

İlgili konular