EllipseShape QML Type

A shape component that can render an ellipse, an arc, or a pie slice. More...

• List of all members, including inherited members

Properties

• borderMode : enumeration
• capStyle : enumeration
• cornerRadius : real
• dashOffset : real
• dashPattern : list<real>
• fillColor : color
• fillGradient : ShapeGradient
• fillRule : enumeration
• innerArcRatio : real
• joinStyle : enumeration
• startAngle : real
• strokeColor : color
• strokeStyle : enumeration
• strokeWidth : real
• sweepAngle : real

Detailed Description

The EllipseShape item paints an ellipse, which can be customized to appear as a full ellipse, an arc, or a filled pie slice. Its appearance is controlled by the startAngle and sweepAngle properties.

Basic Ellipse

By default, the item renders a full ellipse. The interior is filled with the fillColor, and the outline is drawn according to the strokeColor, strokeWidth, and strokeStyle properties.

Arc and Pie Slices

To create an arc or a pie slice, set the startAngle (0-360 degrees) and sweepAngle (0-360 degrees) to define the segment of the ellipse to draw.

Arc Mode: To create a simple arc (just the outline), set the fillColor to "transparent". The arc's line style can be customized with dashPattern and dashOffset.

Pie Mode: To create a filled pie slice (a segment connected to the center), simply set the fillColor. The outline of the slice will also be stroked.

Donut Mode: To create a donut ring (a hollow ellipse), set the innerArcRatio to a value between 0.0 and 1.0. This defines the ratio of the inner ellipse's radius to the outer ellipse's radius.

The area inside the stroke is painted using either a solid fill color, specified using the fillColor property, or a gradient, defined using one of the ShapeGradient subtypes and set using the fillGradient property. If both a color and a gradient are specified, the gradient is used.

An optional border can be added to an ellipse with its own color and thickness by setting the strokeColor and strokeWidth properties. Setting the color to transparent creates a border without a fill color.

Ellipse can be drawn with rounded corners using the cornerRadius property. The default value of the cornerRadius is 10 degrees.

EllipseShape's default value for preferredRendererType is Shape.CurveRenderer.

Example Usage

    EllipseShape {
        id: ellipseShape
        anchors.fill: parent
        width: 90
        height: 90
        startAngle: 0
        sweepAngle: 270
    }

Property Documentation

borderMode : enumeration

The borderMode property determines where the border is drawn along the edge of the ellipse.

This is the default value.

See also strokeWidth.

capStyle : enumeration

This property defines how the end points of lines are drawn. The default value is ShapePath.SquareCap.

cornerRadius : real

Controls the rounding of corners where the radial lines meet the elliptical arcs. For pie segments, this rounds the connection to the outer arc. For donut segments, this also rounds the connections to both inner and outer arcs.

The default value is 10.

dashOffset : real

This property defines the starting point on the dash pattern, measured in units used to specify the dash pattern.

The default value is 0.

See also QPen::setDashOffset().

dashPattern : list<real>

This property defines the dash pattern when strokeStyle is set to ShapePath.DashLine. The pattern must be specified as an even number of positive entries where the entries 1, 3, 5... are the dashes and 2, 4, 6... are the spaces. The pattern is specified in units of the pen's width.

The default value is (4, 2), meaning a dash of 4 * strokeWidth pixels followed by a space of 2 * strokeWidth pixels.

See also QPen::setDashPattern().

fillColor : color

This property holds the fill color.

When set to transparent, no filling occurs.

The default value is "white".

fillGradient : ShapeGradient

The fillGradient of the ellipse fill color.

By default, no fillGradient is enabled and the value is null. In this case, the fill uses a solid color based on the value of fillColor.

When set, fillColor is ignored and filling is done using one of the ShapeGradient subtypes.

fillRule : enumeration

This property holds the fill rule. The default value is ShapePath.OddEvenFill. For an explanation on fill rules, see QPainterPath::setFillRule().

innerArcRatio : real

This property defines the ratio between the inner and outer arcs.

Value range is between 0.0 and 1.0. Setting the value to 0.0 will cause the inner arc to collapse toward the center, drawing a solid filled ellipse. Setting the value to 1.0 makes the inner arc the same size as the outer ellipse, resulting in just an arc. Values between 0.0 and 1.0 create hollow elliptical rings.

The default value is 0.

joinStyle : enumeration

This property defines how joins between two connected lines are drawn. The default value is ShapePath.BevelJoin.

startAngle : real

The property defines the starting angle in degrees from which to begin drawing the ellipse.

0 degrees points to the top. Angle increases in clockwise direction.

The default value is 0.

strokeColor : color

This property holds the stroking color.

When set to transparent, no stroking occurs.

The default value is "black".

strokeStyle : enumeration

This property defines the style of stroking. The default value is ShapePath.SolidLine.

strokeWidth : real

This property holds the stroke width.

When set to a negative value, no stroking occurs.

The default value is 1.

sweepAngle : real

The angular extent in degrees to be drawn from the startAngle.

If set to positive value, the arc is drawn in clockwise direction. If set to negative value, the arc is drawn in counter-clockwise direction.

The default value is 360.