Inital commit of the Komplex Hub
This commit is contained in:
Digital Artifex
@@ -0,0 +1,83 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2021 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
|
||||
|
||||
GroupItem {
|
||||
id: root
|
||||
|
||||
property int thickness: 45
|
||||
|
||||
property int arrowSize: 80
|
||||
|
||||
property int radius: 5
|
||||
property color color: "#b6b3b3"
|
||||
|
||||
property alias begin: arc.begin
|
||||
property alias end: arc.end
|
||||
|
||||
property bool flip: false
|
||||
|
||||
transform: Scale {
|
||||
xScale: root.flip ? -1 : 1
|
||||
origin.x: root.width / 2
|
||||
origin.y: root.height / 2
|
||||
}
|
||||
|
||||
ArcItem {
|
||||
id: arc
|
||||
x: 0
|
||||
y: 16
|
||||
width: 300
|
||||
height: 300
|
||||
capStyle: root.radius > 2 ? 32 : 0
|
||||
end: 180
|
||||
strokeWidth: root.thickness
|
||||
strokeColor: root.color
|
||||
fillColor: "#00000000"
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
rotation: arc.end
|
||||
TriangleItem {
|
||||
id: triangle3
|
||||
x: root.width / 2
|
||||
|
||||
y: -root.thickness / 2
|
||||
width: root.arrowSize
|
||||
height: root.arrowSize
|
||||
strokeWidth: -1
|
||||
rotation: 90
|
||||
radius: root.radius
|
||||
|
||||
fillColor: root.color
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,446 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 ArcItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
|
||||
\brief An arc that ends at the specified position and uses the specified radius.
|
||||
|
||||
An arc is specified by setting values in degrees for the \l begin and \l end properties. The arc
|
||||
can be just a line or a filled outline. The \l strokeColor, \l strokeWidth, and \l strokeStyle
|
||||
properties specify the appearance of the line or outline. The \l dashPattern and \l dashOffset
|
||||
properties specify the appearance of dashed lines.
|
||||
|
||||
The area between the arc's start and end points or the area inside the outline are 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 arc with an outline, set the \l outlineArc property to \c true. The \l arcWidth
|
||||
property specifies the width of the arc outline, including the stroke. The width of the outline
|
||||
between the start and end points is calculated automatically.
|
||||
|
||||
The \l round, \l roundBegin, and \l roundEnd properties specify whether the end points of the
|
||||
arc outline have rounded caps. For an arc that does not have an outline, the \l capStyle
|
||||
property specifies whether the line ends are square or rounded.
|
||||
|
||||
Because an arc 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
|
||||
|
||||
You can use the Arc component in \QDS to create different kinds of arcs.
|
||||
|
||||
\image studio-arc.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
|
||||
ArcItem {
|
||||
id: arc
|
||||
x: 667
|
||||
y: 490
|
||||
fillColor: "#00ffffff"
|
||||
capStyle: 32
|
||||
end: 180
|
||||
strokeWidth: 6
|
||||
strokeColor: "#000000"
|
||||
}
|
||||
|
||||
ArcItem {
|
||||
id: arcOutline
|
||||
x: 910
|
||||
y: 490
|
||||
strokeColor: "gray"
|
||||
arcWidth: 13
|
||||
end: 180
|
||||
fillColor: "light gray"
|
||||
antialiasing: true
|
||||
round: true
|
||||
outlineArc: true
|
||||
}
|
||||
|
||||
ArcItem {
|
||||
id: circle
|
||||
x: 811
|
||||
y: 490
|
||||
fillColor: "#02ffffff"
|
||||
end: 360
|
||||
strokeWidth: 5
|
||||
strokeColor: "#000000"
|
||||
}
|
||||
|
||||
ArcItem {
|
||||
id: circleOutline
|
||||
x: 1046
|
||||
y: 490
|
||||
antialiasing: false
|
||||
outlineArc: true
|
||||
round: true
|
||||
strokeColor: "gray"
|
||||
fillColor: "light gray"
|
||||
strokeWidth: 1
|
||||
end: 360
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
|
||||
width: 100
|
||||
height: 100
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {arc}
|
||||
*/
|
||||
property alias gradient: path.fillGradient
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeWidth} {arc}
|
||||
|
||||
The total width of an arc that has an outline (that is, the outline and the fill) is specified
|
||||
by \l arcWidth.
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {arc}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {arc}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-joinStyle
|
||||
*/
|
||||
//property alias joinStyle: path.joinStyle
|
||||
property int joinStyle: ShapePath.BevelJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-capStyle
|
||||
*/
|
||||
//property alias capStyle: path.capStyle
|
||||
property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeStyle} {arc}
|
||||
*/
|
||||
//property alias strokeStyle: path.strokeStyle
|
||||
property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {arc}
|
||||
|
||||
If the arc is just a line, the area between its \l begin and \l end points is filled. If the arc
|
||||
has an outline, the area within the outline is filled.
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
The starting point of the dash pattern for the arc or arc outline.
|
||||
|
||||
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.
|
||||
|
||||
\sa QPen::setDashOffset()
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
/*!
|
||||
The position in degrees where the arc begins.
|
||||
|
||||
The default value is 0.
|
||||
|
||||
To create a circle, set the value of \c begin to 0 and the value of the \c end to 360.
|
||||
*/
|
||||
property real begin: 0
|
||||
|
||||
/*!
|
||||
The position in degrees where the arc ends.
|
||||
|
||||
The default value is 90.
|
||||
|
||||
To create a circle, set the value of \c end to 360 and the value of the \c begin to 0.
|
||||
*/
|
||||
property real end: 90
|
||||
|
||||
/*!
|
||||
The total width of an arc that has an outline, including the outline and fill.
|
||||
|
||||
The default value is 10.
|
||||
|
||||
\sa strokeWidth
|
||||
*/
|
||||
property real arcWidth: 10
|
||||
|
||||
/*!
|
||||
The area between the \l begin and \l end points of the arc.
|
||||
*/
|
||||
property real alpha: root.clamp(root.sortedEnd() - root.sortedBegin(), 0, 359.9)
|
||||
|
||||
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
|
||||
|
||||
/*!
|
||||
Whether the arc has an outline.
|
||||
|
||||
\sa arcWidth, round, roundBegin, roundEnd
|
||||
*/
|
||||
property bool outlineArc: false
|
||||
|
||||
/*!
|
||||
Whether the arc outline end points have round caps.
|
||||
|
||||
The \l roundBegin and \l roundEnd properties can be used to specify the caps separately for the
|
||||
end points.
|
||||
*/
|
||||
property bool round: false
|
||||
|
||||
/*!
|
||||
Whether the arc outline ends with a round cap.
|
||||
|
||||
\sa Qt::PenCapStyle, round, roundBegin
|
||||
*/
|
||||
property bool roundEnd: root.round
|
||||
|
||||
/*!
|
||||
Whether the arc outline begins with a round cap.
|
||||
|
||||
\sa Qt::PenCapStyle, round, roundEnd
|
||||
*/
|
||||
property bool roundBegin: root.round
|
||||
|
||||
function clamp(num, min, max) {
|
||||
return Math.max(min, Math.min(num, max))
|
||||
}
|
||||
|
||||
function toRadians(degrees) {
|
||||
return degrees * (Math.PI / 180.0)
|
||||
}
|
||||
|
||||
function myCos(angleInDegrees) {
|
||||
return Math.cos(root.toRadians(angleInDegrees))
|
||||
}
|
||||
|
||||
function mySin(angleInDegrees) {
|
||||
return Math.sin(root.toRadians(angleInDegrees))
|
||||
}
|
||||
|
||||
function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
|
||||
return centerX + radius * Math.cos(root.toRadians(angleInDegrees))
|
||||
}
|
||||
|
||||
function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
|
||||
return centerY + radius * Math.sin(root.toRadians(angleInDegrees))
|
||||
}
|
||||
|
||||
function sortedBegin() {
|
||||
return Math.min(root.begin, root.end)
|
||||
}
|
||||
|
||||
function sortedEnd() {
|
||||
return Math.min(Math.max(root.begin, root.end), root.sortedBegin() + 359.9)
|
||||
}
|
||||
|
||||
function isArcFull() {
|
||||
return root.alpha > 359.5
|
||||
}
|
||||
|
||||
onAlphaChanged: {
|
||||
if (root.__wasFull !== root.isArcFull())
|
||||
root.constructArcItem()
|
||||
|
||||
root.__wasFull = root.isArcFull()
|
||||
}
|
||||
onOutlineArcChanged: root.constructArcItem()
|
||||
onRoundChanged: root.constructArcItem()
|
||||
onRoundBeginChanged: root.constructArcItem()
|
||||
onRoundEndChanged: root.constructArcItem()
|
||||
|
||||
property bool __wasFull: false
|
||||
|
||||
property real maxArcWidth: Math.min(path.__xRadius, path.__yRadius)
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
property real __xRadius: root.width / 2 - root.strokeWidth / 2
|
||||
property real __yRadius: root.height / 2 - root.strokeWidth / 2
|
||||
|
||||
property real __arcWidth: Math.min(Math.min(path.__xRadius, path.__yRadius), root.arcWidth)
|
||||
|
||||
property real __xCenter: root.width / 2
|
||||
property real __yCenter: root.height / 2
|
||||
|
||||
strokeColor: "red"
|
||||
strokeWidth: 4
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
startX: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedBegin() - 90)
|
||||
startY: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedBegin() - 90)
|
||||
}
|
||||
|
||||
function constructArcItem() {
|
||||
root.clearPathElements()
|
||||
|
||||
// Outer arc
|
||||
let outerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
outerArc.x = Qt.binding(function() {
|
||||
return root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedEnd() - 90)
|
||||
})
|
||||
outerArc.y = Qt.binding(function() {
|
||||
return root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedEnd() - 90)
|
||||
})
|
||||
outerArc.radiusX = Qt.binding(function() { return path.__xRadius })
|
||||
outerArc.radiusY = Qt.binding(function() { return path.__yRadius })
|
||||
outerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
|
||||
path.pathElements.push(outerArc)
|
||||
|
||||
// Straight end
|
||||
if (!root.roundEnd && root.outlineArc && !root.isArcFull()) {
|
||||
let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
|
||||
pathLine.relativeX = Qt.binding(function() {
|
||||
return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
|
||||
})
|
||||
pathLine.relativeY = Qt.binding(function() {
|
||||
return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
|
||||
})
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
|
||||
// Round end
|
||||
if (root.roundEnd && root.outlineArc && !root.isArcFull()) {
|
||||
let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
pathArc.relativeX = Qt.binding(function() {
|
||||
return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
|
||||
})
|
||||
pathArc.relativeY = Qt.binding(function() {
|
||||
return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
|
||||
})
|
||||
pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
|
||||
pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Open end
|
||||
if (root.outlineArc && root.isArcFull()) {
|
||||
let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
|
||||
pathMove.relativeX = Qt.binding(function() {
|
||||
return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
|
||||
})
|
||||
pathMove.relativeY = Qt.binding(function() {
|
||||
return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
|
||||
})
|
||||
path.pathElements.push(pathMove)
|
||||
}
|
||||
|
||||
// Inner arc
|
||||
if (root.outlineArc) {
|
||||
let innerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
innerArc.x = Qt.binding(function() {
|
||||
return path.startX - path.__arcWidth * root.myCos(root.sortedBegin() - 90)
|
||||
})
|
||||
innerArc.y = Qt.binding(function() {
|
||||
return path.startY - path.__arcWidth * root.mySin(root.sortedBegin() - 90)
|
||||
})
|
||||
innerArc.radiusX = Qt.binding(function() { return path.__xRadius - path.__arcWidth })
|
||||
innerArc.radiusY = Qt.binding(function() { return path.__yRadius - path.__arcWidth })
|
||||
innerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
|
||||
innerArc.direction = PathArc.Counterclockwise
|
||||
path.pathElements.push(innerArc)
|
||||
}
|
||||
|
||||
// Straight begin
|
||||
if (!root.roundBegin && root.outlineArc && !root.isArcFull()) {
|
||||
let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
|
||||
pathLine.x = Qt.binding(function() { return path.startX })
|
||||
pathLine.y = Qt.binding(function() { return path.startY })
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
|
||||
// Round begin
|
||||
if (root.roundBegin && root.outlineArc && !root.isArcFull()) {
|
||||
let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
pathArc.x = Qt.binding(function() { return path.startX })
|
||||
pathArc.y = Qt.binding(function() { return path.startY })
|
||||
pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
|
||||
pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Open begin
|
||||
if (root.outlineArc && root.isArcFull()) {
|
||||
let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
|
||||
pathMove.x = Qt.binding(function() { return path.startX })
|
||||
pathMove.y = Qt.binding(function() { return path.startY })
|
||||
path.pathElements.push(pathMove)
|
||||
}
|
||||
}
|
||||
|
||||
function clearPathElements() {
|
||||
for (var i = 0; i !== path.pathElements.length; ++i)
|
||||
path.pathElements[i].destroy()
|
||||
|
||||
path.pathElements = []
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
|
||||
root.__wasFull = root.isArcFull()
|
||||
root.constructArcItem()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,544 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 BorderItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A border drawn in four segments: left, top, right, and bottom.
|
||||
|
||||
The Border type is used to create borders out of four segments: left, top, right, and bottom.
|
||||
The \l drawLeft, \l drawTop, \l drawRight, and \l drawBottom properties can be used to determine
|
||||
whether each of the segments is visible.
|
||||
|
||||
The \l borderMode property determines whether the border is drawn along the inside or outside
|
||||
edge of the item, or on top of the edge.
|
||||
|
||||
The \l radius property specifies whether the border corners are rounded. The radius can also be
|
||||
specified separately for each corner. Because this introduces curved edges to the corners, it
|
||||
may be appropriate to set the \c antialiasing property that is inherited from \l Item to improve
|
||||
the appearance of the border.
|
||||
|
||||
The \l joinStyle property specifies how to connect two border line segments.
|
||||
|
||||
The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
|
||||
border line. 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.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
You can use the Border component in \QDS to create different kinds of borders.
|
||||
|
||||
\image studio-border.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
BorderItem {
|
||||
id: openLeft
|
||||
width: 99
|
||||
height: 99
|
||||
antialiasing: true
|
||||
drawLeft: false
|
||||
strokeColor: "gray"
|
||||
}
|
||||
|
||||
BorderItem {
|
||||
id: openTop
|
||||
width: 99
|
||||
height: 99
|
||||
antialiasing: true
|
||||
strokeColor: "#808080"
|
||||
drawTop: false
|
||||
}
|
||||
|
||||
BorderItem {
|
||||
id: asymmetricalCorners
|
||||
width: 99
|
||||
height: 99
|
||||
antialiasing: true
|
||||
bottomLeftRadius: 0
|
||||
topRightRadius: 0
|
||||
strokeColor: "#808080"
|
||||
}
|
||||
|
||||
BorderItem {
|
||||
id: dashedBorder
|
||||
width: 99
|
||||
height: 99
|
||||
antialiasing: true
|
||||
strokeStyle: 4
|
||||
strokeColor: "#808080"
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: 200
|
||||
height: 150
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-radius} {10}
|
||||
|
||||
If radius is non-zero, the corners will be rounded, otherwise they will be sharp. The radius can
|
||||
also be specified separately for each corner by using the \l bottomLeftRadius,
|
||||
\l bottomRightRadius, \l topLeftRadius, and \l topRightRadius properties.
|
||||
*/
|
||||
property int radius: 10
|
||||
|
||||
/*!
|
||||
The radius of the top left border corner.
|
||||
|
||||
\sa radius
|
||||
*/
|
||||
property int topLeftRadius: root.radius
|
||||
|
||||
/*!
|
||||
The radius of the bottom left border corner.
|
||||
|
||||
\sa radius
|
||||
*/
|
||||
property int bottomLeftRadius: root.radius
|
||||
|
||||
/*!
|
||||
The radius of the top right border corner.
|
||||
|
||||
\sa radius
|
||||
*/
|
||||
property int topRightRadius: root.radius
|
||||
|
||||
/*!
|
||||
The radius of the bottom right border corner.
|
||||
|
||||
\sa radius
|
||||
*/
|
||||
property int bottomRightRadius: root.radius
|
||||
|
||||
/*!
|
||||
Whether the border corner is beveled.
|
||||
*/
|
||||
property bool bevel: false
|
||||
|
||||
/*!
|
||||
The bevel of the top left border corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool topLeftBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The bevel of the top right border corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool topRightBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The bevel of the bottom right border corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool bottomRightBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The bevel of the bottom left border corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool bottomLeftBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The width of the border line.
|
||||
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 border does not affect its position relative to other items if
|
||||
anchors are used.
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {border}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
The dash pattern of the border line 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 \l capStyle is \c {ShapePath.SquareCap}, meaning that a square line end covers the
|
||||
end point and extends beyond it by half the line width.
|
||||
|
||||
The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels followed by a space
|
||||
of 2 * \l strokeWidth pixels.
|
||||
|
||||
\sa QPen::setDashPattern()
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\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} {border}
|
||||
*/
|
||||
//property alias strokeStyle: path.strokeStyle
|
||||
property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
The starting point of the dash pattern for the border line.
|
||||
|
||||
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.
|
||||
|
||||
\sa QPen::setDashOffset()
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
//property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
Whether the top border is visible.
|
||||
|
||||
The border segment is drawn if this property is set to \c true.
|
||||
*/
|
||||
property bool drawTop: true
|
||||
|
||||
/*!
|
||||
Whether the bottom border is visible.
|
||||
|
||||
The border segment is drawn if this property is set to \c true.
|
||||
*/
|
||||
property bool drawBottom: true
|
||||
|
||||
/*!
|
||||
Whether the right border is visible.
|
||||
|
||||
The border segment is drawn if this property is set to \c true.
|
||||
*/
|
||||
property bool drawRight: true
|
||||
|
||||
/*!
|
||||
Whether the left border is visible.
|
||||
|
||||
The border segment is drawn if this property is set to \c true.
|
||||
*/
|
||||
property bool drawLeft: true
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-adjustBorderRadius
|
||||
*/
|
||||
property bool adjustBorderRadius: false
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: {
|
||||
if (root.borderMode === 0)
|
||||
return 0
|
||||
if (root.borderMode === 1)
|
||||
return -root.strokeWidth * 0.5
|
||||
|
||||
return -root.strokeWidth
|
||||
}
|
||||
}
|
||||
|
||||
onRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onTopLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onTopRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onBottomLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onBottomRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onWidthChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onHeightChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
|
||||
function calculateIndependentRadii() {
|
||||
let minDimension = Math.min(root.width, root.height)
|
||||
let maxRadius = Math.floor(minDimension / 2)
|
||||
let mixed = !(root.radius === root.topLeftRadius
|
||||
&& root.radius === root.topRightRadius
|
||||
&& root.radius === root.bottomLeftRadius
|
||||
&& root.radius === root.bottomRightRadius)
|
||||
|
||||
// Uniform radii
|
||||
if (!mixed) {
|
||||
path.__topLeftRadius = Math.min(root.topLeftRadius, maxRadius)
|
||||
path.__topRightRadius = Math.min(root.topRightRadius, maxRadius)
|
||||
path.__bottomRightRadius = Math.min(root.bottomRightRadius, maxRadius)
|
||||
path.__bottomLeftRadius = Math.min(root.bottomLeftRadius, maxRadius)
|
||||
return
|
||||
}
|
||||
|
||||
// Mixed radii
|
||||
let topLeftRadiusMin = Math.min(minDimension, root.topLeftRadius)
|
||||
let topRightRadiusMin = Math.min(minDimension, root.topRightRadius)
|
||||
let bottomLeftRadiusMin = Math.min(minDimension, root.bottomLeftRadius)
|
||||
let bottomRightRadiusMin = Math.min(minDimension, root.bottomRightRadius)
|
||||
|
||||
// Top radii
|
||||
let topRadii = root.topLeftRadius + root.topRightRadius
|
||||
|
||||
if (topRadii > root.width) {
|
||||
let topLeftRadiusFactor = root.topLeftRadius / topRadii
|
||||
let tlr = Math.round(root.width * topLeftRadiusFactor)
|
||||
|
||||
topLeftRadiusMin = Math.min(topLeftRadiusMin, tlr)
|
||||
topRightRadiusMin = Math.min(topRightRadiusMin, root.width - tlr)
|
||||
}
|
||||
|
||||
// Right radii
|
||||
let rightRadii = root.topRightRadius + root.bottomRightRadius
|
||||
|
||||
if (rightRadii > root.height) {
|
||||
let topRightRadiusFactor = root.topRightRadius / rightRadii
|
||||
let trr = Math.round(root.height * topRightRadiusFactor)
|
||||
|
||||
topRightRadiusMin = Math.min(topRightRadiusMin, trr)
|
||||
bottomRightRadiusMin = Math.min(bottomRightRadiusMin, root.height - trr)
|
||||
}
|
||||
|
||||
// Bottom radii
|
||||
let bottomRadii = root.bottomRightRadius + root.bottomLeftRadius
|
||||
|
||||
if (bottomRadii > root.width) {
|
||||
let bottomRightRadiusFactor = root.bottomRightRadius / bottomRadii
|
||||
let brr = Math.round(root.width * bottomRightRadiusFactor)
|
||||
|
||||
bottomRightRadiusMin = Math.min(bottomRightRadiusMin, brr)
|
||||
bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, root.width - brr)
|
||||
}
|
||||
|
||||
// Left radii
|
||||
let leftRadii = root.bottomLeftRadius + root.topLeftRadius
|
||||
|
||||
if (leftRadii > root.height) {
|
||||
let bottomLeftRadiusFactor = root.bottomLeftRadius / leftRadii
|
||||
let blr = Math.round(root.height * bottomLeftRadiusFactor)
|
||||
|
||||
bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, blr)
|
||||
topLeftRadiusMin = Math.min(topLeftRadiusMin, root.height - blr)
|
||||
}
|
||||
|
||||
path.__topLeftRadius = topLeftRadiusMin
|
||||
path.__topRightRadius = topRightRadiusMin
|
||||
path.__bottomLeftRadius = bottomLeftRadiusMin
|
||||
path.__bottomRightRadius = bottomRightRadiusMin
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
property int __topLeftRadius: 0
|
||||
property int __topRightRadius: 0
|
||||
property int __bottomRightRadius: 0
|
||||
property int __bottomLeftRadius: 0
|
||||
|
||||
readonly property real __borderRadiusAdjustment: {
|
||||
if (root.adjustBorderRadius) {
|
||||
if (root.borderMode === 1)
|
||||
return (root.strokeWidth * 0.5)
|
||||
if (root.borderMode === 2)
|
||||
return root.strokeWidth
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
fillColor: "transparent"
|
||||
|
||||
startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
|
||||
startY: root.borderOffset
|
||||
}
|
||||
|
||||
onDrawTopChanged: root.constructBorderItem()
|
||||
onDrawRightChanged: root.constructBorderItem()
|
||||
onDrawBottomChanged: root.constructBorderItem()
|
||||
onDrawLeftChanged: root.constructBorderItem()
|
||||
|
||||
function constructBorderItem() {
|
||||
root.clearPathElements()
|
||||
|
||||
// Top line
|
||||
if (root.drawTop) {
|
||||
let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
|
||||
pathLine.x = Qt.binding(function() { return root.width - path.__topRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
|
||||
pathLine.y = Qt.binding(function() { return root.borderOffset })
|
||||
path.pathElements.push(pathLine)
|
||||
} else {
|
||||
let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
|
||||
pathMove.x = Qt.binding(function() { return root.width - root.borderOffset })
|
||||
pathMove.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathMove)
|
||||
}
|
||||
|
||||
// Top right corner
|
||||
if (root.drawTop && root.drawRight) {
|
||||
let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
pathArc.x = Qt.binding(function() { return root.width - root.borderOffset })
|
||||
pathArc.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment })
|
||||
pathArc.radiusX = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment })
|
||||
pathArc.radiusY = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Right line
|
||||
if (root.drawRight) {
|
||||
let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
|
||||
pathLine.x = Qt.binding(function() { return root.width - root.borderOffset })
|
||||
pathLine.y = Qt.binding(function() { return root.height - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathLine)
|
||||
} else {
|
||||
let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
|
||||
pathMove.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
|
||||
pathMove.y = Qt.binding(function() { return root.height - root.borderOffset })
|
||||
path.pathElements.push(pathMove)
|
||||
}
|
||||
|
||||
// Bottom right corner
|
||||
if (root.drawBottom && root.drawRight) {
|
||||
let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
pathArc.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
|
||||
pathArc.y = Qt.binding(function() { return root.height - root.borderOffset })
|
||||
pathArc.radiusX = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment })
|
||||
pathArc.radiusY = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Bottom line
|
||||
if (root.drawBottom) {
|
||||
let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
|
||||
pathLine.x = Qt.binding(function() { return path.__bottomLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
|
||||
pathLine.y = Qt.binding(function() { return root.height - root.borderOffset })
|
||||
path.pathElements.push(pathLine)
|
||||
} else {
|
||||
let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
|
||||
pathMove.x = Qt.binding(function() { return root.borderOffset })
|
||||
pathMove.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathMove)
|
||||
}
|
||||
|
||||
// Bottom left corner
|
||||
if (root.drawBottom && root.drawLeft) {
|
||||
let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
pathArc.x = Qt.binding(function() { return root.borderOffset })
|
||||
pathArc.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment })
|
||||
pathArc.radiusX = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment })
|
||||
pathArc.radiusY = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Left line
|
||||
if (root.drawLeft) {
|
||||
let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
|
||||
pathLine.x = Qt.binding(function() { return root.borderOffset })
|
||||
pathLine.y = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
// No need to use PathMove, if left line shouldn't be drawn we just leave the shape open.
|
||||
|
||||
// Top left corner
|
||||
if (root.drawTop && root.drawLeft) {
|
||||
let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
|
||||
pathArc.x = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
|
||||
pathArc.y = Qt.binding(function() { return root.borderOffset })
|
||||
pathArc.radiusX = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment })
|
||||
pathArc.radiusY = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment })
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
}
|
||||
|
||||
function clearPathElements() {
|
||||
for (var i = 0; i !== path.pathElements.length; ++i)
|
||||
path.pathElements[i].destroy()
|
||||
|
||||
path.pathElements = []
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
|
||||
root.calculateIndependentRadii()
|
||||
root.constructBorderItem()
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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
|
||||
|
||||
/*!
|
||||
\qmltype FlipableItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
|
||||
\brief Provides a surface that can be flipped.
|
||||
|
||||
A Flipable type can be visibly flipped between its front and back sides, like a card. The front
|
||||
and back sides are specified by using any two types inside the Flipable type. The type with the
|
||||
higher z-order is the front side. The \l opacityFront and \l opacityBack properties are used to
|
||||
hide and show either the front or back side of the item at a time.
|
||||
|
||||
The \l flipAngle property is used to animate the angle of the type to produce the flipping
|
||||
effect. The value of the \l rotationalAxis property determines which axis the type is rotated
|
||||
around.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
You can use the Flipable component in \QDS to create an item that can be flipped.
|
||||
|
||||
\image studio-flipable.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
FlipableItem {
|
||||
id: flipable
|
||||
x: 595
|
||||
y: 277
|
||||
width: 493
|
||||
height: 493
|
||||
opacityFront: 1
|
||||
opacityBack: 0.09412
|
||||
flipAngle: 45
|
||||
rotationalAxis: 1
|
||||
|
||||
TriangleItem {
|
||||
id: triangle
|
||||
x: 122
|
||||
y: 122
|
||||
width: 250
|
||||
height: 250
|
||||
opacity: 1
|
||||
z: 0
|
||||
strokeWidth: 10
|
||||
fillColor: "#6cff9f"
|
||||
rotation: -270
|
||||
}
|
||||
|
||||
TriangleItem {
|
||||
id: triangle1
|
||||
x: 16
|
||||
y: 122
|
||||
width: 250
|
||||
height: 250
|
||||
strokeWidth: 10
|
||||
rotation: 270
|
||||
fillColor: "#6cff9f"
|
||||
}
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Flipable {
|
||||
id: flipable
|
||||
width: 240
|
||||
height: 240
|
||||
|
||||
/*!
|
||||
The flip angle in degrees.
|
||||
|
||||
The minimum value is -360 and the maximum value is 360 degrees.
|
||||
*/
|
||||
property alias flipAngle: rotation.angle
|
||||
|
||||
/*!
|
||||
The opacity of the front side of the type.
|
||||
|
||||
The opacity can be set between 0 and 1 to hide or show the items on the
|
||||
front side of the type.
|
||||
*/
|
||||
property real opacityFront: 1
|
||||
|
||||
/*!
|
||||
The opacity of the back side of the type.
|
||||
|
||||
The opacity can be set between 0 and 1 to hide or show the items on the
|
||||
back side of the type.
|
||||
*/
|
||||
property real opacityBack: 1
|
||||
|
||||
/*!
|
||||
Whether the type is rotated around the x-axis or y-axis.
|
||||
|
||||
This property is set to 0 to rotate the type around the x-axis or to
|
||||
1 to rotate around the y-axis.
|
||||
*/
|
||||
property int rotationalAxis: 1 // 0: x-axis, 1: y-axis
|
||||
|
||||
Binding {
|
||||
target: flipable.front
|
||||
value: opacityFront
|
||||
property: "opacity"
|
||||
when: flipable.front !== undefined
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: flipable.back
|
||||
value: opacityBack
|
||||
property: "opacity"
|
||||
when: flipable.back !== undefined
|
||||
}
|
||||
|
||||
/*!
|
||||
Whether the type has been flipped.
|
||||
|
||||
This property is set to \c true when the type is flipped.
|
||||
*/
|
||||
property bool flipped: false
|
||||
|
||||
onChildrenChanged: {
|
||||
if (flipable.children[0] !== undefined && !flipable.front) {
|
||||
flipable.front = flipable.children[0]
|
||||
}
|
||||
|
||||
if (flipable.children[1] !== undefined && !flipable.back){
|
||||
flipable.back = flipable.children[1]
|
||||
}
|
||||
}
|
||||
|
||||
transform: Rotation {
|
||||
id: rotation
|
||||
origin.x: flipable.width/2
|
||||
origin.y: flipable.height/2
|
||||
axis.x: flipable.rotationalAxis === 0 ? 1 : 0
|
||||
axis.y: flipable.rotationalAxis === 1 ? 1 : 0
|
||||
axis.z: 0
|
||||
angle: 0 // the default angle
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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
|
||||
|
||||
/*!
|
||||
\qmltype GroupItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Item
|
||||
|
||||
\brief A group item that gets its size from its children.
|
||||
|
||||
The Group type is an \l Item type extended with the size property. The value of size is
|
||||
automatically calculated to fit the children of the group.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
You can use the Group type to specify the size of one or several items.
|
||||
|
||||
\image studio-group.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
GroupItem {
|
||||
id: group
|
||||
x: 820
|
||||
y: 437
|
||||
|
||||
Rectangle {
|
||||
id: rectangle1
|
||||
width: 200
|
||||
height: 200
|
||||
color: "#c2c2c2"
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rectangle2
|
||||
x: 140
|
||||
y: 140
|
||||
width: 200
|
||||
height: 200
|
||||
color: "#000000"
|
||||
}
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Item {
|
||||
implicitWidth: Math.max(16, childrenRect.width + childrenRect.x)
|
||||
implicitHeight: Math.max(16, childrenRect.height + childrenRect.y)
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 PieItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A pie.
|
||||
|
||||
The Pie type is used to create a pie slice, a pie that is missing slices, or just the pie stroke
|
||||
(similar to an \l ArcItem), depending on the \l begin and \l end property values and the
|
||||
\l hideLine value.
|
||||
|
||||
The filling of the pie 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.
|
||||
|
||||
The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
|
||||
pie outline. 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.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
You can use the Pie component in \QDS to create different kinds of pies.
|
||||
|
||||
\image studio-pie.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
PieItem {
|
||||
id: pieSlice
|
||||
x: 920
|
||||
y: 416
|
||||
strokeWidth: -1
|
||||
antialiasing: true
|
||||
strokeColor: "gray"
|
||||
fillColor: "light gray"
|
||||
}
|
||||
|
||||
PieItem {
|
||||
id: pie
|
||||
x: 1118
|
||||
y: 407
|
||||
end: 300
|
||||
fillColor: "#d3d3d3"
|
||||
strokeColor: "#808080"
|
||||
antialiasing: true
|
||||
}
|
||||
|
||||
PieItem {
|
||||
id: pieStroke
|
||||
x: 1022
|
||||
y: 548
|
||||
fillColor: "#00ffffff"
|
||||
strokeWidth: 4
|
||||
capStyle: 32
|
||||
hideLine: true
|
||||
end: 300
|
||||
strokeColor: "#808080"
|
||||
antialiasing: true
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
|
||||
width: 100
|
||||
height: 100
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {pie}
|
||||
*/
|
||||
property alias gradient: path.fillGradient
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-joinStyle
|
||||
*/
|
||||
//property alias joinStyle: path.joinStyle
|
||||
property int joinStyle: ShapePath.BevelJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-capStyle
|
||||
*/
|
||||
//property alias capStyle: path.capStyle
|
||||
property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeStyle} {pie}
|
||||
*/
|
||||
//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} {pie}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {pie}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {pie}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {pie}
|
||||
|
||||
If \l hideLine is \c false, a pie slice is drawn using the values of the \l begin and \l end
|
||||
properties and filled with this color.
|
||||
|
||||
If \l hideLine is \c true, just the pie stroke is drawn and the area between the \l begin and
|
||||
\l end points is filled.
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {pie}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
/*!
|
||||
The position in degrees where the pie begins.
|
||||
|
||||
The default value is 0.
|
||||
|
||||
To create a circle, set the value of this property to 0 and the value of the \l end property to
|
||||
360.
|
||||
*/
|
||||
property real begin: 0
|
||||
|
||||
/*!
|
||||
The position in degrees where the pie ends.
|
||||
|
||||
The default value is 90.
|
||||
|
||||
To create a circle, set the value of this property to 360 and the value of the \l begin property
|
||||
to 0.
|
||||
*/
|
||||
property real end: 90
|
||||
|
||||
/*!
|
||||
The area between \l begin and \l end.
|
||||
*/
|
||||
property real alpha: root.clamp(root.end - root.begin, 0, 359.9)
|
||||
|
||||
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
|
||||
|
||||
function clamp(num, min, max) {
|
||||
return Math.max(min, Math.min(num, max))
|
||||
}
|
||||
|
||||
/*!
|
||||
Whether to draw a pie slice or just the pie stroke (similar to an \l ArcItem).
|
||||
*/
|
||||
property bool hideLine: {
|
||||
if (root.alpha <= 0)
|
||||
return true
|
||||
if (root.alpha >= 359)
|
||||
return true
|
||||
return false
|
||||
}
|
||||
|
||||
function toRadians(degrees) {
|
||||
return degrees * (Math.PI / 180.0)
|
||||
}
|
||||
|
||||
function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
|
||||
return centerX + radius * Math.cos(root.toRadians(angleInDegrees))
|
||||
}
|
||||
|
||||
function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
|
||||
return centerY + radius * Math.sin(root.toRadians(angleInDegrees))
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
property real __xRadius: root.width / 2 - root.strokeWidth / 2
|
||||
property real __yRadius: root.height / 2 - root.strokeWidth / 2
|
||||
|
||||
property real __xCenter: root.width / 2
|
||||
property real __yCenter: root.height / 2
|
||||
|
||||
strokeColor: "red"
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
strokeWidth: 4
|
||||
|
||||
startX: root.hideLine ? root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin - 90)
|
||||
: path.__xCenter
|
||||
startY: root.hideLine ? root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.begin - 90)
|
||||
: path.__yCenter
|
||||
|
||||
PathLine {
|
||||
x: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin - 90)
|
||||
y: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.begin - 90)
|
||||
}
|
||||
|
||||
PathArc {
|
||||
id: arc
|
||||
|
||||
x: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin + root.alpha - 90)
|
||||
y: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.begin + root.alpha - 90)
|
||||
|
||||
radiusY: path.__yRadius;
|
||||
radiusX: path.__xRadius;
|
||||
|
||||
useLargeArc: root.alpha > 180
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.hideLine ? root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin + root.alpha - 90)
|
||||
: path.__xCenter
|
||||
y: root.hideLine ? root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.begin + root.alpha - 90)
|
||||
: path.__yCenter
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import QtQuick.tooling 1.2
|
||||
|
||||
// This file describes the plugin-supplied types contained in the library.
|
||||
// It is used for QML tooling purposes only.
|
||||
//
|
||||
// This file was auto-generated by qmltyperegistrar.
|
||||
|
||||
Module {}
|
||||
@@ -0,0 +1,6 @@
|
||||
<RCC>
|
||||
<qresource prefix="/">
|
||||
<file alias="/qt-project.org/imports/QtQuick/Studio/Components">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/QtQuick/Studio/Components</file>
|
||||
|
||||
</qresource>
|
||||
</RCC>
|
||||
@@ -0,0 +1,491 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 RectangleItem
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A filled rectangle with an optional border.
|
||||
|
||||
Rectangle items are used to fill areas with solid color or gradients and to provide a
|
||||
rectangular border.
|
||||
|
||||
Each Rectangle item 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.
|
||||
|
||||
An optional border can be added to a rectangle with its own color and thickness by setting the
|
||||
\l strokeColor and \l strokeWidth properties. Setting the color to \c transparent creates a
|
||||
border without a fill color.
|
||||
|
||||
Rounded rectangles can be drawn using the \l radius property. The radius can also be specified
|
||||
separately for each corner. Because this introduces curved edges to the corners of a rectangle.
|
||||
Additionally, \l bevel can be applied on any corner to cut it off sharply.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
You can use the Rectangle component in \QDS to create different kinds of rectangles.
|
||||
|
||||
\image studio-rectangle.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
RectangleItem {
|
||||
id: rectangle1
|
||||
x: 480
|
||||
y: 164
|
||||
width: 409
|
||||
height: 307
|
||||
radius: 0
|
||||
gradient: RadialGradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#cea1f9fc"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#ec7d7d"
|
||||
}
|
||||
focalY: rectangle1.height * 0.5
|
||||
focalX: rectangle1.width * 0.5
|
||||
focalRadius: Math.min(rectangle1.width, rectangle1.height) * 0
|
||||
centerY: rectangle1.height * 0.5
|
||||
centerX: rectangle1.width * 0.5
|
||||
centerRadius: Math.min(rectangle1.width, rectangle1.height) * 0.5
|
||||
}
|
||||
strokeWidth: 6
|
||||
strokeColor: "#ff0000"
|
||||
bottomLeftRadius: 30
|
||||
topRightRadius: 30
|
||||
adjustBorderRadius: true
|
||||
}
|
||||
|
||||
RectangleItem {
|
||||
id: rectangle2
|
||||
x: 954
|
||||
y: 164
|
||||
width: 409
|
||||
height: 307
|
||||
radius: 0
|
||||
fillColor: "#c062606a"
|
||||
strokeWidth: -1
|
||||
topRightRadius: 30
|
||||
strokeColor: "#8b8a8a"
|
||||
bottomLeftRadius: 30
|
||||
adjustBorderRadius: true
|
||||
}
|
||||
|
||||
RectangleItem {
|
||||
id: rectangle3
|
||||
x: 480
|
||||
y: 533
|
||||
width: 409
|
||||
height: 307
|
||||
radius: 0
|
||||
gradient: LinearGradient {
|
||||
y2: rectangle3.height * 1
|
||||
y1: rectangle3.height * 0
|
||||
x2: rectangle3.width * 1
|
||||
x1: rectangle3.width * 0
|
||||
GradientStop {
|
||||
position: 0.10526
|
||||
color: "#e77979"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.67105
|
||||
color: "#716767"
|
||||
}
|
||||
}
|
||||
topRightBevel: true
|
||||
topRightRadius: 30
|
||||
strokeWidth: 6
|
||||
strokeColor: "#ff0000"
|
||||
bottomLeftRadius: 0
|
||||
adjustBorderRadius: true
|
||||
}
|
||||
|
||||
RectangleItem {
|
||||
id: rectangle4
|
||||
x: 954
|
||||
y: 533
|
||||
width: 409
|
||||
height: 307
|
||||
radius: 30
|
||||
fillColor: "#d87c7c"
|
||||
borderMode: 2
|
||||
dashOffset: 3
|
||||
joinStyle: 2
|
||||
strokeStyle: 5
|
||||
topRightBevel: false
|
||||
strokeWidth: 6
|
||||
strokeColor: "#ff0000"
|
||||
adjustBorderRadius: true
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: 200
|
||||
height: 150
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-radius} {10}
|
||||
|
||||
If radius is non-zero, the corners will be rounded, otherwise they will be sharp. The radius can
|
||||
also be specified separately for each corner by using the \l bottomLeftRadius,
|
||||
\l bottomRightRadius, \l topLeftRadius, and \l topRightRadius properties.
|
||||
*/
|
||||
property int radius: 10
|
||||
|
||||
/*!
|
||||
The radius of the top left rectangle corner.
|
||||
*/
|
||||
property int topLeftRadius: root.radius
|
||||
|
||||
/*!
|
||||
The radius of the bottom left rectangle corner.
|
||||
*/
|
||||
property int bottomLeftRadius: root.radius
|
||||
|
||||
/*!
|
||||
The radius of the top right rectangle corner.
|
||||
*/
|
||||
property int topRightRadius: root.radius
|
||||
|
||||
/*!
|
||||
The radius of the bottom right rectangle corner.
|
||||
*/
|
||||
property int bottomRightRadius: root.radius
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {rectangle}
|
||||
*/
|
||||
property ShapeGradient gradient: null
|
||||
|
||||
/*!
|
||||
\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} {rectangle}
|
||||
*/
|
||||
//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} {rectangle}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {rectangle}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {rectangle}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {rectangle}
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {rectangle}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
/*!
|
||||
Whether the rectangle corner is beveled.
|
||||
*/
|
||||
property bool bevel: false
|
||||
|
||||
/*!
|
||||
The bevel of the top left rectangle corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool topLeftBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The bevel of the top right rectangle corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool topRightBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The bevel of the bottom right rectangle corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool bottomRightBevel: root.bevel
|
||||
|
||||
/*!
|
||||
The bevel of the bottom left rectangle corner.
|
||||
|
||||
\sa bevel
|
||||
*/
|
||||
property bool bottomLeftBevel: root.bevel
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc component-adjustBorderRadius
|
||||
*/
|
||||
property bool adjustBorderRadius: false
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: {
|
||||
if (root.borderMode === 0)
|
||||
return 0
|
||||
if (root.borderMode === 1)
|
||||
return -root.strokeWidth * 0.5
|
||||
|
||||
return -root.strokeWidth
|
||||
}
|
||||
}
|
||||
|
||||
onRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onTopLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onTopRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onBottomLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onBottomRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onWidthChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
onHeightChanged: Qt.callLater(root.calculateIndependentRadii)
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
|
||||
root.calculateIndependentRadii()
|
||||
}
|
||||
|
||||
function calculateIndependentRadii() {
|
||||
let minDimension = Math.min(root.width, root.height)
|
||||
let maxRadius = Math.floor(minDimension / 2)
|
||||
let mixed = !(root.radius === root.topLeftRadius
|
||||
&& root.radius === root.topRightRadius
|
||||
&& root.radius === root.bottomLeftRadius
|
||||
&& root.radius === root.bottomRightRadius)
|
||||
|
||||
// Uniform radii
|
||||
if (!mixed) {
|
||||
path.__topLeftRadius = Math.min(root.topLeftRadius, maxRadius)
|
||||
path.__topRightRadius = Math.min(root.topRightRadius, maxRadius)
|
||||
path.__bottomRightRadius = Math.min(root.bottomRightRadius, maxRadius)
|
||||
path.__bottomLeftRadius = Math.min(root.bottomLeftRadius, maxRadius)
|
||||
return
|
||||
}
|
||||
|
||||
// Mixed radii
|
||||
let topLeftRadiusMin = Math.min(minDimension, root.topLeftRadius)
|
||||
let topRightRadiusMin = Math.min(minDimension, root.topRightRadius)
|
||||
let bottomLeftRadiusMin = Math.min(minDimension, root.bottomLeftRadius)
|
||||
let bottomRightRadiusMin = Math.min(minDimension, root.bottomRightRadius)
|
||||
|
||||
// Top radii
|
||||
let topRadii = root.topLeftRadius + root.topRightRadius
|
||||
|
||||
if (topRadii > root.width) {
|
||||
let topLeftRadiusFactor = root.topLeftRadius / topRadii
|
||||
let tlr = Math.round(root.width * topLeftRadiusFactor)
|
||||
|
||||
topLeftRadiusMin = Math.min(topLeftRadiusMin, tlr)
|
||||
topRightRadiusMin = Math.min(topRightRadiusMin, root.width - tlr)
|
||||
}
|
||||
|
||||
// Right radii
|
||||
let rightRadii = root.topRightRadius + root.bottomRightRadius
|
||||
|
||||
if (rightRadii > root.height) {
|
||||
let topRightRadiusFactor = root.topRightRadius / rightRadii
|
||||
let trr = Math.round(root.height * topRightRadiusFactor)
|
||||
|
||||
topRightRadiusMin = Math.min(topRightRadiusMin, trr)
|
||||
bottomRightRadiusMin = Math.min(bottomRightRadiusMin, root.height - trr)
|
||||
}
|
||||
|
||||
// Bottom radii
|
||||
let bottomRadii = root.bottomRightRadius + root.bottomLeftRadius
|
||||
|
||||
if (bottomRadii > root.width) {
|
||||
let bottomRightRadiusFactor = root.bottomRightRadius / bottomRadii
|
||||
let brr = Math.round(root.width * bottomRightRadiusFactor)
|
||||
|
||||
bottomRightRadiusMin = Math.min(bottomRightRadiusMin, brr)
|
||||
bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, root.width - brr)
|
||||
}
|
||||
|
||||
// Left radii
|
||||
let leftRadii = root.bottomLeftRadius + root.topLeftRadius
|
||||
|
||||
if (leftRadii > root.height) {
|
||||
let bottomLeftRadiusFactor = root.bottomLeftRadius / leftRadii
|
||||
let blr = Math.round(root.height * bottomLeftRadiusFactor)
|
||||
|
||||
bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, blr)
|
||||
topLeftRadiusMin = Math.min(topLeftRadiusMin, root.height - blr)
|
||||
}
|
||||
|
||||
path.__topLeftRadius = topLeftRadiusMin
|
||||
path.__topRightRadius = topRightRadiusMin
|
||||
path.__bottomLeftRadius = bottomLeftRadiusMin
|
||||
path.__bottomRightRadius = bottomRightRadiusMin
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
property int __topLeftRadius: 0
|
||||
property int __topRightRadius: 0
|
||||
property int __bottomRightRadius: 0
|
||||
property int __bottomLeftRadius: 0
|
||||
|
||||
readonly property real __borderRadiusAdjustment: {
|
||||
if (root.adjustBorderRadius) {
|
||||
if (root.borderMode === 1)
|
||||
return (root.strokeWidth * 0.5)
|
||||
if (root.borderMode === 2)
|
||||
return root.strokeWidth
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
fillGradient: root.gradient
|
||||
|
||||
startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
|
||||
startY: root.borderOffset
|
||||
|
||||
// Top.
|
||||
PathLine {
|
||||
x: root.width - path.__topRightRadius - root.borderOffset - path.__borderRadiusAdjustment
|
||||
y: root.borderOffset
|
||||
}
|
||||
|
||||
// Top-right.
|
||||
PathArc {
|
||||
x: root.width - root.borderOffset
|
||||
y: path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment
|
||||
|
||||
radiusX: root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment
|
||||
radiusY: root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment
|
||||
}
|
||||
|
||||
// Right.
|
||||
PathLine {
|
||||
x: root.width - root.borderOffset
|
||||
y: root.height - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment
|
||||
}
|
||||
|
||||
// Bottom-right.
|
||||
PathArc {
|
||||
x: root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment
|
||||
y: root.height - root.borderOffset
|
||||
|
||||
radiusX: root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment
|
||||
radiusY: root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment
|
||||
}
|
||||
|
||||
// Bottom.
|
||||
PathLine {
|
||||
x: path.__bottomLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
|
||||
y: root.height - root.borderOffset
|
||||
}
|
||||
|
||||
// Bottom-left.
|
||||
PathArc {
|
||||
x: root.borderOffset
|
||||
y: root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment
|
||||
|
||||
radiusX: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment
|
||||
radiusY: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment
|
||||
}
|
||||
|
||||
// Left.
|
||||
PathLine {
|
||||
x: root.borderOffset
|
||||
y: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
|
||||
}
|
||||
|
||||
// Top-left.
|
||||
PathArc {
|
||||
x: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
|
||||
y: root.borderOffset
|
||||
|
||||
radiusX: root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment
|
||||
radiusY: root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,452 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 RegularPolygon
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A filled regular polygon with an optional border.
|
||||
|
||||
A regular polygon can be just a 2D polygon 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 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 a polygon with a stroke, set the \sideCount property between 3 to 100 and the
|
||||
\l strokeWidth property greater than 0. The \l strokeWidth property specifies the width of the
|
||||
polygon stroke.The default \l sideCount value is 6 and the default \l strokeWidth value is 4.
|
||||
Setting the \l strokeWidth value to a negetive value hides the border.
|
||||
|
||||
The \l radius property specifies whether the polygon corners are rounded. Because this
|
||||
introduces curved edges to the corners, it may be appropriate to set the \c antialiasing
|
||||
property that is inherited from \l Item to improve the appearance of the stroke.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
\image studio-regularpolygon.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
RegularPolygonItem {
|
||||
id: regularPolygon
|
||||
x: 817
|
||||
y: 404
|
||||
width: 133
|
||||
height: 133
|
||||
radius: 10
|
||||
strokeColor: "#262525"
|
||||
fillColor: "#766e6e"
|
||||
}
|
||||
|
||||
RegularPolygonItem {
|
||||
id: regularPolygon1
|
||||
x: 973
|
||||
y: 404
|
||||
width: 133
|
||||
height: 133
|
||||
sideCount: 15
|
||||
gradient: RadialGradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#c56060"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#665e5e"
|
||||
}
|
||||
focalY: regularPolygon1.height * 0.5
|
||||
focalX: regularPolygon1.width * 0.5
|
||||
focalRadius: Math.min(regularPolygon1.width, regularPolygon1.height) * 0
|
||||
centerY: regularPolygon1.height * 0.5
|
||||
centerX: regularPolygon1.width * 0.5
|
||||
centerRadius: Math.min(regularPolygon1.width, regularPolygon1.height) * 0.5
|
||||
}
|
||||
strokeColor: "#262525"
|
||||
}
|
||||
|
||||
RegularPolygonItem {
|
||||
id: regularPolygon2
|
||||
x: 817
|
||||
y: 567
|
||||
width: 133
|
||||
height: 133
|
||||
gradient: ConicalGradient {
|
||||
centerY: regularPolygon2.height * 0.5
|
||||
centerX: regularPolygon2.width * 0.5
|
||||
angle: 0
|
||||
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#fc8e8e"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#f0b9b9"
|
||||
}
|
||||
}
|
||||
joinStyle: 1
|
||||
strokeStyle: 4
|
||||
strokeColor: "#262525"
|
||||
sideCount: 10
|
||||
}
|
||||
|
||||
RegularPolygonItem {
|
||||
id: regularPolygon3
|
||||
x: 973
|
||||
y: 567
|
||||
width: 133
|
||||
height: 133
|
||||
strokeWidth: -1
|
||||
strokeColor: "#262525"
|
||||
sideCount: 7
|
||||
gradient: RadialGradient {
|
||||
GradientStop {
|
||||
position: 0.21053
|
||||
color: "#60c2c5"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#deb2b2"
|
||||
}
|
||||
focalY: regularPolygon3.height * 0.5
|
||||
focalX: regularPolygon3.width * 0.5
|
||||
focalRadius: Math.min(regularPolygon3.width, regularPolygon3.height) * 0
|
||||
centerY: regularPolygon3.height * 0.5
|
||||
centerX: regularPolygon3.width * 0.5
|
||||
centerRadius: Math.min(regularPolygon3.width, regularPolygon3.height) * 0.5
|
||||
}
|
||||
}
|
||||
\endcode
|
||||
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: 200
|
||||
height: 200
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-radius} {10}
|
||||
*/
|
||||
property int radius: 10
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {regular polygon}
|
||||
*/
|
||||
property alias gradient: path.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} {regular polygon}
|
||||
*/
|
||||
//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} {regular polygon}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {regular polygon}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {regular polygon}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {regular polygon}
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {regular polygon}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
/*!
|
||||
The number of edges on the regular polygon.
|
||||
The minimum number of edges can be 3.
|
||||
The default value is 6.
|
||||
*/
|
||||
property int sideCount: 6
|
||||
|
||||
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
|
||||
|
||||
// This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
|
||||
// in case of large stroke width instead of cutting it off.
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: -root.strokeWidth
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
startX: 0
|
||||
startY: 0
|
||||
}
|
||||
|
||||
onWidthChanged: root.constructPolygon()
|
||||
onHeightChanged: root.constructPolygon()
|
||||
onSideCountChanged: root.constructPolygon()
|
||||
onRadiusChanged: root.constructPolygon()
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
|
||||
root.constructPolygon()
|
||||
}
|
||||
|
||||
property real __centerX: root.width / 2
|
||||
property real __centerY: root.height / 2
|
||||
|
||||
function constructPolygon() {
|
||||
root.clearPathElements()
|
||||
|
||||
if (root.radius === 0)
|
||||
root.constructPolygonPath()
|
||||
else
|
||||
root.constructRoundedPolygonPath()
|
||||
}
|
||||
|
||||
function toRadians(degrees) {
|
||||
return degrees * (Math.PI / 180.0)
|
||||
}
|
||||
|
||||
function toDegrees(radians) {
|
||||
return radians * (180.0 / Math.PI)
|
||||
}
|
||||
|
||||
function getPoints() {
|
||||
let sliceAngle = (360.0 / root.sideCount)
|
||||
// The Draftsman's Method
|
||||
let a = root.width / 2 // x-radius
|
||||
let b = root.height / 2 // y-radius
|
||||
let points = []
|
||||
|
||||
// Go clockwise from top center
|
||||
for (var corner = 0; corner < root.sideCount; corner++) {
|
||||
let angleToCorner = root.toRadians(corner * sliceAngle)
|
||||
// Start at top center
|
||||
let x = root.__centerX + a * Math.sin(angleToCorner)
|
||||
let y = root.__centerY - b * Math.cos(angleToCorner)
|
||||
|
||||
points.push(Qt.point(x ,y))
|
||||
}
|
||||
|
||||
return points
|
||||
}
|
||||
|
||||
Component {
|
||||
id: myPathLine
|
||||
PathLine {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: myPathArc
|
||||
PathArc {}
|
||||
}
|
||||
|
||||
function constructPolygonPath() {
|
||||
let angle = (360.0 / root.sideCount)
|
||||
let points = root.getPoints()
|
||||
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
if (i === 0) {
|
||||
path.startX = points[i].x
|
||||
path.startY = points[i].y
|
||||
} else {
|
||||
let pathLine = myPathLine.createObject(path)
|
||||
pathLine.x = points[i].x
|
||||
pathLine.y = points[i].y
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
}
|
||||
|
||||
// Close the polygon
|
||||
var pathLineClose = myPathLine.createObject(path)
|
||||
pathLineClose.x = points[0].x
|
||||
pathLineClose.y = points[0].y
|
||||
path.pathElements.push(pathLineClose)
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/58541430/find-intersection-point-of-two-vectors-independent-from-direction
|
||||
// This function returns the length of the vector from p to the intersection point of the two lines
|
||||
// both defined by a point and a vector.
|
||||
function intersect(p: point, dir1: vector2d, q: point, dir2: vector2d) : real {
|
||||
let r = dir1.normalized()
|
||||
let s = dir2.normalized()
|
||||
|
||||
let pq = Qt.vector2d(q.x - p.x, q.y - p.y)
|
||||
let snv = Qt.vector2d(s.y, -s.x);
|
||||
|
||||
return pq.dotProduct(snv) / r.dotProduct(snv)
|
||||
}
|
||||
|
||||
function wrapIndex(index, size) {
|
||||
return (index + size) % size
|
||||
}
|
||||
|
||||
function constructRoundedPolygonPath() {
|
||||
let angle = (360.0 / root.sideCount)
|
||||
let points = root.getPoints()
|
||||
|
||||
// A list of vectors that are the bisectors of the inner angles of the polygon.
|
||||
// This is used to calculate the intersection point of neighboring bisectors for a corner.
|
||||
// The minimum length of the two neighboring corner bisectors intersection point is the
|
||||
// maximum for the center of the circle that make up the corner radius.
|
||||
let bisectors = []
|
||||
|
||||
// Create angle bisectors by using the parallelolgram rule.
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
let a = points[root.wrapIndex(i, points.length)]
|
||||
let b = points[root.wrapIndex(i - 1, points.length)]
|
||||
let c = points[root.wrapIndex(i + 1, points.length)]
|
||||
|
||||
let vAB = Qt.vector2d(b.x - a.x, b.y - a.y).normalized()
|
||||
let vAC = Qt.vector2d(c.x - a.x, c.y - a.y).normalized()
|
||||
let bisector = vAB.plus(vAC).normalized()
|
||||
|
||||
bisectors.push(bisector)
|
||||
}
|
||||
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
let a = points[root.wrapIndex(i, points.length)]
|
||||
let b = points[root.wrapIndex(i - 1, points.length)]
|
||||
let c = points[root.wrapIndex(i + 1, points.length)]
|
||||
let r = root.radius
|
||||
|
||||
let vAB = Qt.vector2d(b.x - a.x, b.y - a.y)
|
||||
let vAC = Qt.vector2d(c.x - a.x, c.y - a.y)
|
||||
|
||||
// Calculate the intersection points of the two neighboring bisectors
|
||||
let tAB = root.intersect(a, bisectors[root.wrapIndex(i, bisectors.length)],
|
||||
b, bisectors[root.wrapIndex(i - 1, bisectors.length)])
|
||||
let tAC = root.intersect(a, bisectors[root.wrapIndex(i, bisectors.length)],
|
||||
c, bisectors[root.wrapIndex(i + 1, bisectors.length)])
|
||||
let tMax = Math.min(tAB, tAC)
|
||||
|
||||
// Angle between the two vectors AB and AC as radians
|
||||
let alpha = Math.acos(vAB.dotProduct(vAC) / (vAB.length() * vAC.length()))
|
||||
|
||||
// The maximum radius of the circle that can be drawn at the corner. This is another
|
||||
// constraint that Figma uses to calculate the corner radius. The corner radius shouldn't
|
||||
// be bigger than half of the distance between the two neighboring corners.
|
||||
let maxRadius = Math.round(Qt.vector2d(c.x - b.x, c.y - b.y).length() / 2)
|
||||
r = Math.min(r, maxRadius)
|
||||
|
||||
// The optimal length of the corner bisector to place the center of the circle.
|
||||
let cLength = r / (Math.sin(alpha / 2))
|
||||
|
||||
// Clamp c to the maximum value found from the intersection points of the bisectors.
|
||||
let realC = Math.min(cLength, tMax)
|
||||
|
||||
if (realC < cLength)
|
||||
r = realC * Math.sin(alpha / 2)
|
||||
|
||||
let t = Math.sqrt(Math.pow(realC, 2) - Math.pow(r, 2))
|
||||
|
||||
let p1 = vAB.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
|
||||
let p2 = vAC.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
|
||||
|
||||
if (i === 0) {
|
||||
path.startX = p1.x
|
||||
path.startY = p1.y
|
||||
} else {
|
||||
let pathLine = myPathLine.createObject(path)
|
||||
pathLine.x = p1.x
|
||||
pathLine.y = p1.y
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
|
||||
let pathArc = myPathArc.createObject(path)
|
||||
pathArc.x = p2.x
|
||||
pathArc.y = p2.y
|
||||
pathArc.radiusX = r
|
||||
pathArc.radiusY = r
|
||||
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Close the polygon
|
||||
var pathLineClose = myPathLine.createObject(path)
|
||||
pathLineClose.x = path.startX
|
||||
pathLineClose.y = path.startY
|
||||
path.pathElements.push(pathLineClose)
|
||||
}
|
||||
|
||||
function clearPathElements() {
|
||||
for (var i = 0; i !== path.pathElements.length; ++i)
|
||||
path.pathElements[i].destroy()
|
||||
|
||||
path.pathElements = []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 Star
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A filled star-shaped polygon with an optional border.
|
||||
|
||||
A star can be a star 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 dashed stroke.
|
||||
|
||||
Set the \l count property between 3 and 60 to specify the number of points of the star. Set the
|
||||
\l ratio between 0.1 and 1 to specify the distance of the inner points of the star from the
|
||||
center.
|
||||
|
||||
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 a star with a stroke, set the \l strokeWidth property to a value greater than 0. The
|
||||
\l strokeWidth property specifies the width of the polygon stroke.The default \l count value is
|
||||
6 and the default \l strokeWidth value is 4. Setting the \l strokeWidth value to a negative
|
||||
value hides the border.
|
||||
|
||||
The \l radius property specifies whether the star corners are rounded. Because this introduces
|
||||
curved edges to the corners, it may be appropriate to set the \c antialiasing property that is
|
||||
inherited from \l Item to improve the appearance of the stroke.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
\image studio-star.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
|
||||
StarItem {
|
||||
id: star
|
||||
x: 621
|
||||
y: 433
|
||||
width: 142
|
||||
height: 142
|
||||
radius: 10
|
||||
}
|
||||
|
||||
StarItem {
|
||||
id: star1
|
||||
x: 786
|
||||
y: 433
|
||||
width: 142
|
||||
height: 142
|
||||
radius: 1
|
||||
gradient: RadialGradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#ce9d9d"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#000000"
|
||||
}
|
||||
focalY: star1.height * 0.5
|
||||
focalX: star1.width * 0.5
|
||||
focalRadius: Math.min(star1.width, star1.height) * 0
|
||||
centerY: star1.height * 0.5
|
||||
centerX: star1.width * 0.5
|
||||
centerRadius: Math.min(star1.width, star1.height) * 0.5
|
||||
}
|
||||
count: 7
|
||||
}
|
||||
|
||||
StarItem {
|
||||
id: star2
|
||||
x: 786
|
||||
y: 603
|
||||
width: 142
|
||||
height: 142
|
||||
radius: 1
|
||||
fillColor: "#00ffffff"
|
||||
strokeColor: "#000000"
|
||||
ratio: 0.2
|
||||
count: 3
|
||||
}
|
||||
|
||||
StarItem {
|
||||
id: star3
|
||||
x: 621
|
||||
y: 603
|
||||
width: 142
|
||||
height: 142
|
||||
radius: 1
|
||||
gradient: LinearGradient {
|
||||
y2: star3.height * 1
|
||||
y1: star3.height * 0
|
||||
x2: star3.width * 1
|
||||
x1: star3.width * 0
|
||||
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#ff8686"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#5c5e5d"
|
||||
}
|
||||
}
|
||||
strokeColor: "#00ff0000"
|
||||
ratio: 0.6
|
||||
count: 25
|
||||
}
|
||||
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: 200
|
||||
height: 200
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-radius} {10}
|
||||
*/
|
||||
property int radius: 10
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {star}
|
||||
*/
|
||||
property alias gradient: path.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} {star}
|
||||
*/
|
||||
//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} {star}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {star}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {star}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {star}
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {star}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
/*!
|
||||
The number of points in the star. It supports a minimum of 3 and a maximum of 60 points. Set the
|
||||
count to 3 and the \l ratio to 0.5 to create a triangle.
|
||||
|
||||
The default value is 6.
|
||||
*/
|
||||
property int count: 6
|
||||
|
||||
/*!
|
||||
The distance of the inner points of the star from the center. This
|
||||
is represented as percentage of the star's diameter.
|
||||
|
||||
The default value is 0.5.
|
||||
*/
|
||||
property real ratio: 0.5
|
||||
|
||||
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
|
||||
|
||||
// This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
|
||||
// in case of large stroke width instead of cutting it off.
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: -root.strokeWidth
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
startX: 0
|
||||
startY: 0
|
||||
}
|
||||
|
||||
onWidthChanged: root.constructPolygon()
|
||||
onHeightChanged: root.constructPolygon()
|
||||
onCountChanged: root.constructPolygon()
|
||||
onRadiusChanged: root.constructPolygon()
|
||||
onRatioChanged: root.constructPolygon()
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
|
||||
root.constructPolygon()
|
||||
}
|
||||
|
||||
property real __centerX: root.width / 2
|
||||
property real __centerY: root.height / 2
|
||||
|
||||
Component {
|
||||
id: myPathLine
|
||||
PathLine {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: myPathArc
|
||||
PathArc {}
|
||||
}
|
||||
|
||||
function constructPolygon() {
|
||||
root.clearPathElements()
|
||||
|
||||
if (root.radius === 0)
|
||||
root.constructPolygonPath()
|
||||
else
|
||||
root.constructRoundedPolygonPath()
|
||||
}
|
||||
|
||||
function toRadians(degrees) {
|
||||
return degrees * (Math.PI / 180.0)
|
||||
}
|
||||
|
||||
function toDegrees(radians) {
|
||||
return radians * (180.0 / Math.PI)
|
||||
}
|
||||
|
||||
function getPoints() {
|
||||
let numPoints = root.count * 2
|
||||
let sliceAngle = (360.0 / numPoints)
|
||||
// The Draftsman's Method
|
||||
let a = root.width / 2 // x-radius
|
||||
let b = root.height / 2 // y-radius
|
||||
let points = []
|
||||
let r = Math.min(Math.max(root.ratio, 0.001), 1.0)
|
||||
|
||||
for (var corner = 0; corner < numPoints; corner++) {
|
||||
let angleToCorner = root.toRadians(corner * sliceAngle)
|
||||
// Start at top center
|
||||
let x = root.__centerX + a * Math.sin(angleToCorner)
|
||||
let y = root.__centerY - b * Math.cos(angleToCorner)
|
||||
|
||||
// If the corner is an odd number, move the point towards the center by the ratio (0.001 - 1.0)
|
||||
if (corner % 2 === 1) {
|
||||
let vec = Qt.vector2d(x - root.__centerX, y - root.__centerY)
|
||||
let vecLength = vec.length()
|
||||
vec = vec.normalized().times(vecLength * r)
|
||||
|
||||
x = root.__centerX + vec.x
|
||||
y = root.__centerY + vec.y
|
||||
}
|
||||
|
||||
points.push(Qt.point(x ,y))
|
||||
}
|
||||
|
||||
return points
|
||||
}
|
||||
|
||||
function constructPolygonPath() {
|
||||
let angle = (360.0 / root.sideCount)
|
||||
let points = root.getPoints()
|
||||
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
if (i === 0) {
|
||||
path.startX = points[i].x
|
||||
path.startY = points[i].y
|
||||
} else {
|
||||
let pathLine = myPathLine.createObject(path)
|
||||
pathLine.x = points[i].x
|
||||
pathLine.y = points[i].y
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
}
|
||||
|
||||
// Close the polygon
|
||||
var pathLineClose = myPathLine.createObject(path)
|
||||
pathLineClose.x = points[0].x
|
||||
pathLineClose.y = points[0].y
|
||||
path.pathElements.push(pathLineClose)
|
||||
}
|
||||
|
||||
function wrapIndex(index, size) {
|
||||
return (index + size) % size
|
||||
}
|
||||
|
||||
function constructRoundedPolygonPath() {
|
||||
let angle = (360.0 / root.sideCount)
|
||||
let points = root.getPoints()
|
||||
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
let a = points[root.wrapIndex(i, points.length)]
|
||||
let b = points[root.wrapIndex(i - 1, points.length)]
|
||||
let c = points[root.wrapIndex(i + 1, points.length)]
|
||||
|
||||
let vAB = Qt.vector2d(b.x - a.x, b.y - a.y)
|
||||
let vAC = Qt.vector2d(c.x - a.x, c.y - a.y)
|
||||
|
||||
let alpha = Math.acos(vAB.dotProduct(vAC) / (vAB.length() * vAC.length())) // as radians
|
||||
|
||||
let t = root.radius * (1 / Math.tan(alpha / 2))
|
||||
|
||||
let p1 = vAB.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
|
||||
let p2 = vAC.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
|
||||
|
||||
|
||||
if (i === 0) {
|
||||
path.startX = p1.x
|
||||
path.startY = p1.y
|
||||
} else {
|
||||
let pathLine = myPathLine.createObject(path)
|
||||
pathLine.x = p1.x
|
||||
pathLine.y = p1.y
|
||||
path.pathElements.push(pathLine)
|
||||
}
|
||||
|
||||
let pathArc = myPathArc.createObject(path)
|
||||
pathArc.x = p2.x
|
||||
pathArc.y = p2.y
|
||||
pathArc.radiusX = root.radius
|
||||
pathArc.radiusY = root.radius
|
||||
|
||||
if (i % 2 === 1)
|
||||
pathArc.direction = PathArc.Counterclockwise
|
||||
|
||||
path.pathElements.push(pathArc)
|
||||
}
|
||||
|
||||
// Close the polygon
|
||||
var pathLineClose = myPathLine.createObject(path)
|
||||
pathLineClose.x = path.startX
|
||||
pathLineClose.y = path.startY
|
||||
path.pathElements.push(pathLineClose)
|
||||
}
|
||||
|
||||
function clearPathElements() {
|
||||
for (var i = 0; i !== path.pathElements.length; ++i)
|
||||
path.pathElements[i].destroy()
|
||||
|
||||
path.pathElements = []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2021 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
|
||||
|
||||
Item {
|
||||
|
||||
width: 200
|
||||
height: 200
|
||||
id: root
|
||||
property bool flip: false
|
||||
property bool rotate: false
|
||||
|
||||
property int thickness: 45
|
||||
|
||||
property int arrowSize: 80
|
||||
|
||||
property int radius: 5
|
||||
property color color: "#b6b3b3"
|
||||
|
||||
property bool corner: false
|
||||
|
||||
property bool flipCorner: false
|
||||
|
||||
Item {
|
||||
id: content
|
||||
implicitWidth: Math.max(16, childrenRect.width + childrenRect.x)
|
||||
implicitHeight: Math.max(16, childrenRect.height + childrenRect.y)
|
||||
anchors.centerIn: parent
|
||||
|
||||
scale: root.flip ? -1 : 1
|
||||
rotation: root.rotate ? 90 : 0
|
||||
|
||||
TriangleItem {
|
||||
id: triangle
|
||||
x: 0
|
||||
y: 0
|
||||
anchors.verticalCenter: rectangle.verticalCenter
|
||||
rotation: -90
|
||||
strokeWidth: -1
|
||||
width: root.arrowSize
|
||||
height: root.arrowSize
|
||||
radius: root.radius
|
||||
fillColor: root.color
|
||||
}
|
||||
|
||||
RectangleItem {
|
||||
id: rectangle
|
||||
x: root.arrowSize - root.radius * 2
|
||||
//y: ((root.rotate ? root.width : root.height) - root.thickness) / 2
|
||||
width: (root.rotate ? root.height : root.width) - (root.arrowSize - root.radius * 2)
|
||||
height: root.thickness
|
||||
strokeWidth: -1
|
||||
radius: root.radius
|
||||
fillColor: root.color
|
||||
}
|
||||
RectangleItem {
|
||||
id: rectangle1
|
||||
x: 260
|
||||
y: 202
|
||||
width: root.corner ? root.thickness : 0
|
||||
strokeWidth: -1
|
||||
height: root.corner ? (root.rotate ? root.width : root.height) / 2 : 0
|
||||
anchors.bottom: root.flipCorner ? undefined : rectangle.verticalCenter
|
||||
anchors.top: root.flipCorner ? rectangle.verticalCenter : undefined
|
||||
anchors.right: rectangle.right
|
||||
fillColor: root.color
|
||||
visible: root.corner
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 Text
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
\inherits Text
|
||||
|
||||
\brief A filled text with an optional border.
|
||||
|
||||
A text can be a text 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 text 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 a text with a stroke, set a \l strokeWidth property that is greater than 0. The
|
||||
\l strokeWidth property specifies the width of the text stroke. The default \l strokeWidth
|
||||
value is 4. Setting the \l strokeWidth value to -1 hides the border.
|
||||
|
||||
Text supports only plain strings. The \l font properties are applied to the \l text.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
\image studio-text.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
TextItem {
|
||||
id: _text
|
||||
x: 874
|
||||
y: 213
|
||||
text: qsTr("Qt")
|
||||
font.pixelSize: 120
|
||||
fillColor: "#00ffffff"
|
||||
strokeColor: "#1e8f00"
|
||||
font.bold: true
|
||||
strokeWidth: 2
|
||||
}
|
||||
|
||||
TextItem {
|
||||
id: _text1
|
||||
x: 1033
|
||||
y: 213
|
||||
text: qsTr("Qt")
|
||||
font.pixelSize: 120
|
||||
gradient: LinearGradient {
|
||||
y2: _text1.height * 1
|
||||
y1: _text1.height * 0
|
||||
x2: _text1.width * 1
|
||||
x1: _text1.width * 0
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#00d158"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 0.55263
|
||||
color: "#ffffff"
|
||||
}
|
||||
}
|
||||
strokeWidth: 2
|
||||
strokeColor: "#ff0000"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
TextItem {
|
||||
id: _text2
|
||||
x: 874
|
||||
y: 402
|
||||
text: qsTr("Qt")
|
||||
font.pixelSize: 120
|
||||
strokeStyle: 3
|
||||
strokeWidth: 2
|
||||
strokeColor: "#474747"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
TextItem {
|
||||
id: _text3
|
||||
x: 1033
|
||||
y: 402
|
||||
text: qsTr("Qt")
|
||||
font.pixelSize: 120
|
||||
gradient: RadialGradient {
|
||||
focalY: _text3.height * 0.5
|
||||
focalX: _text3.width * 0.5
|
||||
focalRadius: Math.min(_text3.width, _text3.height) * 0
|
||||
centerY: _text3.height * 0.5
|
||||
centerX: _text3.width * 0.5
|
||||
centerRadius: Math.min(_text3.width, _text3.height) * 0.5
|
||||
|
||||
GradientStop {
|
||||
position: 0.10526
|
||||
color: "#00ffab"
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#ff000000"
|
||||
}
|
||||
}
|
||||
strokeWidth: -1
|
||||
strokeColor: "#1e8f00"
|
||||
font.bold: true
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
width: textMetrics.advanceWidth
|
||||
height: Math.ceil(textMetrics.height) // TODO
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {text}
|
||||
*/
|
||||
property alias gradient: path.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} {text}
|
||||
*/
|
||||
//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} {text}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {text}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {text}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {text}
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {text}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
/*!
|
||||
The font properties for the \l text. Change the \l {QFont::family} {family},
|
||||
\l {QFont::letterSpacing} {letterSpacing}, \l {QFont::pixelSize} {pixelSize},
|
||||
\l {QFont::wordSpacing} {wordSpacing}, \l {QFont::weight} {weight} of the \l text using these
|
||||
properties.You can also set wheather the \l text has auto \l {QFont::kerning} {kerning} or if it
|
||||
follows the \l {QtQuick::Text::font.preferShaping} {preferShaping} using the font specific
|
||||
features. Also sets your preferred font \l {QFont::capitalization} {capitalization} method and
|
||||
\l {QFont::styleName} {styleName} for the \l text.
|
||||
|
||||
\sa QFont Text
|
||||
*/
|
||||
property alias font: pathText.font
|
||||
|
||||
/*!
|
||||
The text to display. Text supports only plain strings.
|
||||
|
||||
\sa QFont Text
|
||||
*/
|
||||
property alias text: pathText.text
|
||||
|
||||
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
|
||||
|
||||
// This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
|
||||
// in case of large stroke width instead of cutting it off.
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: -root.strokeWidth
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
startX: 0
|
||||
startY: 0
|
||||
|
||||
PathText {
|
||||
id: pathText
|
||||
x: 0
|
||||
y: fontMetrics.height + textMetrics.tightBoundingRect.y - fontMetrics.descent
|
||||
font.family: "Arial"
|
||||
}
|
||||
}
|
||||
|
||||
TextMetrics {
|
||||
id: textMetrics
|
||||
font: pathText.font
|
||||
text: pathText.text
|
||||
}
|
||||
|
||||
FontMetrics {
|
||||
id: fontMetrics
|
||||
font: pathText.font
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,428 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** 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 Triangle
|
||||
\inqmlmodule QtQuick.Studio.Components
|
||||
\since QtQuick.Studio.Components 1.0
|
||||
\inherits Shape
|
||||
|
||||
\brief A triangle.
|
||||
|
||||
The Triangle type can be used to draw triangles with different dimensions and shapes. The type
|
||||
is enclosed in an invisible \l Rectangle type. The size of the triangle is determined by the
|
||||
size of the bounding rectangle. The dimensions of the triangle can be changed to make it
|
||||
elongated or squat with space around it by using the \l leftMargin, \l topMargin, \l rightMargin,
|
||||
and \l bottomMargin properties. The margins are set between the triangle and the edges of the
|
||||
parent rectangle.
|
||||
|
||||
Each Triangle item 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.
|
||||
|
||||
An optional border can be added to a triangle with its own color and thickness by setting the
|
||||
\l strokeColor and \l strokeWidth properties. Setting the color to \c transparent creates a
|
||||
border without a fill color.
|
||||
|
||||
\section2 Example Usage
|
||||
|
||||
You can use the Triangle component in \QDS to create triangles in different shapes and colors.
|
||||
|
||||
\image studio-triangle.webp
|
||||
|
||||
The QML code looks as follows:
|
||||
|
||||
\code
|
||||
TriangleItem {
|
||||
id: triangle
|
||||
x: 845
|
||||
y: 265
|
||||
strokeColor: "gray"
|
||||
fillColor: "light gray"
|
||||
}
|
||||
|
||||
TriangleItem {
|
||||
id: squatTriangle
|
||||
x: 1009
|
||||
y: 265
|
||||
bottomMargin: 10
|
||||
topMargin: 30
|
||||
fillColor: "#d3d3d3"
|
||||
strokeColor: "#808080"
|
||||
}
|
||||
|
||||
TriangleItem {
|
||||
id: elongatedTriangle
|
||||
x: 845
|
||||
y: 394
|
||||
rightMargin: 10
|
||||
leftMargin: 10
|
||||
fillColor: "#d3d3d3"
|
||||
strokeColor: "#808080"
|
||||
}
|
||||
|
||||
TriangleItem {
|
||||
id: pear
|
||||
x: 1009
|
||||
y: 394
|
||||
radius: 20
|
||||
fillColor: "light gray"
|
||||
bottomMargin: 10
|
||||
arcRadius: 20
|
||||
strokeColor: "#808080"
|
||||
}
|
||||
\endcode
|
||||
*/
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
|
||||
width: 100
|
||||
height: 100
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-gradient} {triangle}
|
||||
*/
|
||||
property alias gradient: path.fillGradient
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeWidth} {triangle}
|
||||
*/
|
||||
property alias strokeWidth: path.strokeWidth
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeColor} {triangle}
|
||||
*/
|
||||
property alias strokeColor: path.strokeColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashPattern} {triangle}
|
||||
*/
|
||||
property alias dashPattern: path.dashPattern
|
||||
|
||||
/*!
|
||||
\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.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-strokeStyle} {triangle}
|
||||
*/
|
||||
//property alias strokeStyle: path.strokeStyle
|
||||
property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-fillColor} {triangle}
|
||||
*/
|
||||
property alias fillColor: path.fillColor
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-dashOffset} {triangle}
|
||||
*/
|
||||
property alias dashOffset: path.dashOffset
|
||||
|
||||
property int pLineXStart
|
||||
property int pLineXEnd
|
||||
property int pLineYStart
|
||||
property int pLineYEnd
|
||||
|
||||
property point topIntersection1
|
||||
property point topIntersection2
|
||||
property point leftIntersection1
|
||||
property point leftIntersection2
|
||||
property point rightIntersection1
|
||||
property point rightIntersection2
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-radius} {5}
|
||||
|
||||
This property can be used together with the \l arcRadius property to determine the shape of the
|
||||
triangle.
|
||||
|
||||
\sa arcRadius
|
||||
*/
|
||||
property int radius: 5
|
||||
|
||||
/*!
|
||||
\include CommonItemDescriptions.qdocinc {component-radius} {5}
|
||||
|
||||
This property can be used together with the \l radius property to
|
||||
determine the shape of the triangle.
|
||||
*/
|
||||
property real arcRadius: root.radius
|
||||
|
||||
/*!
|
||||
The left margin between the triangle and the bounding rectangle.
|
||||
Setting the left and right margins makes the triangle thinner and moves it away from the edge.
|
||||
|
||||
\sa rightMargin, topMargin, bottomMargin
|
||||
*/
|
||||
property real leftMargin: 0
|
||||
|
||||
/*!
|
||||
The top margin between the triangle and the bounding rectangle.
|
||||
Setting the top and bottom margins makes the triangle lower and moves it away from the edge.
|
||||
|
||||
\sa bottomMargin, leftMargin, rightMargin
|
||||
*/
|
||||
property real topMargin: 0
|
||||
|
||||
/*!
|
||||
The right margin between the triangle and the bounding rectangle.
|
||||
Setting the left and right margins makes the triangle thinner and moves it away from the edge.
|
||||
|
||||
\sa leftMargin, topMargin, bottomMargin
|
||||
*/
|
||||
property real rightMargin: 0
|
||||
|
||||
/*!
|
||||
\qmlproperty real Triangle::bottomMargin
|
||||
|
||||
The top margin between the triangle and the bounding rectangle.
|
||||
Setting the top and bottom margins makes the triangle shorter and moves it away from the edge.
|
||||
|
||||
\sa topMargin, leftMargin, rightMargin
|
||||
*/
|
||||
property real bottomMargin: 0
|
||||
|
||||
property int maxRadius: 0
|
||||
|
||||
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
|
||||
|
||||
// This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
|
||||
// in case of large stroke width instead of cutting it off.
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: -root.strokeWidth
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
id: path
|
||||
|
||||
//property real __width: root.width - root.strokeWidth - root.leftMargin - root.rightMargin
|
||||
//property real __height: root.height - root.strokeWidth - root.topMargin - root.bottomMargin
|
||||
//property real xOffset: root.strokeWidth / 2 + root.leftMargin
|
||||
//property real yOffset: root.strokeWidth / 2 + root.topMargin
|
||||
|
||||
property real __width: root.width - root.leftMargin - root.rightMargin
|
||||
property real __height: root.height - root.topMargin - root.bottomMargin
|
||||
property real xOffset: root.leftMargin
|
||||
property real yOffset: root.topMargin
|
||||
|
||||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
capStyle: root.capStyle
|
||||
strokeStyle: root.strokeStyle
|
||||
joinStyle: root.joinStyle
|
||||
|
||||
startX: root.topIntersection1.x + path.xOffset
|
||||
startY: root.topIntersection1.y + path.yOffset
|
||||
|
||||
PathArc {
|
||||
radiusX: Math.max(root.arcRadius, 1)
|
||||
radiusY: Math.max(root.arcRadius, 1)
|
||||
|
||||
x: root.topIntersection2.x + path.xOffset
|
||||
y: root.topIntersection2.y + path.yOffset
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.rightIntersection1.x + path.xOffset
|
||||
y: root.rightIntersection1.y + path.yOffset
|
||||
}
|
||||
|
||||
PathArc {
|
||||
radiusX: Math.max(root.arcRadius, 1)
|
||||
radiusY: Math.max(root.arcRadius, 1)
|
||||
|
||||
x: root.rightIntersection2.x + path.xOffset
|
||||
y: root.rightIntersection2.y + path.yOffset
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.leftIntersection1.x + path.xOffset
|
||||
y: root.leftIntersection1.y + path.yOffset
|
||||
}
|
||||
|
||||
PathArc {
|
||||
radiusX: Math.max(root.arcRadius, 1)
|
||||
radiusY: Math.max(root.arcRadius, 1)
|
||||
|
||||
x: root.leftIntersection2.x + path.xOffset
|
||||
y: root.leftIntersection2.y + path.yOffset
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.topIntersection1.x + path.xOffset
|
||||
y: root.topIntersection1.y + path.yOffset
|
||||
}
|
||||
}
|
||||
|
||||
onWidthChanged: root.calc()
|
||||
onHeightChanged: root.calc()
|
||||
|
||||
onRadiusChanged: root.calc()
|
||||
onArcRadiusChanged: root.calc()
|
||||
|
||||
onTopMarginChanged: root.calc()
|
||||
onBottomMarginChanged: root.calc()
|
||||
onLeftMarginChanged: root.calc()
|
||||
onRightMarginChanged: root.calc()
|
||||
|
||||
Component.onCompleted: {
|
||||
// If preferredRendererType wasn't set initially make CurveRenderer the default
|
||||
if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
|
||||
root.preferredRendererType = Shape.CurveRenderer
|
||||
|
||||
root.calc()
|
||||
}
|
||||
|
||||
function length(x, y) {
|
||||
return Math.sqrt(x * x + y * y)
|
||||
}
|
||||
|
||||
function normalize(x, y) {
|
||||
var l = length(x, y)
|
||||
|
||||
return {
|
||||
x: x / l,
|
||||
y: y / l
|
||||
}
|
||||
}
|
||||
|
||||
function dotProduct(x1, y1, x2, y2) {
|
||||
return x1 * x2 + y1 * y2;
|
||||
}
|
||||
|
||||
function project(x1, y1, x2, y2) {
|
||||
var normalized = normalize(x1, y1)
|
||||
|
||||
var dot = dotProduct(normalized.x, normalized.y, x2, y2)
|
||||
|
||||
return {
|
||||
x: normalized.x * dot,
|
||||
y: normalized.y * dot
|
||||
}
|
||||
}
|
||||
|
||||
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
|
||||
var denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
|
||||
|
||||
var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
|
||||
var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
|
||||
return {
|
||||
x: x1 + ua * (x2 - x1),
|
||||
y: y1 + ua * (y2 - y1)
|
||||
};
|
||||
}
|
||||
|
||||
function moveLine(startX, startY, endX, endY) {
|
||||
var angle = Math.atan2(endY - startY, endX - startX)
|
||||
var xOffset = Math.sin(angle) * Math.min(root.radius, root.maxRadius)
|
||||
var yOffset = -Math.cos(angle) * Math.min(root.radius, root.maxRadius)
|
||||
|
||||
return {
|
||||
startX: startX + xOffset,
|
||||
startY: startY + yOffset,
|
||||
endX: endX + xOffset,
|
||||
endY: endY + yOffset
|
||||
};
|
||||
}
|
||||
|
||||
function calc() {
|
||||
var movedLine1 = moveLine(path.__width / 2, 0, 0, path.__height)
|
||||
var movedLine2 = moveLine(path.__width, path.__height, path.__width / 2, 0)
|
||||
var movedLine3 = moveLine(0, path.__height, path.__width, path.__height)
|
||||
|
||||
var lengthLine1 = Math.floor(root.length(movedLine1.endX - movedLine1.startX,
|
||||
movedLine1.endY - movedLine1.startY))
|
||||
var lengthLine2 = Math.floor(root.length(movedLine2.endX - movedLine2.startX,
|
||||
movedLine2.endY - movedLine2.startY))
|
||||
var lengthLine3 = Math.floor(root.length(movedLine3.endX - movedLine3.startX,
|
||||
movedLine3.endY - movedLine3.startY))
|
||||
|
||||
var perimeter = lengthLine1 + lengthLine2 + lengthLine3
|
||||
var area = (path.__height) * (path.__width) * 0.5
|
||||
|
||||
root.maxRadius = area * 2 / perimeter
|
||||
|
||||
var intersectionTop = root.intersect(movedLine1.startX, movedLine1.startY,
|
||||
movedLine1.endX, movedLine1.endY,
|
||||
movedLine2.startX, movedLine2.startY,
|
||||
movedLine2.endX, movedLine2.endY)
|
||||
var intersectionLeft = root.intersect(movedLine1.startX, movedLine1.startY,
|
||||
movedLine1.endX, movedLine1.endY,
|
||||
movedLine3.startX, movedLine3.startY,
|
||||
movedLine3.endX, movedLine3.endY)
|
||||
var intersectionRight = root.intersect(movedLine2.startX, movedLine2.startY,
|
||||
movedLine2.endX, movedLine2.endY,
|
||||
movedLine3.startX, movedLine3.startY,
|
||||
movedLine3.endX, movedLine3.endY)
|
||||
|
||||
var leftBottom = root.project(1, 0, intersectionLeft.x, intersectionLeft.y)
|
||||
var rightBottom = root.project(1, 0, intersectionRight.x, intersectionRight.y)
|
||||
|
||||
root.leftIntersection1 = Qt.point(leftBottom.x, leftBottom.y + path.__height)
|
||||
root.rightIntersection2 = Qt.point(rightBottom.x, rightBottom.y + path.__height)
|
||||
|
||||
var leftTop = root.project(-path.__width / 2 , path.__height,
|
||||
intersectionTop.x - path.__width / 2, intersectionTop.y)
|
||||
|
||||
leftBottom = root.project(-path.__width / 2 , path.__height,
|
||||
intersectionLeft.x - path.__width / 2, intersectionLeft.y)
|
||||
|
||||
root.leftIntersection2 = Qt.point(leftBottom.x + path.__width / 2, leftBottom.y)
|
||||
root.topIntersection1 = Qt.point(leftTop.x + path.__width / 2, leftTop.y)
|
||||
|
||||
var rightTop = root.project(path.__width / 2 , path.__height,
|
||||
intersectionTop.x - path.__width / 2, intersectionTop.y)
|
||||
|
||||
rightBottom = root.project(path.__width / 2 , path.__height,
|
||||
intersectionRight.x - path.__width / 2, intersectionRight.y)
|
||||
|
||||
root.topIntersection2 = Qt.point(rightTop.x + path.__width / 2, rightTop.y)
|
||||
root.rightIntersection1 = Qt.point(rightBottom.x + path.__width / 2, rightBottom.y)
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,36 @@
|
||||
module QtQuick.Studio.Components
|
||||
linktarget QuickStudioComponentsplugin
|
||||
optional plugin QuickStudioComponentsplugin
|
||||
classname QtQuick_Studio_ComponentsPlugin
|
||||
designersupported
|
||||
typeinfo QuickStudioComponents.qmltypes
|
||||
prefer :/qt-project.org/imports/QtQuick/Studio/Components/
|
||||
ArcArrow 254.0 ArcArrow.qml
|
||||
ArcArrow 1.0 ArcArrow.qml
|
||||
ArcItem 254.0 ArcItem.qml
|
||||
ArcItem 1.0 ArcItem.qml
|
||||
BorderItem 254.0 BorderItem.qml
|
||||
BorderItem 1.0 BorderItem.qml
|
||||
EllipseItem 254.0 EllipseItem.qml
|
||||
EllipseItem 1.0 EllipseItem.qml
|
||||
FlipableItem 254.0 FlipableItem.qml
|
||||
FlipableItem 1.0 FlipableItem.qml
|
||||
GroupItem 254.0 GroupItem.qml
|
||||
GroupItem 1.0 GroupItem.qml
|
||||
PieItem 254.0 PieItem.qml
|
||||
PieItem 1.0 PieItem.qml
|
||||
RectangleItem 254.0 RectangleItem.qml
|
||||
RectangleItem 1.0 RectangleItem.qml
|
||||
RegularPolygonItem 254.0 RegularPolygonItem.qml
|
||||
RegularPolygonItem 1.0 RegularPolygonItem.qml
|
||||
StarItem 254.0 StarItem.qml
|
||||
StarItem 1.0 StarItem.qml
|
||||
StraightArrow 254.0 StraightArrow.qml
|
||||
StraightArrow 1.0 StraightArrow.qml
|
||||
SvgPathItem 254.0 SvgPathItem.qml
|
||||
SvgPathItem 1.0 SvgPathItem.qml
|
||||
TextItem 254.0 TextItem.qml
|
||||
TextItem 1.0 TextItem.qml
|
||||
TriangleItem 254.0 TriangleItem.qml
|
||||
TriangleItem 1.0 TriangleItem.qml
|
||||
|
||||
Reference in New Issue
Block a user