2010-11-08 20 views
1

Très bien, j'ai un canevas HTML avec plein de cercles dessus. Je veux que les événements mouseclick sur les cercles déclenchent une fonction Javascript. J'ai déjà les bases, mais les coordonnées sont évidemment si précises qu'il me faut comme 30 fois pour frapper les exactes coordonnées d'un certain cercle.À peu près égale à la fonction en Javascript?

Y at-il un moyen que je pourrais mettre en œuvre un "à peu près égal à"; en d'autres termes, je voudrais que les x et y de la souris déclenchent une fonction quand elle est assez proche de (disons 10px) les coordonnées de quelque chose sur la toile?

Merci

Alex

+0

pourriez-vous utiliser un cadre de délimitation rectangulaire pour la détection de collision? – zzzzBov

Répondre

1

pensées Première:

if ((mouselocx >= (corodinatex - 10)) && (mouselocx <= (corodinatex + 10)) { 
    if ((mouselocy >= (corodinatey - 10)) && (mouselocy <= (corodinatey + 10)) { 
Do something...  
} 
    } 
3

Vous pouvez utiliser quelque chose comme ceci pour tester si un point est dans un certain rayon d'un autre point:

function withinRadius (x1, y1, x2, y2, radius) { 
var dX = x1 - x2, dY = y1 - y2; 
return ((dX*dX) + (dY*dY) < radius*radius); 
} 
0

Cas général, vous voulez vérifier si vous avez cliqué dans un polygone créé par expandin g votre courbe vers l'extérieur dans les deux directions gauche et droite. Le calcul de ce polygone dans le cas des courbes de Bézier, des sections coniques générales, etc. est délicat. La plupart des bibliothèques graphiques vous permettent de définir un paramètre de largeur de trait et de le faire pour vous. Dessinez une courbe large en couleur d'arrière-plan en dessous de votre courbe 1px et vérifiez les hits sur le large. Assurez-vous de dessiner toutes les couleurs d'arrière-plan avant les couleurs de premier plan. Dans votre cas particulier de cercles, si vous n'avez pas une telle bibliothèque graphique, il suffira de voir si vous avez cliqué dans votre tolérance d'une distance du centre du cercle. Si vous avez un très petit nombre de cercles, vous pouvez parcourir toute la liste. Si vous avez plus d'une demi-douzaine (instinct pour savoir quand passer à un meilleur algorithme) diviser l'écran en quarts avec une liste des cercles touchés par un des rectangles, puis diviser en quarts dans ce rectangle et vérifiez avec les cercles qu'il pourrait être jusqu'à ce que vous avez juste une demi-douzaine de possibilités. Ensuite, allez dans la liste des possibilités de vérifier si vous êtes dans votre delta pour l'un des cercles.