Polygons on the Canvas

You can draw various polygons, such as triangles and pentagons, on a canvas.

The following example uses the same Basic UI template as the square drawing example. For more information on how to create the project with the template, see Squares on the Canvas.

To implement polygons in an application:

  1. Create a new project and specify the project name as DrawPolygon.

  2. After the project is created, open the .c source file in the src folder and add the new code to the create_base_gui() function to create a canvas and a triangle.

    The following functions are used to create the triangle:

    • evas_object_polygon_add() creates a polygon object on a canvas.
    • evas_object_polygon_point_add() adds point coordinates to a polygon object. A polygon must have at least 3 points. The first parameter indicates the polygon object, and the second and third parameters indicate the X and Y coordinates.
    • evas_object_color_set() specifies a color for a shape. The parameters are Red, Green, Blue, and semi-transparency.

    The label is not used in this example, so annotate it.

    /*
   Conformant
   Create and initialize elm_conformant
   elm_conformant is mandatory for the base GUI to have a proper size
   when the indicator or virtual keypad is visible
*/
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);
/*
   Label
   Create an actual view of the base GUI
   Modify this part to change the view
*/
#if 0 /* _NOT_USED */
    ad->label = elm_label_add(ad->conform);
    elm_object_text_set(ad->label, "<align=center>Hello Tizen</align>");
    evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    elm_object_content_set(ad->conform, ad->label);
#endif

/* Canvas */
Evas* canvas = evas_object_evas_get(ad->win);

/* Polygon triangle */
Evas_Object *polygon = evas_object_polygon_add(canvas);
evas_object_polygon_point_add(polygon, 20, 50);
evas_object_polygon_point_add(polygon, 170, 150);
evas_object_polygon_point_add(polygon, 20, 250);
evas_object_color_set(polygon, 255, 200, 0, 255);
evas_object_show(polygon);

/* Show the window after the base GUI is set up */
evas_object_show(ad->win);

  3. Build and run the application.

    A yellow triangle is displayed on the screen.

    Create the project

  4. Adding 4 points to a polygon object creates a square, while adding 5 points creates a pentagon.

    Create a pentagon by adding new code to the create_base_gui() function.

    /* Polygon triangle */
Evas_Object *polygon = evas_object_polygon_add(canvas);
evas_object_polygon_point_add(polygon, 20, 50);
evas_object_polygon_point_add(polygon, 170, 150);
evas_object_polygon_point_add(polygon, 20, 250);
evas_object_color_set(polygon, 255, 200, 0, 255);
evas_object_show(polygon);

/* Polygon -Pentagon */
polygon = evas_object_polygon_add(canvas);
evas_object_polygon_point_add(polygon, 360, 50);
evas_object_polygon_point_add(polygon, 460, 130);
evas_object_polygon_point_add(polygon, 410, 230);
evas_object_polygon_point_add(polygon, 310, 230);
evas_object_polygon_point_add(polygon, 260, 130);
evas_object_color_set(polygon, 255, 128, 128, 255);
evas_object_show(polygon);

  5. Build and run the application again.

    A pink pentagon is displayed next to the yellow triangle.

    Create the project

Edit this page