Android-细分Arc以使用菜单

Question

I would like to create a custom menu in android, which should look like the following picture.

Picture of the menu

I've already achieved to create the main part of the menu excluding the menu points. So it looks like the following picture.

Current state of the menu

This Menu is a CustomView and I drew these arcs as RectF with the canvas.drawArc Method. So I think it's quite obvious, what I'd like to achieve. I want to subdivide the Arc into evenly sized smaller arcs, or add new ones (which are exactly on the other one). I've tried to simply set the bounds of the these arcs to 1/3 of the bigger one, however, I can't achieve this result this way.

Does anyone know a method to do this, or do I completely change my approach?

Answer 1

Ok. After some research, experimenting and simple math I've come up with the following code.

 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));
}

It is quite simple actually. With the count of all MenuItems and the sweep angle, I calculate the angle of each line. Then I use the angle functions to calculate the x and y start and end values.

So I use the formulae:

x (adjacent side) = centerX (adjust to coordinate system) + hypotenuse*cos(angle)

y (opposite side) = centerY (adjust to coordinate system) + hypotenuse*sin(angle)

It's important to mention that the angle in the angle functions have to be in radian measure. Also, I had to subtract/add have of the stroke because I used stroke style to draw these arcs, meaning that the radius goes to the center of the stroke.

I put these values in a list and draw them after I've drawn everything else, so they are above everything else.

I hope I was able to help everyone, who stumbles over the same problem.