554 views
in Embedded Wizard Studio by
How to draw a round edged rectangle using Vector graphics?

1 Answer

0 votes
by

Hi GLM,
you can use a Views::FillPath to render your Graphics::Path with rounded corners.

Preparing the Path may look like this:
 

// Update the shape
var point size = Bounds.size;
var int32 edges = 40;
var int32 radius = 10;
var int32 padding = 4;

if ( size.x < padding || size.y < padding )
  padding = 0;

if ( radius > (size.y - padding) / 2 )
  radius = (size.y - padding) / 2;

if ( radius > (size.x - padding) / 2 )
  radius = (size.x - padding) / 2;

Path.InitSubPath( 0, edges );
Path.Begin( 0, padding, padding + radius );

Path.AddArc( 0, padding + radius, padding + radius, radius, radius, 180.0, 270.0, edges / 5 );
Path.AddLine( 0, size.x - radius - padding, padding );
Path.AddArc( 0, size.x - padding - radius, padding + radius, radius, radius, 270.0, 360.0, edges / 5 );
Path.AddLine( 0, size.x - padding, size.y - radius - padding );
Path.AddArc( 0, size.x - padding - radius, size.y - padding - radius, radius, radius, 0.0, 90.0, edges / 5 );
Path.AddLine( 0, padding + radius, size.y - padding );
Path.AddArc( 0, padding + radius, size.y - padding - radius, radius, radius, 90.0, 180.0, edges / 5 );
Path.Close( 0 );

InvalidateViewState();

Regards,
Rudolf

by
Hi Rudolf,

How this code can be modified to have different values for top left, top right, bottom left and bottom right radiuses? And the values have to be set via on set methods.

Regards,

Sazna.
by

Hi Sazna,
within the code snippet the radius is handled via a local variable var int32 radius = 10; .
If you want to handle it dynamically, define a Property 'Radius' within your class and use the 'pure Radius' instead of the local variable.
Do not forget to reconstruct the path whenever the Radius get changed.
If you want to handle each corner radius separately, please add four Properties and use them within the code. Here I recommend to put the code to reconstruct the path into a Slot method and call this Slot via postsignal within the OnSet methods of the different Properties.

Regards,
Rudolf

by
Hi Rudolf,

I tried these steps you mentioned above but it won't work. Could you please send me the modified code for this scenario.?

Regards,

Sazna.
by

Hi Sazna,
please find here a small sample for a RoundedRectangle. Note that this is a simple approach. To realize it in a resource constraint way, you might have to render only the rounded areas using paths and use rectangles for the rest.

Regards,
Rudolf

 

by
Hi Rudolf,

Thank you for the explanation and sample application. I found and corrected the gap in my design form your one. Now it is working fine according to our design requirements.

Thank You,

Sazna.
by

Hi Rudolf,

For a pushbutton application, I modified the pushbutton from component templates to have rounded rectangle border using stroke path with default background. In prototyper it displays fine but in the development board  it didn't display the border. What could be the problem for this?

Regards,

Sazna

by
Hi Sazna,

what target are you using? Do you get any error message in the console window (via serial connection)?

Let us know...

Best regards,
Manfred.
by
Hi Manfred,

I tried using NXP_IMXRT1170 - EVK - PXP board and there is no error,successfully flashed but the border is not visible.

Regards,

Sazna.
by
Hi Sazna,

can you provide a small example - I can try it on the iMXRT1170EVK.

Best regards,

Manfred.
by

Hi Manfred,

I just created a project which consists of a pushbutton with rounded rectangle border and a path created using stroke path. Please check it and share a solution for this problem.

Regards,

Sazna.

by

Hi Sazna,

I just had a quick view into the project - you configured the path with 10000 edges. Why do you need so many edges for that stroke path?

I assume you got some error message during runtime on your target - please have a look to the console window.

Best regards,

Manfred.

by
Hi Manfred,

I just checked the smoothness of the path by increasing the no of edges. Now I tried with 100 edges and flashed it  to the board. It displays as it is. Thank you so much for your time in fixing this issue.

Regards,

Sazna.
by

Hi Team,

I have created a rounded rectangle by using stroke path and fill path and connected same path object. 

When simulating both paths are visible. But when flashing to the board I couldn't able to see the stroke path as border. only filled rectangle is there. What causes this issue? 

Regards,

Sazna.

by

Hi Sazna,
I guess you run out of memory for the rendering tasks. Please have a look to the console window.
So please reduce the edges or increase the 'EW_MAX_ISSUE_TASKS' within ewconfig.h.

Regards,
Rudolf

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...