偵測鼠標在畫布內的點擊位置

我有一個真正的問題，試圖定義一個函數，以便在空白處點擊。到目前爲止，我已經設法定義了哪裏我點擊一個對象 - 其中有10個 - 但現在我需要一個單獨的函數，當我不點擊任何對象時。總體思路可以在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; 
    } 
}

來源

2012-05-04 Jon_091

這是一個模糊的問題。 – akonsu

這是你在找什麼：[在畫布上獲取鼠標位置]（http://stackoverflow.com/questions/1114465/getting-mouse-location-in-canvas）？ –

排序，該項目可以在http://deciballs.co.uk/experience.html找到，如果這給你一個更好的主意？ –

獲得完美的鼠標點擊有點棘手，我將分享迄今爲止我創建的最防彈鼠標代碼。它適用於所有瀏覽器將所有方式的填充，邊距，邊框和加載項（如stumbleupon頂部欄）。

// Creates an object with x and y defined, 
// set to the mouse position relative to the state's canvas 
// If you wanna be super-correct this can be tricky, 
// we have to worry about padding and borders 
// takes an event and a reference to the canvas 
function getMouse(e, canvas) { 
    var element = canvas, offsetX = 0, offsetY = 0, mx, my; 

    // Compute the total offset. It's possible to cache this if you want 
    if (element.offsetParent !== undefined) { 
    do { 
     offsetX += element.offsetLeft; 
     offsetY += element.offsetTop; 
    } while ((element = element.offsetParent)); 
    } 

    // Add padding and border style widths to offset 
    // Also add the <html> offsets in case there's a position:fixed bar (like the stumbleupon bar) 
    // This part is not strictly necessary, it depends on your styling 
    offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft; 
    offsetY += stylePaddingTop + styleBorderTop + htmlTop; 

    mx = e.pageX - offsetX; 
    my = e.pageY - offsetY; 

    // We return a simple javascript object with x and y defined 
    return {x: mx, y: my}; 
}

你會注意到我使用了一些（可選的）在函數中未定義的變量。它們是：

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。僞代碼：

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 
    } 

}

來源

2012-05-04 14:34:00

好吧，我已經設法得到它，所以如果數組中的最後一個對象具有'found = true'的事情發生了，但現在我需要這樣做，以便如果數組中的任何對象具有'found = true'目前發生了一些事情，！發現功能覆蓋了所有內容...... –

如果'found'爲真，'！found'部分不應該觸發。你可以把你的代碼放在jsfiddle.net上嗎？ –

你不得不原諒那些糟糕的編碼......不得不採取相當大的塊，所以它不會太混亂:) http://jsfiddle.net/fpVL4/ –

偵測鼠標在畫布內的點擊位置

回答

相關問題