How to draw a polygon with QML ?

bam500

Hi all,

I'd like to draw a polygon with QML, how is it possible to do it ?

I tried with QML Canvas but there's nothing to draw a polygon.

Thank you,

Regards,

bam500

Nobody has an idea ? Maybe it's not possible only with QML, I just need a confirmation to not investigate this way.

Regards,

clochydd

Hi,
AFAIK there's currently no QML type for drawing a polygon.
If it's not too complex, you may draw the polygon with a couple of rotated Rectangles or use a C++ Object.

bam500

@clochydd said:

Hi,
AFAIK there's currently no QML type for drawing a polygon.
If it's not too complex, you may draw the polygon with a couple of rotated Rectangles or use a C++ Object.

Thanks for your reply,

Alright, I have to display an ellipse but simulated with a polygon so I'm going to search on the C++ Object side.

Regards,

clochydd

You may draw an ellipse simply with a Rectangle and it's radius property:
height = width and radius = width / 2 will draw a circle...
(if there's no need for the polygon)

? Offline

Hi! You can create your own QQuickPaintedItem derived class. You need to implement its paint() function. In this function you can use the QPainter API to draw polygon of your choice. Add properties with Q_PROPERTY to hand over parameters to your object from the QtQuick side.

Charby

@bam500 Another option, is to follow your first idea : using the Canvas.
Here is an example taken from the (excellent) Qt Cadaques book drawing a 4 sides polygon (ok let's call it a rectangle ;-) ) :

Canvas {
        id: root
        // canvas size
        width: 200; height: 200
        // handler to override for drawing
        onPaint: {
            // get context to draw with
            var ctx = getContext("2d")
            // setup the stroke
            ctx.lineWidth = 4
            ctx.strokeStyle = "blue"
            // setup the fill
            ctx.fillStyle = "steelblue"
            // begin a new path to draw
            ctx.beginPath()
            // top-left start point
            ctx.moveTo(50,50)
            // upper line
            ctx.lineTo(150,50)
            // right line
            ctx.lineTo(150,150)
            // bottom line
            ctx.lineTo(50,150)
            // left line through path closing
            ctx.closePath()
            // fill using fill style
            ctx.fill()
            // stroke using line width and stroke style
            ctx.stroke()
        }
    }

kornava

Check the "Canvas element" in the Qt5_cadaques book:
http://qmlbook.github.io/en/ch07/index.html