How to draw a semicircle?

Question

I want to draw a figure similar to the one in the picture above. Users can set the amount of white and gray displayed on this semicircle(the white + the gray = 10). Could you please tell me how to achieve this?

 

Answer 1

Hello Bayes,

I see two approaches:

Approach 1: Using Vector Graphic. For this purpose:

Step 1: In your GUI component add 10 instances of the Stroke Path view. Arrange the views to be as large as the entire circle arc.

Step 2: Configure the property Offset of all views to refer the center of the arc. See also Determine the origin position for the path coordinates.

Step 3: Add 10 instances of the Arc Path data object to the component. Connect the Arc data objects to the corresponding views. That means each view is connected with its own data object.

Step 4: Configure the property Radius of all data objects to correspond to the radius of the entire circle. Configure the property Style of all data objects to be Graphics::ArcStyle.Arc.

Step 5: Now configure the angles for all 10 segments. For this purpose configure individually the properties StartAngle and EndAngle of all 10 data objects.

Step 6: Finally by modifying the property Color of the views you can colorize the arcs individually. Here you decides which arcs appear white, or gris.

Step 7: To configure the width of the arc use the view's property Width.

Depending on your target system using the vector graphic may produce a higher CPU load. Therefore an alternative approach:

Step 1. Design 10 images (PNG files), each containing a single segment from the circle. You do this by using a graphic editor, like Photoshop or Gimp, etc. Ensure the arcs in the images are white over transparent background.

Step 2. Add the 10 image files to Embedded Wizard project as new Bitmap Resources.

Step 3. Configure all 10 Bitmap Resources to be stored in the ALPHA8 format. See also Specify image file and bitmap format.

Step 4. In the GUI component intended to display the arcs, add 10 instances of the Image view.

Step 5. Assign to each view individually one of the bitmap resources.

Step 6. Now resize and arrange the views to compose the arc.

Step 7. Finally by modifying the property Color of the views you can colorize the arcs individually. Here you decides which arc appears white or gris.

I hope it helps you further.

Best regards

Paul Banach