0

I need to draw something like this:

Segmented circle with content on each segment

I was hoping that this guy posted some code of how he drew his segmented circle to begin with, but alas he didn't.

I also need to know which segment is where after interaction with the wheel - for instance if the wheel is rotated, I need to know where the original segments are after the rotation action.

Two questions:

  1. Do I draw this segmented circle (with varying colours and content placed on the segment) with OpenGL or using Android Canvas?
  2. Using either of the options, how do I register which segment is where?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

EDIT:

Ok, so I've figured out how to draw the segmented circle using Canvas (I'll post the code as an answer). And I'm sure I'll figure out how to rotate the circle soon. But I'm still unsure how I'll recognize a separate segment of the drawn wheel after the rotation action.

Because, what I'm thinking of doing is drawing the segmented circle with these wedges, and the sort of handling the entire Canvas as an ImageView when I want to rotate it as if it's spinning. But when the spinning stops, how do I differentiate between the original segments drawn on the Canvas?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I've read about how to draw a segment on its own (here also), OpenGL, Canvas and even drawing shapes and layering them, but I've yet to see someone explaining how to recognize the separate segments.

Can drawBitmap() or createBitmap() perhaps be used?

If I go with OpenGL, I'll probably be able to rotate the segmented wheel using OpenGL's rotation, right?

I've also read that OpenGL might be too powerful for what I'd like to do, so should I rather consider "the graphic components of a game library built on top of OpenGL"?

Community
  • 1
  • 1
marienke
  • 2,465
  • 4
  • 34
  • 66

1 Answers1

1

This kind of answers my first question above - how to draw the segmented circle using Android Canvas:

Using the code found here, I do this in the onDraw function:

    // Starting values
    private int startAngle = 0;
    private int numberOfSegments = 11;
    private int sweepAngle = 360 / numberOfSegments;

    @Override
    protected void onDraw(Canvas canvas) {

        setUpPaint();

        setUpDrawingArea();

        colours = getColours();

        Log.d(TAG, "Draw the segmented circle");
        for (int i = 0; i < numberOfSegments; i++) {

            // pick a colour that is not the previous colour
            paint.setColor(colours.get(pickRandomColour()));

            // Draw arc
            canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);

            // Set variable values
            startAngle -= sweepAngle;
        }
    }

This is how I set up the drawing area based on the device's screen size:

private void setUpDrawingArea() {
        Log.d(TAG, "Set up drawing area.");

        // First get the screen dimensions
        Point size = new Point();

        Display display = DrawArcActivity.this.getWindowManager().getDefaultDisplay();
        display.getSize(size);
        int width = size.x;
        int height = size.y;

        Log.d(TAG, "Screen size = "+width+" x "+height);

        // Set up the padding
        int paddingLeft = (int) DrawArcActivity.this.getResources().getDimension(R.dimen.padding_large);
        int paddingTop = (int) DrawArcActivity.this.getResources().getDimension(R.dimen.padding_large);
        int paddingRight = (int) DrawArcActivity.this.getResources().getDimension(R.dimen.padding_large);
        int paddingBottom = (int) DrawArcActivity.this.getResources().getDimension(R.dimen.padding_large);

        // Then get the left, top, right and bottom Xs and Ys for the rectangle we're going to draw in
        int left = 0 + paddingLeft;
        int top = 0 + paddingTop;
        int right = width - paddingRight;
        int bottom = width - paddingBottom;

        Log.d(TAG, "Rectangle placement -> left = "+left+", top = "+top+", right = "+right+", bottom = "+bottom);

        rectF = new RectF(left, top, right, bottom);
    }

That (and the other functions which are pretty straight forward, so I'm not going to paste the code here) draws this: The segments are different colours with every run.

Segmented circle

marienke
  • 2,465
  • 4
  • 34
  • 66