动态更改鼠标光标的大小

Question

I'm currently working on a project where the mouse cursor for a web application is a circle with radius r where r can be changed by the user. 我目前正在开发一个项目，其中Web应用程序的鼠标光标是半径为r的圆，用户可以更改r 。 The cursor need only appear within a specific element on the page, but that element should still be able to receive clicks from the user. 光标仅需要出现在页面上的特定元素内，但该元素仍应能够接收用户的点击。

From what I can imagine, my only options are to use javascript to change the cursor image; 在我的想象中，我唯一的选择是使用javascript更改光标图像。 however, that would require an image for each possible choice of r the user has. 然而，这将要求每个可能的选择r的用户具有的图像。

Or I can have a canvas element follow the cursor which would draw a circle with radius r in it, however, I am not sure whether the original element would still receive clicks this way. 或者，我可以在画布元素之后跟随光标，以在其中绘制半径为r的圆，但是，我不确定原始元素是否仍会以此方式获得点击。

Any thoughts? 有什么想法吗？ Is there a better trick that I'm missing? 我还缺少更好的把戏吗？

Answer 1

You can do that fairly easily with canvas. 您可以使用画布轻松地做到这一点。

Placing the element that is going to receive clicks over the canvas. 将要接收点击的元素放在画布上。

Tracking the mouse position on the top layer (the element to receive clicks) and using those mouse positions to draw on the canvas below. 跟踪鼠标在顶层（接收点击的元素）上的位置，并使用这些鼠标位置在下面的画布上绘制。

Here is some code I made for you: 这是我为您制作的一些代码：

<!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

Go ahead and use a canvas. 继续使用画布。 As you stated already, it's going to be a hassle to do it with different mouse cursor pictures. 就像您已经说过的那样，使用不同的鼠标光标图片将很麻烦。

Whenever a javascript event occurs, it happens in all of elements. 每当发生javascript事件时，它就会在所有元素中发生。 That is, if you have a link inside of a div and it is clicked, both the link and div receive the click event. 也就是说，如果您在div内有一个链接并被单击，则该链接和div都会接收到click事件。 (But I'm not sure how the ordering goes off the top of my head) （但我不确定订购如何从头到尾）

动态更改鼠标光标的大小

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-09-22 08:12:20

解决方案2
0 2011-09-08 22:50:42

动态更改鼠标光标的大小

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-09-22 08:12:20

解决方案2 0 2011-09-08 22:50:42

解决方案1
1 已采纳 2011-09-22 08:12:20

解决方案2
0 2011-09-08 22:50:42