个人中心
gpt4 book ai didi

javascript - 检测 Canvas 内的鼠标点击位置

转载 作者：行者123 更新时间：2023-11-29 09:56:40 24 4
gpt4 key购买 nike

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

最佳答案

获得完美的鼠标点击有点棘手，我将分享我迄今为止创建的最可靠的鼠标代码。它适用于所有浏览器，包括各种填充、边距、边框和附加组件(如 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
  }

}

关于javascript - 检测 Canvas 内的鼠标点击位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10449890/

24 4 0
文章推荐： mysql - JDBC 无法与 jdbc 建立连接 :mysql://
文章推荐： javascript - 如何判断一个 JavaScript 函数是否被定义？
文章推荐： JavaScript - 预加载图像
文章推荐： Javascript if 语句与比较
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com