Question

我目前正在开发一个项目，其中Web应用程序的鼠标光标是半径为 r 的圆圈，其中 r 可由用户更改。光标只需出现在页面上的特定元素中，但该元素仍应能够从用户接收点击。

从我的想象，我唯一的选择是使用javascript来改变光标图像;但是，这需要用户可以选择 r 的图像。

或者我可以使用一个画布元素跟随光标，它会在其中绘制一个半径 r 的圆圈，但是，我不确定原始元素是否仍会以这种方式获得点击。

有什么想法？有没有更好的技巧我错过了？

Answer 1

你可以用画布相当容易地做到这一点。

将要在画布上接收点击的元素放置。

跟踪顶层（接收点击的元素）上的鼠标位置，并使用这些鼠标位置在下面的画布上绘制。

以下是我为您制作的一些代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

</script>
</body>
</html>

Answer 2

继续使用画布。正如你已经说过的那样，用不同的鼠标光标图片来做这件事会很麻烦。

每当发生javascript事件时，它都会发生在所有元素中。也就是说，如果您在div中有一个链接并且单击它，则链接和div都会收到click事件。（但我不确定排序如何脱离我的头脑）

动态更改鼠标光标大小

2 个答案: