Android - Subdivide Arc pour l'utilisation du Menu

Question

Je voudrais créer un menu personnalisé dans Android, qui devrait ressembler à l'image suivante.

Image du menu

Je l'ai déjà réalisé pour créer la partie principale du menu à l'exception des points de menu. Donc, il ressemble à l'image suivante.

état actuel du menu

Ce menu est un CustomView et j'ai dessiné ces arcs comme RectF avec la méthode canvas.drawArc. Donc, je pense que c'est assez évident, ce que je voudrais réaliser. Je veux subdiviser l'Arc en petits arcs de taille égale, ou en ajouter de nouveaux (qui sont exactement sur l'autre). J'ai essayé de simplement définir les limites de ces arcs à 1/3 de la plus grande, cependant, je ne peux pas obtenir ce résultat de cette façon.

Est-ce que quelqu'un connaît une méthode pour le faire, ou est-ce que je change complètement mon approche?

Answer 1

Ok. Après quelques recherches, expériences et mathématiques simples, j'ai trouvé le code suivant.

private void drawMenu(Canvas canvas, RectF arcBoundaries, int arcAngle, int sweep, Paint arcPaint, MenuPosition position, double scaleValue, int strokeWidth) { 

     int countAllMenuItems = getMenuCount(position); 
     int newAngle = arcAngle; 
     int counter = 0; 

     for (MenuItemView menuItem : menuItems) { 
      if (menuItem.getPosition().toLowerCase().equals(position.toString().toLowerCase())) { 
       canvas.drawArc(arcBoundaries, newAngle, sweep/countAllMenuItems, false, arcPaint); 
       newAngle += sweep/countAllMenuItems; 
       if (counter != countAllMenuItems - 1) { 
        calculateLines(arcBoundaries, newAngle, strokeWidth); 
       } 
       counter++; 
      } 
     } 

    } 
} 

private void calculateLines(RectF arcBoundaries, int angle, int strokeWidth) { 
    int realAngle = angle % 360; 
    float xRadius = arcBoundaries.width()/2; 
    float yRadius = arcBoundaries.height()/2; 

    double x = arcBoundaries.centerX() + (xRadius-(strokeWidth/2))*Math.cos(realAngle * Math.PI/180); 
    double y = arcBoundaries.centerY() + (yRadius-(strokeWidth/2))*Math.sin(realAngle * Math.PI/180); 
    double xEnd = arcBoundaries.centerX() + (xRadius+(strokeWidth/2))*Math.cos(realAngle * Math.PI/180); 
    double yEnd = arcBoundaries.centerY() + (yRadius+(strokeWidth/2))*Math.sin(realAngle * Math.PI/180); 


    lineList.put(new Point((int) x, (int) y), new Point((int) xEnd, (int) yEnd)); 
} 

C'est en fait assez simple. Avec le nombre de tous les éléments Menu et l'angle de balayage, je calcule l'angle de chaque ligne. Ensuite, j'utilise les fonctions d'angle pour calculer les valeurs de début et de fin x et y.

J'utiliser les formules:

x (côté adjacent) = centerX (ajuster le système de coordonnées) + hypoténuse * cos (angle)

y (côté opposé) = centerY (ajuster le système de coordonnées) + hypoténuse * sin (angle)

Il est important de mentionner que l'angle dans les fonctions d'angle doit être en radians. De plus, j'ai dû soustraire/ajouter une partie du trait parce que j'ai utilisé le style de trait pour dessiner ces arcs, ce qui signifie que le rayon va au centre du trait.

Je mets ces valeurs dans une liste et les dessine après avoir dessiné tout le reste, donc elles sont au-dessus de tout le reste. J'espère que j'ai été en mesure d'aider tout le monde, qui trébuche sur le même problème.