化妝點擊事件，並刪除在畫布

圈的重疊，我寫這篇文章的HTML和JavaScript代碼：化妝點擊事件，並刪除在畫布

當你點擊畫布的座標，畫一個圓。現在我想在代碼執行此兩項行動：

- 創建點擊事件，當我點擊圈，打開下面舉下拉菜單：

<div class="dropdown"> 
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 
    Dropdown 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
</div>

- 用戶可以畫出圓圈有重疊的2個圓圈。

來源

2013-10-16 mgh

*你嘗試過什麼？* –

要做到這一點，你將需要追蹤點擊原裝鼠標位置和存儲位置。然後，您需要檢查該位置是否位於另一個鼠標點擊圓圈內。如果是這樣，那麼不是畫一個新的圓圈來顯示菜單。如果它沒有，然後畫一個新的圈子 – Chausser

我已更新您的腳本以執行您想要的操作。您可能需要進一步更新。基本上，您需要存儲鼠標點擊事件並在創建新圈子時添加菜單。然後所有新點擊都會被檢查，如果他們在圓圈內，他們會在菜單太靠近時顯示菜單，並且如果距離足夠遠，會繪製新的圓圈。

http://jsfiddle.net/sjjq5/1/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

var canvasOffset = $("#myCanvas").offset(); 
var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
var x; 
var y; 
var radius = 50; 
var startAngle = 1.1 * Math.PI; 
var endAngle = 1.9 * Math.PI; 
var counterClockwise = false; 

var circles = []; 

function handleMouseDown(e) { 
    mouseX = parseInt(e.clientX - offsetX); 
    mouseY = parseInt(e.clientY - offsetY); 
    $("#downlog").html("Down: " + mouseX + "/" + mouseY); 
    //check all existing circles to see if we clicked on 
    var inCircle = false; 
    var tooClose = false; 
    for(var i =0;i<circles.length;i++){ 
     if(circles.length > 0){ 
      //checks if we clicked in a circle 
      if(Math.sqrt((mouseX-circles[i].x)*(mouseX-circles[i].x) + (mouseY-circles[i].y)*(mouseY-circles[i].y)) < radius+5){ 
       console.log('in circle'); 
       inCircle = i; 
      } 
      //checks if we clicked somewhere that would create an over lapping circle 
      else if(Math.sqrt((mouseX-circles[i].x)*(mouseX-circles[i].x) + (mouseY-circles[i].y)*(mouseY-circles[i].y)) < radius*2+5){ 
       console.log('too close'); 
       tooClose = true; 
      } 
     } 
    } 
    if(inCircle !== false){ 
     //we clicked in a cirlce launch the menu 
     console.log('showing menu'); 
     $('#circle-menu-'+inCircle).css({left:e.clientX,top:e.clientY}); 
     $('#circle-menu-'+inCircle).show(); 
    } 
    else if(tooClose){ 
     alert('Cant create new circle, too close to existing one'); 
     //hide all shown menus 
     $('.dropdown').hide(); 
    } 
    else{ 
     //hide all shown menus 
     $('.dropdown').hide(); 
     console.log('creating new circle'); 
     //Draw a new circle 
     context.beginPath(); 
     context.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'rgba(255, 255, 255, 0.5)'; 
     //    context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 

     //build a menu for it 
     $('#menus').append($('<div class="dropdown" id="circle-menu-'+circles.length+'"><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">Dropdown<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li>Click Me</li></ul></div>')); 


     //store that data 
     circles.push({x:mouseX,y:mouseY}); 
    }  
} 


$("#myCanvas").mousedown(function (e) { 
    handleMouseDown(e); 
});

來源

2013-10-17 01:34:52 Chausser

化妝點擊事件，並刪除在畫布

回答

相關問題