0
votes

Comment puis-je récupérer ma souriseuse au travail dans la portée que je veux?

Je suis juste de retour dans la balançoire de choses avec JavaScript et cela peut être simple mais saillance sur ma tête. J'ai ici un script de toile que je veux simplement souris sur le rectangle et le remplir avec noir.

<canvas id="myCanvas" width="500" height="250" style="border: 2px solid black"></canvas>

javascript mouseevent canvas events

1 commentaires

Vérifiez ici: Stackoverflow.com/Questtions/19055290/...

5 Réponses :

1
votes

Je pense que vous avez juste besoin d'inspecter le clientx et clienty position de l'événement contre le périmètre du rectangle. Assurez-vous également de passer événement à votre fonction remplir . XXX



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                      Mouseover  strong> ne tirera qu'une seule fois lorsque le curseur entre dans la toile. Vous pouvez simplement utiliser l'événement  strong> Mousemove  Strong> et comparer les coordonnées. Voici un exemple qui remplit quand il passe et s'efface lorsqu'il est sorti: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.rect(0, 0, 20, 20);
ctx.stroke();

function fill()
{
    if(event.clientX <= 20 && event.clientY <= 20)
    {
         ctx.fill();       
    }else{
         ctx.clearRect(0, 0, 20, 20);
    }
    console.log(event.clientX + " " + event.clientY);

}

c.addEventListener("mousemove", fill);

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous devez calculer la position de votre souris en fonction de plusieurs choses: 

 Position de la toile  Li>
 Position de la souris  Li>
 Style de la toile  li>
 ul>   p> 


<!doctype html>
<html>
  <head>
    <title>Railio</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="250" style="border: 2px solid black">
    </canvas>
  </body>
</html>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Déplacez simplement la pièce qui vérifie les coordonnées de la souris pour être <20 à votre fonction de test et donnez-la en tant qu'événement de paramètre. Cela devrait faire l'affaire, si je comprends votre question à droite. Vous ne pouvez pas empêcher l'événement de la machine à manger de se produire jusqu'à ce que la souris soit sur le recto, si vous ajoutez l'auditeur d'événement à la toile.                                 

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Il y a des réponses. C'est le mien: 
 J'ai ajouté une fonction pour détecter la position de la souris sur la toile:  omousepos  code>. Veuillez lire sur  La méthode getBoundingClientRect   P> 
 Aussi, j'utilise  MouseMove  Code> au lieu de  Mouseover  code> car  Mouseover  code> est tiré lorsque la souris est déplacée sur la toile.  MOUSEMOVE  CODE> est tiré  tandis que  strud> la souris est déplacé sur la toile.  P> 
 Pour détecter si la souris est sur la nouvelle, je suis sur la méthode  ispointinpath   p> 
  p> 


<canvas id="myCanvas"></canvas>

                                

                                                                    
                                    
                                    
                                        0 commentaires