EllipseItem QML Type

A filled ellipse with an optional border. More...

Import Statement: import QtQuick.Studio.Components
Since: QtQuick.Studio.Components 1.0
Inherits:

Shape

Properties

Detailed Description

An ellipse can be just an ellipse shaped stroke, a filling, or a stroke with filling. The strokeColor, strokeWidth, and strokeStyle properties specify the appearance of the outline. The dashPattern and dashOffset properties specify the appearance of a dashed stroke.

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 gradient property. If both a color and a gradient are specified, the gradient is used.

To create an ellipse with a stroke, set a strokeWidth property that is greater than 0. The strokeWidth property specifies the width of the ellipse stroke. The default strokeWidth value is 4. Setting the strokeWidth value to -1 hides the border. To set the border outside, inside, or on top of the ellipse's boundary, use borderMode. The default value 0 sets the border inside the ellipse's boundary.

Example Usage

The QML code looks as follows:

EllipseItem {
    id: ellipse
    x: 571
    y: 199
    width: 167
    height: 125
    strokeColor: "#808080"
    strokeStyle: 1
    borderMode: 0
    strokeWidth: 4
}

EllipseItem {
    id: ellipseStroke
    x: 773
    y: 199
    width: 167
    height: 125
    fillColor: "#00ffffff"
    strokeWidth: 4
    strokeStyle: 1
    strokeColor: "#808080"
    borderMode: 0
}

EllipseItem {
    id: ellipseFilling
    x: 571
    y: 350
    width: 167
    height: 125
    strokeWidth: -1
    strokeStyle: 1
    strokeColor: "#808080"
    borderMode: 0
}

EllipseItem {
    id: ellipseDashDotStroke
    x: 773
    y: 350
    width: 167
    height: 125
    strokeWidth: 4
    strokeStyle: 4
    strokeColor: "#808080"
    fillColor: "#00ffffff"
    borderMode: 0
}

Property Documentation

borderMode : int

It defines where the border is drawn.

ConstantDescription
Border.InsideThe border is drawn along the inside edge of the item and does not affect the item width. This is the default value.
Border.MiddleThe border is drawn over the edge of the item and does not affect the item width.
Border.OutsideThe border is drawn along the outside edge of the item and increases the item width by the value of strokeWidth.

The default value is 0, which sets the border along the inside edge of the Item.

See also strokeWidth.


dashOffset : alias

The starting point of the dash pattern for the ellipse border.

The offset is measured in terms of the units used to specify the dash pattern. For example, a pattern where each stroke is four units long, followed by a gap of two units, will begin with the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of the gap.

The default value is 0.

See also QPen::setDashOffset().


dashPattern : alias

The dash pattern of the ellipse border specified as the dashes and the gaps between them.

The dash pattern is specified in units of the pen's width. That is, a dash with the length 5 and width 10 is 50 pixels long.

Each dash is also subject to cap styles, and therefore a dash of 1 with square cap set will extend 0.5 pixels out in each direction resulting in a total width of 2.

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 : alias

The ellipse fill color.

A ellipse can be filled with a solid color or with any of the linear, radial, or conical gradients.

When set to transparent, no filling occurs.

The default value is white.


gradient : alias

The gradient of the ellipse fill color.

By default, no gradient 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.


strokeColor : alias

The color used to draw the border of the ellipse. When set to transparent, no line is drawn. The default value is red.

See also QColor.


strokeStyle : int

The style of the ellipse stroke.

When set to None, no stroke is drawn.

The stroke can be set to have a Solid, Dash, Dot, Dash Dot, or Dash Dot Dot pattern.

The default value is Solid.


strokeWidth : alias

The width of the border of the ellipse. The default value is 4. A width of 1 creates a thin line. For no line, use a negative value or a transparent color.

Note: The width of the ellipse's border does not affect the geometry of the ellipse itself or its position relative to other items if anchors are used.

The border is rendered within the ellipse's boundaries.


© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.