Обнаружить местоположение щелчка мыши на холсте

У меня возникает реальная проблема, пытаясь определить функцию для того, где я нахожусь на пустое пространство. До сих пор мне удалось определить, где я нажимаю объект, из которых 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 один раз, а затем идет, хотя список объектов, проверка против каждого из них с х и у. Псевдокод:

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' является истинным. Можете ли вы поместить свой код на jsfiddle.net? –

вам придется извинить плохое кодирование ... пришлось взять довольно большой кусок, чтобы он не был слишком запутанным :) http://jsfiddle.net/fpVL4/ –

Обнаружить местоположение щелчка мыши на холсте

ответ

Смежные вопросы