Inital commit of the Komplex Hub
This commit is contained in:
Digital Artifex
@@ -0,0 +1,223 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2024 The Qt Company Ltd.
|
||||
** Contact: https://www.qt.io/licensing/
|
||||
**
|
||||
** This file is part of Qt Quick Studio Components.
|
||||
**
|
||||
** $QT_BEGIN_LICENSE:GPL$
|
||||
** Commercial License Usage
|
||||
** Licensees holding valid commercial Qt licenses may use this file in
|
||||
** accordance with the commercial license agreement provided with the
|
||||
** Software or, alternatively, in accordance with the terms contained in
|
||||
** a written agreement between you and The Qt Company. For licensing terms
|
||||
** and conditions see https://www.qt.io/terms-conditions. For further
|
||||
** information use the contact form at https://www.qt.io/contact-us.
|
||||
**
|
||||
** GNU General Public License Usage
|
||||
** Alternatively, this file may be used under the terms of the GNU
|
||||
** General Public License version 3 or (at your option) any later version
|
||||
** approved by the KDE Free Qt Foundation. The licenses are as published by
|
||||
** the Free Software Foundation and appearing in the file LICENSE.GPL3
|
||||
** included in the packaging of this file. Please review the following
|
||||
** information to ensure the GNU General Public License requirements will
|
||||
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
|
||||
**
|
||||
** $QT_END_LICENSE$
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
/*!
|
||||
\qmltype EllipseItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A filled ellipse with an optional border.
|
||||
|
||||
An ellipse can be just an ellipse shaped stroke, a filling, or a stroke with filling. The
|
||||
\l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
|
||||
outline. The \l dashPattern and \l 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
|
||||
\l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
|
||||
using the \l gradient property. If both a color and a gradient are specified, the gradient is
|
||||
used.
|
||||
|
||||
To create an ellipse with a stroke, set a \l strokeWidth property that is greater than 0. The
|
||||
\l strokeWidth property specifies the width of the ellipse stroke. The default \l strokeWidth
|
||||
value is 4. Setting the \l strokeWidth value to -1 hides the border. To set the border outside,
|
||||
inside, or on top of the ellipse's boundary, use \l borderMode. The default value 0 sets the
|
||||
border inside the ellipse's boundary.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
\image studio-ellipse.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
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
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: 200
|
||||
height: 150
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {ellipse}
|
||||
*/
|
||||
property alias gradient: path.fillGradient
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeStyle} {ellipse}
|
||||
*/
|
||||
//property alias strokeStyle: path.strokeStyle
|
||||
property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeWidth} {ellipse}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {ellipse}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {ellipse}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {ellipse}
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {ellipse}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
|
||||
property bool __curveRendererActive: root.__preferredRendererTypeAvailable
|
||||
&& root.rendererType === Shape.CurveRenderer
|
||||
|
||||
layer.enabled: root.antialiasing && !root.__curveRendererActive
|
||||
layer.smooth: root.antialiasing && !root.__curveRendererActive
|
||||
layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-borderMode
|
||||
*/
|
||||
property int borderMode: 0
|
||||
|
||||
property real borderOffset: {
|
||||
if (root.borderMode === 0)
|
||||
return root.strokeWidth * 0.5
|
||||
if (root.borderMode === 1)
|
||||
return 0
|
||||
|
||||
return -root.strokeWidth * 0.5
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: {
|
||||
if (root.borderMode === 0)
|
||||
return 0
|
||||
if (root.borderMode === 1)
|
||||
return -root.strokeWidth * 0.5
|
||||
|
||||
return -root.strokeWidth
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
joinStyle: ShapePath.MiterJoin
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
startX: root.width * 0.5
|
||||
startY: root.borderOffset
|
||||
|
||||
strokeStyle: root.strokeStyle
|
||||
|
||||
PathArc {
|
||||
x: path.startX
|
||||
y: root.height - root.borderOffset
|
||||
radiusX: root.width * 0.5 - root.borderOffset
|
||||
radiusY: root.height * 0.5 - root.borderOffset
|
||||
useLargeArc: true
|
||||
}
|
||||
|
||||
PathArc {
|
||||
x: path.startX
|
||||
y: path.startY
|
||||
radiusX: root.width * 0.5 - root.borderOffset
|
||||
radiusY: root.height * 0.5 - root.borderOffset
|
||||
useLargeArc: true
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user