Dynamiquement changer la taille du curseur de la souris

Je travaille actuellement sur un projet où le curseur de la souris pour une application web est un cercle de rayon r où r peut être modifié par l'utilisateur. Le curseur doit uniquement apparaître dans un élément spécifique de la page, mais cet élément doit toujours pouvoir recevoir des clics de la part de l'utilisateur. D'après ce que je peux imaginer, mes seules options sont d'utiliser javascript pour changer l'image du curseur; cependant, cela nécessiterait une image pour chaque choix possible de r l'utilisateur a.Dynamiquement changer la taille du curseur de la souris

Ou je peux avoir un élément de canevas suivre le curseur qui dessinerait un cercle de rayon r, cependant, je ne suis pas sûr que l'élément d'origine recevrait toujours des clics de cette façon.

Des pensées? Y a-t-il un meilleur truc qui me manque?

Source

2011-09-08 Ivan

Vous pouvez le faire assez facilement avec de la toile.

Placer l'élément qui va recevoir des clics sur le canevas.

Suivi de la position de la souris sur le calque supérieur (l'élément pour recevoir des clics) et utilisation de ces positions de souris pour dessiner sur la toile ci-dessous.

Voici un code que j'ai fait pour vous:

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

Source

2011-09-22 08:12:20 Carb0n1c

Allez-y et utilisez une toile. Comme vous l'avez déjà dit, ça va être compliqué de le faire avec des images de curseur de souris différentes. Chaque fois qu'un événement javascript se produit, il se produit dans tous les éléments. C'est-à-dire que si vous avez un lien à l'intérieur d'une div et que vous cliquez dessus, le lien et la div reçoivent l'événement click. (Mais je ne suis pas sûr comment la commande va de la tête)

Source

2011-09-08 22:50:42

cela dépend du navigateur: P http://www.quirksmode.org/js/events_order.html –

Dynamiquement changer la taille du curseur de la souris

Répondre

Questions connexes