Comment obtenir les coordonnées pour une zone ou une région particulière dans la toile html5?

Question

J'ai créé un cercle en utilisant une toile et l'ai divisé en lignes. Je veux la coordonnée d'une zone particulière: si je clique sur une zone particulière, cela seul devrait être cliquable. Prenez un exemple de jeu de roues de mots où un cercle est divisé en plusieurs zones avec des coordonnées différentes et des lettres placées à l'intérieur des zones divisées. Si je veux cliquer sur la zone particulière avec la lettre «A», le «A» devrait être cliqué et devrait être affiché dans une zone de texte.

Comment accomplir ceci?

Answer 1

Espérons que ce qui suit vous permet de démarrer. Notez que "la zone particulière avec la lettre" A "" est appelée un secteur du cercle.

Supposons

l'axe x est horizontal et positif vers la droite

l'axe y est vertical et positif vers le bas

angles sont mesurés en radians dans le sens horaire à partir de l'axe x positif

le premier secteur commence à l'angle A

cent re de cercle est au (cx, cy) et a un rayon r

le cercle est divisé en n secteurs égaux

le curseur est sur la position (x, y)

la fonction prédéfinie Math. atan2 (y, x) renvoie l'angle (de -pi et pi) entre l'axe x positif et le segment de droite de (0,0) à (x, y) où i est et entier et i < = x < i les rendements +1 i

Math.floor (x) de la fonction prédéfinie Puis

Soit S l'angle au centre de chaque secteur

S = 2 * pi/n

Créer une GetAngle de fonction (x, y, cx, cy), qui renvoie l'angle entre 0 et 2Pi entre la ligne horizontale traversant (cx, cy) dans la direction x positive et le segement de ligne de (cx, cy) à (x, y)

pseudocode

function getangle(x,y,cx,cy) 
{ 
    var ang = Math.atan2(y-cy,x-cx) 
    if(ang<0) 
    { 
     ang+=2*Math.PI 
    } 
    return ang 
} 

Maintenant, vous pouvez créer une fonction pour vérifier quel secteur, le cas échéant, le curseur se trouve.

Renvoie -1 si le curseur est en dehors du cercle, numéro de secteur de 1 à n sinon.

pseudocode

function isInSector(x,y) (x,y) coordinates of cursor 
{ 
    // first check if cursor is outside of circle 
    if((cx-x)*(cx-x)+(cy-y)*(cy-y)>r*r) 
    { 
     return -1 
    } 
    // find angle for cursor position 
    B=getangle(x,y,cx,cy) 
    return Math.floor((B-A)/S)+1 
}