Динамически изменять размер курсора мыши - PullRequest
Новая
       2

Динамически изменять размер курсора мыши

1 голос
/ 09 сентября 2011

В настоящее время я работаю над проектом, в котором курсор мыши для веб-приложения представляет собой круг с радиусом r , где r может быть изменен пользователем. Курсор должен появляться только внутри определенного элемента на странице, но этот элемент должен по-прежнему иметь возможность получать клики от пользователя.

Из того, что я могу себе представить, мои единственные варианты - использовать javascript для изменения изображения курсора; однако для этого потребуется изображение для каждого возможного выбора r , который есть у пользователя.

Или я могу заставить элемент canvas следовать за курсором, который нарисовал бы круг с радиусом r , однако я не уверен, будет ли исходный элемент по-прежнему получать щелчки таким образом.

Есть мысли? Есть ли лучший трюк, который мне не хватает?

Ответы [ 2 ]

1 голос
/ 22 сентября 2011

Вы можете сделать это довольно легко с помощью canvas.

Размещение элемента, который будет получать щелчки, поверх холста.

Отслеживание положения мыши на верхнем слое (элемент для получениящелкает) и используя эти положения мыши для рисования на холсте ниже.

Вот код, который я сделал для вас: 

<!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>
0 голосов
/ 09 сентября 2011

Иди и используй холст.Как вы уже сказали, это будет хлопотно делать с разными изображениями курсора мыши.

Всякий раз, когда происходит событие javascript, оно происходит во всех элементах.То есть, если у вас есть ссылка внутри div и она нажата, и ссылка, и div получают событие click.(Но я не уверен, как порядок у меня на макушке)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...