javascript - 检测圆重叠

Question

我试图在假光标的任何部分悬停在圆上时触发悬停功能。

我试过假光标的 X 和 Y 位置，但这只对一个方向有效。有没有更聪明的方法来解决这个问题？

这是一支笔，展示了我正在尝试做的事情:当粉红色圆圈(假光标)的任何部分接触到绿色圆圈时触发悬停功能。

https://codepen.io/Jessels/pen/LYPxmqx

$('.cursor')
  .eq(0)
  .css({
        left: e.pageX - 20,
        top: e.pageY - 5
  });

Answer 1

您可以将其添加到您的 mousemove 事件中。

这里我们正在寻找交点以及“光标”是否在圆圈内。

这是我找到这段代码的地方:Fiddle

这是我的 CodePen Demo

$(document).mousemove(function(e) {

  $('.cursor').eq(0).css({
    left: e.pageX - 25,
    top: e.pageY - 20
  });

  // circles
  var c1 = $('.cursor');
  var c2 = $('.circle');

  // radius
  var d1 = c1.outerWidth(true) / 2;
  var d2 = c2.outerWidth(true) / 2;

  // center of first circle
  var x1 = c1.offset().left + c1.width() / 2;
  var y1 = c1.offset().top + c1.height() / 2;

  // center of second circle
  var x2 = c2.offset().left + c2.width() / 2;
  var y2 = c2.offset().top + c2.height() / 2;

  function calc() {
    var a = d2;
    var b = d1;
    var c = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    var d = (b * b + c * c - a * a) / (2 * c);
    var h = Math.sqrt((b * b) - (d * d));
    if (d < 0 || $.isNumeric(h)) {
      c2.css('background', 'blue');
    } else {
      c2.css('background', 'green');
    }
  }
  calc();


});

.cursor {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  z-index: 999;
  background: hotpink;
}

.circle {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>

<div class="circle">
  <div class="inter1 inter"></div>
  <div class="inter2 inter"></div>
  <div>