检测画布中的鼠标单击位置

Detect mouse click location within canvas

本文关键字：单击 位置 鼠标 布中 检测      更新时间：2023-09-26

我在尝试定义一个单击空白空间的位置的函数时遇到了一个真正的问题。到目前为止，我已经设法定义了单击对象的位置 - 其中有 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;
    }
}

获得完美的鼠标点击有点棘手，我将分享迄今为止我创建的最防弹的鼠标代码。它适用于所有浏览器，包括各种填充、边距、边框和附加组件（如绊脚石顶部栏）。

// 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
  }
}
相关文章：