Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

PolygonItem

The PolygonItem allows to display polygonal primitives with color. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.0.4

Properties

Detailed Description

With PolygonItem you can display colored convex polygons. The shape can be closed, opened, filled or unfilled.

Example Usage

Following examples demonstrates the usage of the PolygonItem.

Simple Polygon

This example demonstrates how to use the PolygonItem to display a black Rectangle that is not filled.

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   Scene {
     PolygonItem {
       anchors.centerIn: parent
       vertices: [
         Qt.point(0, 0),
         Qt.point(10, 0),
         Qt.point(10, 10),
         Qt.point(0, 10)
       ]
     }
   }
 }

Filled Polygon

This example demonstrates how to use the PolygonItem to display a blue complex shape.

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   Scene {
     PolygonItem {
       id: polygon
       color: "blue"
       fill: true
       vertices: [
         Qt.point(0, 0),
         Qt.point(40, 15),
         Qt.point(100, 110),
         Qt.point(20, 210),
         Qt.point(10, 150),
         Qt.point(80, 110),
         Qt.point(10, 30)
       ]
     }
   }
 }

Animate Polygon color

This example demonstrates how to animate color changes of the polygon.

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   Scene {
     PolygonItem {
       id: polygon
       color: "blue"
       fill: true
       vertices: [
         Qt.point(0, 0),
         Qt.point(40, 15),
         Qt.point(100, 110),
         Qt.point(20, 210),
         Qt.point(10, 150),
         Qt.point(80, 110),
         Qt.point(10, 30)
       ]
     }

     SequentialAnimation {
       running: true
       loops: Animation.Infinite
       ColorAnimation {
         target: polygon
         property: "color"
         to: "red"
         duration: 1000
       }
       ColorAnimation {
         target: polygon
         property: "color"
         to: "green"
         duration: 1000
       }
       ColorAnimation {
         target: polygon
         property: "color"
         to: "blue"
         duration: 1000
       }
     }
   }
 }

Property Documentation

close : bool

This property is used to close the polygon silhouette. It is only used when the polygon is not filled. It connects the first vertex with the last vertex in the vertices list. The default value is true.


color : color

This property stores the color of the primitive. The default value is black.


fill : bool

This property is used to draw a filled polygon if true, otherwise it draws only its silhouettes. The default value is false to draw only silhouettes.


texture : url

The texture which is used to cover the polygon. By default no texture will be used.

The texture is repeated horizontally and vertically to fill the whole Polygon.

Note: Make sure to provide 3 different sized texture versions to support multiple screens and put them into the +hd and +hd2 subfolder, similar to MultiResolutionImage.

This property was introduced in Felgo 2.2.0.


vertices : variant

This property holds the border vertices of the polygon. By default no vertex is set.