动态更改鼠标光标大小 [英] Dynamically change mouse cursor size
问题描述
我目前正在开发一个项目，其中网络应用程序的鼠标光标是一个半径为 r 的圆形，其中 r 可以由用户更改。光标只需显示在网页上的特定元素中，但该元素仍应能够接收用户的点击。
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. 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.
从我可以想象的，我唯一的选项是使用javascript来更改光标图像;然而，这将需要用户具有的每个可能的选择 r 的图像。
From what I can imagine, my only options are to use javascript to change the cursor image; however, that would require an image for each possible choice of r the user has.
或者我可以在光标后面有一个canvas元素，它将绘制一个半径 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.
任何想法？
推荐答案
使用canvas可以很容易地做到。
You can do that fairly easily with canvas.
将要接收点击的元素放置在画布上。
Placing the element that is going to receive clicks over the canvas.
跟踪鼠标在顶层的位置
以下是我为您制作的一些代码：
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>
这篇关于动态更改鼠标光标大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
