キャンバス内のマウスクリック位置を検出します

Question

空のスペースをクリックした場所の関数を定義しようとすると、実際の問題が発生しています。これまで私はオブジェクトをクリックした場所を定義することができましたが、そのうちのどれかをクリックしていないときは別の関数が必要です。一般的な考え方はhttp://deciballs.co.uk/experience.htmlです。オブジェクトはリングです。私のコードは以下の通りです。

var shapeObj = function (context, canvas, settingsBox, radius) { 
    this.ctx = context; 
    this.canvas = canvas; 
    this.sBox = settingsBox; 

    this.frequencies = new Array(220, 440, 1024, 2048); 
    this.cols = new Array(255, 225, 200, 175, 150); 
    this.strokes = new Array(1, 1.5, 2); 
    this.waves = new Array('sine', 'sawtooth', 'triangle', 'square'); 

    this.properties = { 
     dur: Math.random()*0.5, 
     freq: this.frequencies[Math.floor(Math.random() * this.frequencies.length)], 
     radius: radius, 
     stroke: this.strokes[Math.floor(Math.random() * this.strokes.length)], 
     speed: Math.random()*6-3, 
     vol: Math.random()*10, 
     col1: this.cols[Math.floor(Math.random() * this.cols.length)], 
     col2: this.cols[Math.floor(Math.random() * this.cols.length)], 
     col3: this.cols[Math.floor(Math.random() * this.cols.length)], 
     alpha: 0, 
     wave: this.waves[Math.floor(Math.random() * this.waves.length)], 
     delay: 0 
    } 

    this.x = Math.random()*this.ctx.canvas.width; 
    this.y = Math.random()*this.ctx.canvas.height; 
    this.vx = 0.5; 
    this.vy = 1; 

    this.draw = function() { 
     this.ctx.beginPath(); 
     this.ctx.arc(this.x, this.y, this.properties.radius, 0, Math.PI*2, false); 
     this.ctx.closePath(); 
     this.ctx.stroke(); 
     this.ctx.fill(); 
    } 

    this.clickTest = function (e) { 
     var canvasOffset = this.canvas.offset(); 
     var canvasX = Math.floor(e.pageX-canvasOffset.left); 
     var canvasY = Math.floor(e.pageY-canvasOffset.top);  
      var dX = this.x-canvasX; 
      var dY = this.y-canvasY; 
      var distance = Math.sqrt((dX*dX)+(dY*dY)); 
      if (distance < this.properties.radius) { 
       this.manageClick(); 
      } else { 
       this.properties.alpha = 0; 
      } 
    }; 

    this.manageClick = function() { 
     this.sBox.populate(this.properties, this); 
     var divs = document.getElementsByTagName('section'); 
     for(var i = 0, e = divs[0], n = divs.length; i < n; e = divs[++i]){ 
      e.className='class2'; 
     } 
     this.properties.alpha = 0.5; 
    } 
} 

Answer 1

完全なマウスクリックの取得はややこしいですが、これまでに作成した最も防衛的なマウスコードを共有します。これは、すべてのブラウザで動作し、パディング、マージン、境界線、アドオン（stumbleuponのトップバーのような）のすべての方法で動作します。

私は、関数で定義されていない（オプションの）変数を使用しています。彼らは以下のとおりです。

stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)  || 0; 
    stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)  || 0; 
    styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; 
    styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; 
    // Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page 
    // They will mess up mouse coordinates and this fixes that 
    var html = document.body.parentNode; 
    htmlTop = html.offsetTop; 
    htmlLeft = html.offsetLeft; 

私は、彼らがgetMouse機能していない理由である、一度だけそれらを計算お勧めします。

---

あなたが本当に単機能の帽子を持っている必要がありますが、マウスクリックを扱う一度getMouseを呼び出し、その後、xとyとのそれぞれ1照らし合わせ、オブジェクトのリストものの行きます。擬似コード：

function onMouseDown(e) { 
    var mouse = getMouse(e, canvas) 
    var l = myObjects.length; 
    var found = false; 

    // Maybe "deselect" them all right here 

    for (var i = 0; i < l; i++) { 
    if (distance sqrt to myObjects[i]) { 
     found = true; 
     myObjects[i].ManageClickOrWhateverYouWantHere() 
    } 
    break; 
    } 

    // And now we can know if we clicked on empty space or not! 
    if (!found) { 
    // No objects found at the click, so nothing has been clicked on 
    // do some relevant things here because of that 
    // I presume from your question this may be part of what you want 
    } 

}