- Qt 6.12
- Qt Quick
- QML Types
- QtQuick.Shapes.DesignHelpers
- EllipseShape
- Qt 6.12.0 Reference Documentation

# EllipseShape QML Type

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

Import Statement: | `import QtQuick.Shapes.DesignHelpers 6.12`
Since: | QtQuick 6.10

- 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 QtQuick.Shapes::Shape::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.

Constant | Description
--- | ---
`EllipseShape.Inside` | The border is drawn along the inside edge of the item and does not affect the item width.

This is the default value.

Constant | Description
--- | ---
`EllipseShape.Middle` | The border is drawn over the edge of the item and does not affect the item width.
`EllipseShape.Outside` | The border is drawn along the outside edge of the item and increases the item width by the value of strokeWidth.

See also strokeWidth.

### capStyle : enumeration

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

Constant | Description
--- | ---
`ShapePath.FlatCap` | A square line end that does not cover the end point of the line.
`ShapePath.SquareCap` | A square line end that covers the end point and extends beyond it by half the line width.
`ShapePath.RoundCap` | A rounded line end.

### 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"`.

Note: If either fillGradient is set to something other than `null`, it will be used instead of `fillColor`.

### 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.

Note: The Gradient type cannot be used here. Rather, prefer using one of the advanced subtypes, like LinearGradient.

### fillRule : enumeration

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

Constant | Description
--- | ---
`ShapePath.OddEvenFill` | Odd-even fill rule.
`ShapePath.WindingFill` | Non-zero winding fill rule.

### 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`.

Constant | Description
--- | ---
`ShapePath.MiterJoin` | The outer edges of the lines are extended to meet at an angle, and this area is filled.
`ShapePath.BevelJoin` | The triangular notch between the two lines is filled.
`ShapePath.RoundJoin` | A circular arc between the two lines is filled.

### 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.

Constant | Description
--- | ---
`ShapePath.SolidLine` | A plain line.
`ShapePath.DashLine` | Dashes separated by a few pixels.

### 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`.