Inital commit of the Komplex Hub
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 SvgPathItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A path defined using an SVG path data string.
|
||||
|
||||
The SvgPathItem type uses an SVG path data string to draw a path as a line.
|
||||
|
||||
The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify the appearance of the
|
||||
path. The \l dashPattern and \l dashOffset properties specify the appearance of dashed lines.
|
||||
|
||||
The \l capStyle property specifies whether line ends are square or rounded.
|
||||
|
||||
The \l joinStyle property specifies how to connect two path segments. If the path segments
|
||||
enclose areas, they can be 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.
|
||||
|
||||
If the path has curves, it may be appropriate to set the \c antialiasing property that is
|
||||
inherited from \l Item to improve its appearance.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
\image studio-svgpathitem.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
SvgPathItem {
|
||||
id: sVGPathItem
|
||||
x: 2
|
||||
y: 3
|
||||
width: 152
|
||||
height: 154
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
path: "M127.99,0 L150.061,124.052 L22.0704,146.823 L0,22.7711 L127.99,0"
|
||||
fillColor: "transparent"
|
||||
}
|
||||
|
||||
SvgPathItem {
|
||||
id: sVGPathItem1
|
||||
x: 56.32
|
||||
y: 44.32
|
||||
width: 150.06
|
||||
height: 146.82
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
path: "M127.99,0 L150.061,124.052 L22.0704,146.823 L0,22.7711 L127.99,0"
|
||||
fillColor: "transparent"
|
||||
}
|
||||
|
||||
SvgPathItem {
|
||||
id: sVGPathItem2
|
||||
x: 3.18
|
||||
y: 27.38
|
||||
width: 55
|
||||
height: 40
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
path: "M0,0 L55,40"
|
||||
fillColor: "transparent"
|
||||
}
|
||||
|
||||
SvgPathItem {
|
||||
id: sVGPathItem3
|
||||
x: 130.21
|
||||
y: 2.41
|
||||
width: 55
|
||||
height: 42
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
path: "M0,0 L55,42"
|
||||
fillColor: "transparent"
|
||||
}
|
||||
|
||||
SvgPathItem {
|
||||
id: sVGPathItem4
|
||||
x: 22
|
||||
y: 148
|
||||
width: 56
|
||||
height: 43
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
path: "M0,0 L54,40"
|
||||
fillColor: "transparent"
|
||||
}
|
||||
|
||||
SvgPathItem {
|
||||
id: sVGPathItem5
|
||||
x: 151.21
|
||||
y: 126.41
|
||||
width: 55
|
||||
height: 42
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
path: "M0,0 L55,42"
|
||||
fillColor: "transparent"
|
||||
}
|
||||
clip: false
|
||||
\endcode
|
||||
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: 200
|
||||
height: 200
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {SVG Path Item}
|
||||
*/
|
||||
property alias gradient: shape.fillGradient
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-joinStyle
|
||||
*/
|
||||
//property alias joinStyle: path.joinStyle
|
||||
property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-capStyle
|
||||
*/
|
||||
//property alias capStyle: path.capStyle
|
||||
property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeStyle} {SVG Path Item}
|
||||
*/
|
||||
//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} {SVG Path Item}
|
||||
*/
|
||||
property alias strokeWidth: shape.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {SVG Path Item}
|
||||
*/
|
||||
property alias strokeColor: shape.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {SVG Path Item}
|
||||
*/
|
||||
property alias dashPattern: shape.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {SVG Path Item}
|
||||
*/
|
||||
property alias fillColor: shape.fillColor
|
||||
|
||||
/*!
|
||||
\qmlproperty string SvgPathItem::path
|
||||
|
||||
The SVG path data string specifying the path.
|
||||
|
||||
For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData} {W3C SVG Path Data}.
|
||||
*/
|
||||
property alias path: pathSvg.path
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {SVG Path Item}
|
||||
*/
|
||||
property alias dashOffset: shape.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
|
||||
|
||||
ShapePath {
|
||||
id: shape
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
|
||||
PathSvg {
|
||||
id: pathSvg
|
||||
|
||||
path: "M91,70.6c4.6,0,8.6,2.4,10.9,6.3l19.8,34.2c2.3,3.9,2.3,8.7,0,12.6c-2.3,3.9-6.4,6.3-10.9,6.3H71.2 c-4.6,0-8.6-2.4-10.9-6.3c-2.3-3.9-2.3-8.7,0-12.6l19.8-34.2C82.4,72.9,86.4,70.6,91,70.6z"
|
||||
}
|
||||
}
|
||||
|
||||
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