QT/TaoQuick
1
0
Fork 0
mirror of https://github.com/jaredtao/TaoQuick.git synced 2025-01-31 21:22:58 +08:00
Code Issues Projects Releases Wiki Activity

add: Draw graphics(Rectangle+Triangle+Circle+Ellipse) and use SequentialAnimation

Browse Source
This commit is contained in:
kongdehui1 2022-03-29 21:37:19 +08:00
parent abb1719322
commit cb25a4159e
15 changed files with 585 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/TaoQuickShow/Contents.qrc
View File

@ -51,5 +51,11 @@
<file>Contents/General/Tables.qml</file>
<file>Trans/language_zh.json</file>
<file>Contents/Effect/EditJoggle.qml</file>
<file>Contents/General/RoundRects.qml</file>
<file>Contents/General/Shapes.qml</file>
<file>Contents/ShapeGallery/ShapeRectrangle.qml</file>
<file>Contents/ShapeGallery/ShapeCircle.qml</file>
<file>Contents/ShapeGallery/ShapeEllipse.qml</file>
<file>Contents/ShapeGallery/ShapeTriangle.qml</file>
</qresource>
</RCC>

74
examples/TaoQuickShow/Contents/General/RoundRects.qml Normal file
View File

@ -0,0 +1,74 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import TaoQuick 1.0
Item {
anchors.fill: parent
Rectangle { //背景红色，衬托一下
x: 10
width: 100
height: 160
color: "red"
}
RoundRectangle {
id: roundRect
x: 40
y: 10
width: 200
height: 160
radius: 40
leftTopRound: lt.checked
rightTopRound: rt.checked
leftBottomRound: lb.checked
rightBottomRound: rb.checked
color: "#333666" //半透明色
}
Rectangle { //背景红色，衬托一下
x: 10
y: 300
width: 100
height: 160
color: "red"
}
RoundRectangleShape{
x: 40
y: 340
width: 200
height: 160
radius: 40
leftTopRound: lt.checked
rightTopRound: rt.checked
leftBottomRound: lb.checked
rightBottomRound: rb.checked
color: "#A0333666" //半透明色
}
Grid {
x: 300
y: 10
columns: 2
spacing: 10
CheckBox {
id: lt
text: "LeftTop"
checked: true
}
CheckBox {
id: rt
text: "RightTop"
checked: true
}
CheckBox {
id: lb
text: "LeftBottom"
checked: true
}
CheckBox {
id: rb
text: "rightBottom"
checked: true
}
}
}

76
examples/TaoQuickShow/Contents/General/Shapes.qml Normal file
View File

@ -0,0 +1,76 @@
import QtQuick 2.9
import QtQuick.Shapes 1.0
Rectangle {
id: root
width: 1024
height: 768
property color col: "lightsteelblue"
ListModel {
id: pathGalleryModel
ListElement {
name: "Rectrangle"
shapeUrl: "../ShapeGallery/ShapeRectrangle.qml"
}
ListElement {
name: "Triangle"
shapeUrl: "../ShapeGallery/ShapeTriangle.qml"
}
ListElement {
name: "Circle"
shapeUrl: "../ShapeGallery/ShapeCircle.qml"
}
ListElement {
name: "Ellipse"
shapeUrl: "../ShapeGallery/ShapeEllipse.qml"
}
}
property int gridSpacing: 10
Component {
id: pathGalleryDelegate
Rectangle {
border.color: "purple"
width: grid.cellWidth - root.gridSpacing
height: grid.cellHeight - root.gridSpacing
Column {
anchors.fill: parent
anchors.margins: 4
Item {
width: parent.width
height: parent.height - delegText.height
Loader {
source: Qt.resolvedUrl(shapeUrl)
anchors.fill: parent
}
}
Text {
id: delegText
text: model.name
font.pointSize: 16
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
Rectangle {
anchors.fill: parent
anchors.margins: 10
color: "transparent"
clip: true
GridView {
id: grid
anchors.fill: parent
anchors.margins: root.gridSpacing
cellWidth: 300
cellHeight: 300
delegate: pathGalleryDelegate
model: pathGalleryModel
}
}
}

46
examples/TaoQuickShow/Contents/ShapeGallery/ShapeCircle.qml Normal file
View File

@ -0,0 +1,46 @@
import QtQuick 2.12
import QtQuick.Shapes 1.12
Rectangle {
width: 120
height: 120
color: th.pressed ? "steelBlue" : "lightGray"
containmentMask: ctr
TapHandler { id: th }
Shape {
id: circ
anchors.fill: parent
SequentialAnimation on opacity {
loops: Animation.Infinite
NumberAnimation { from: 1.0; to: 0.0; duration: 5000 }
NumberAnimation { from: 0.0; to: 1.0; duration: 5000 }
}
ShapePath {
id: shapePath
strokeWidth: 3
strokeColor: "black"
fillColor: "white"
property real r: 40
startX: circ.width / 2 - r
startY: circ.height / 2 - r
PathArc {
x: circ.width / 2 + shapePath.r
y: circ.height / 2 + shapePath.r
radiusX: shapePath.r; radiusY: shapePath.r
useLargeArc: true
}
PathArc {
x: circ.width / 2 - shapePath.r
y: circ.height / 2 - shapePath.r
radiusX: shapePath.r; radiusY: shapePath.r
useLargeArc: true
}
}
}
}

41
examples/TaoQuickShow/Contents/ShapeGallery/ShapeEllipse.qml Normal file
View File

@ -0,0 +1,41 @@
import QtQuick 2.12
import QtQuick.Shapes 1.12
Rectangle {
width: 120
height: 120
color: th.pressed ? "steelBlue" : "lightGray"
containmentMask: ctr
TapHandler { id: th }
Shape {
id: shape
anchors.fill: parent
ShapePath {
id: p
strokeWidth: 3
strokeColor: "black"
fillColor: "white"
property real xr: 70
property real yr: 30
startX: shape.width / 2 - xr
startY: shape.height / 2 - yr
PathArc {
x: shape.width / 2 + p.xr
y: shape.height / 2 + p.yr
radiusX: p.xr; radiusY: p.yr
useLargeArc: true
}
PathArc {
x: shape.width / 2 - p.xr
y: shape.height / 2 - p.yr
radiusX: p.xr; radiusY: p.yr
useLargeArc: true
}
}
}
}

38
examples/TaoQuickShow/Contents/ShapeGallery/ShapeRectrangle.qml Normal file
View File

@ -0,0 +1,38 @@
import QtQuick 2.12
import QtQuick.Shapes 1.12
Rectangle {
id:root
width: 120
height: 120
color: th.pressed ? "steelBlue" : "lightGray"
containmentMask: ctr
TapHandler { id: th }
Shape {
id: ctr
anchors.fill: parent
containsMode: Shape.FillContains
ShapePath {
strokeColor: "white"
fillColor: "white"
strokeWidth: 3
startX: 90; startY: 90
PathLine { x: 180; y: 90 }
PathLine { x: 180; y: 180}
PathLine { x: 90; y: 180 }
PathLine { x: 90; y: 90 }
}
NumberAnimation on rotation {
from: 0
to: 360
duration: 5000
loops: Animation.Infinite
}
}
}

48
examples/TaoQuickShow/Contents/ShapeGallery/ShapeTriangle.qml Normal file
View File

@ -0,0 +1,48 @@
import QtQuick 2.12
import QtQuick.Shapes 1.12
Rectangle {
width: 120
height: 120
color: th.pressed ? "steelBlue" : "lightGray"
containmentMask: ctr
TapHandler { id: th }
Shape {
id: ctr
anchors.fill: parent
containsMode: Shape.FillContains
ShapePath {
strokeColor: "black"
fillColor: "white"
strokeWidth: 3
SequentialAnimation on strokeColor {
loops: Animation.Infinite
ColorAnimation {
from: "black"
to: "green"
duration: 5000
}
ColorAnimation {
from: "green"
to: "yellow"
duration: 5000
}
ColorAnimation {
from: "yellow"
to: "black"
duration: 5000
}
}
startX: ctr.width/2; startY: 80
PathLine { x: ctr.width/2 + 50; y: 80 + 100 }
PathLine { x: ctr.width/2 - 50; y: 80 + 100 }
PathLine { x: ctr.width/2; y: 80 }
}
}
}

15
examples/TaoQuickShow/Qml/Pane/ContentModel.qml
View File

@ -43,6 +43,21 @@ ListModel {
visible: true
group: "General"
groupOpen: true
}
ListElement {
name: "RoundRect"
source: "General/RoundRects.qml"
visible: true
group: "General"
groupOpen: true
}
ListElement {
name: "Shapes"
source: "General/Shapes.qml"
visible: true
group: "General"
groupOpen: true
}
ListElement {

8
examples/TaoQuickShow/Trans/language_zh.json
View File

@ -116,6 +116,10 @@
"key": "IP address",
"value": "IP地址"
},
{
"key": "RoundRect",
"value": "圆角矩形"
},
{
"key": "Home",
"value": "首页"
@ -325,6 +329,10 @@
"key": "Others",
"value": "其它"
},
{
"key": "Shapes",
"value": "图形"
},
{
"key": "Sponsors",
"value": "赞助"

7
examples/TaoQuickShow/taoMacro.h Normal file
View File

@ -0,0 +1,7 @@
#pragma once
#define TaoQuickImport "file:///E:/00github/TaoQuick/src"
#define TaoQuickImage "file:///E:/00github/TaoQuick/src/TaoQuick/Images/"
#define qmlPath "file:///E:/00github/TaoQuick/examples/TaoQuickShow/Qml/"
#define contentsPath "file:///E:/00github/TaoQuick/examples/TaoQuickShow/Contents/"
#define imgPath "file:///E:/00github/TaoQuick/examples/TaoQuickShow/Image/"
#define transDir "E:/00github/TaoQuick/examples/TaoQuickShow/Trans/"

26
src/TaoQuick/Qml/Basic/CusCallLater.qml Normal file
View File

@ -0,0 +1,26 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
Item {
Component {
id: timerComp
Timer {
id: timer
repeat: false
property var _cb: function() {}
onTriggered: {
_cb()
destroy(parent)
}
function setTimeout(callback, delayTime) {
_cb = callback;
interval = delayTime;
start();
}
}
}
function callLate(callback, delayTime) {
var timerObj = timerComp.createObject()
timerObj.setTimeout(callback, delayTime)
}
}

100
src/TaoQuick/Qml/Basic/RoundRectangle.qml Normal file
View File

@ -0,0 +1,100 @@
import QtQuick 2.10
import QtQuick.Controls 2.2
Rectangle {
id: root
implicitWidth: 50
implicitHeight: 50
radius: 0
readonly property int lt: Qt.AlignLeft | Qt.AlignTop
readonly property int lb: Qt.AlignLeft | Qt.AlignBottom
readonly property int rt: Qt.AlignRight | Qt.AlignTop
readonly property int rb: Qt.AlignRight | Qt.AlignBottom
property bool leftTopRound: false
property bool rightTopRound: false
property bool leftBottomRound: false
property bool rightBottomRound: false
onLeftTopRoundChanged: {
updateCorners()
}
onLeftBottomRoundChanged: {
updateCorners()
}
onRightBottomRoundChanged: {
updateCorners()
}
onRightTopRoundChanged: {
updateCorners()
}
function updateCorners() {
var s = []
if(leftTopRound) {
s.push(lt)
}
if(rightTopRound) {
s.push(rt)
}
if(leftBottomRound) {
s.push(lb)
}
if(rightBottomRound) {
s.push(rb)
}
corners = s
}
property var corners: []
Repeater {
model: [
{
x: 0,
y: 0,
visible: internal.aligns(lt),
radius: root.radius
},
{
x: root.width - root.radius,
y: 0,
visible: internal.aligns(rt),
radius: root.radius
},
{
x: 0,
y: root.height - root.radius,
visible: internal.aligns(lb),
radius: root.radius
},
{
x: root.width - root.radius,
y: root.height - root.radius,
visible: internal.aligns(rb),
radius: root.radius
}
]
Rectangle {
x: modelData.x; y: modelData.y
width: modelData.radius; height: width
visible: !modelData.visible
color: parent.color
}
}
QtObject {
id: internal
function aligns(direction) {
if (Array.isArray(root.corners)) {
for (var i = 0; i < root.corners.length; i++) {
if ((root.corners[i] & direction) === direction)
return true
}
return false;
}
else {
return (root.corners & direction) === direction
}
}
}
}

77
src/TaoQuick/Qml/Basic/RoundRectangleShape.qml Normal file
View File

@ -0,0 +1,77 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Shapes 1.12
Shape {
id: root
//左上角是否圆角
property bool leftTopRound: true
//左下角是否圆角
property bool leftBottomRound: true
//右上角是否圆角
property bool rightTopRound: true
//右下角是否圆角
property bool rightBottomRound: true
//圆角半径
property real radius
//颜色
property color color: "red"
//多重采样抗锯齿
layer.enabled: true
layer.samples: 8
//平滑处理
smooth: true
//默认抗锯齿
antialiasing: true
ShapePath {
fillColor: color
startX: leftTopRound ? radius : 0
startY: 0
// fillRule: ShapePath.WindingFill
PathLine {
x: rightTopRound ? root.width - radius : root.width
y: 0
}
PathArc {
x: root.width
y: rightTopRound ? radius : 0
radiusX: rightTopRound ? radius : 0
radiusY: rightTopRound ? radius : 0
}
PathLine {
x: root.width
y: rightBottomRound ? root.height - radius : root.height
}
PathArc {
x: rightBottomRound ? root.width - radius : root.width
y: root.height
radiusX: rightBottomRound ? radius : 0
radiusY: rightBottomRound ? radius : 0
}
PathLine {
x: leftBottomRound ? radius : 0
y: root.height
}
PathArc {
x: 0
y: leftBottomRound ? root.height - radius : root.height
radiusX: leftBottomRound ? radius : 0
radiusY: leftBottomRound ? radius : 0
}
PathLine {
x: 0
y: leftTopRound ? radius : 0
}
PathArc {
x: leftTopRound ? radius : 0
y: 0
radiusX: leftTopRound ? radius : 0
radiusY: leftTopRound ? radius : 0
}
}
}

23
src/TaoQuick/TaoQuick.qrc
View File

@ -1,13 +1,15 @@
<RCC>
<RCC>
<qresource prefix="/TaoQuick">
<file>qmldir</file>
<file>Qml/CusConfig.qml</file>
<file>Qml/Basic/BasicText.qml</file>
<file>Qml/Basic/BasicTooltip.qml</file>
<file>Qml/Basic/CusCallLater.qml</file>
<file>Qml/Basic/MoveArea.qml</file>
<file>Qml/Basic/RoundRectangle.qml</file>
<file>Qml/Basic/RoundRectangleShape.qml</file>
<file>Qml/Basic/TransArea.qml</file>
<file>Qml/CusBackground/CusBackground.qml</file>
<file>Qml/CusButton/CusButton.qml</file>
<file>Qml/CusButton/CusButton_Blue.qml</file>
<file>Qml/CusButton/CusButton_Gradient.qml</file>
<file>Qml/CusButton/CusButton_Image.qml</file>
@ -15,32 +17,33 @@
<file>Qml/CusButton/CusButton_ImageColorOverlay.qml</file>
<file>Qml/CusButton/CusButton_Red.qml</file>
<file>Qml/CusButton/CusButton_White.qml</file>
<file>Qml/CusButton/CusButton.qml</file>
<file>Qml/CusButton/CusRadioButton.qml</file>
<file>Qml/CusButton/CusTextButton.qml</file>
<file>Qml/CusCheckBox/CusCheckBox.qml</file>
<file>Qml/CusCheckBox/CusSwitch.qml</file>
<file>Qml/CusComboBox/CusComboBox.qml</file>
<file>Qml/CusImage/CusImage_Tip.qml</file>
<file>Qml/CusImage/CusImage.qml</file>
<file>Qml/CusImage/CusImageOverlay.qml</file>
<file>Qml/CusImage/CusImage_Tip.qml</file>
<file>Qml/CusInput/CusIPAddress.qml</file>
<file>Qml/CusInput/CusTextField.qml</file>
<file>Qml/CusInput/CusTextField_Btn.qml</file>
<file>Qml/CusInput/CusTextField_Search.qml</file>
<file>Qml/CusInput/CusTextField_Valid.qml</file>
<file>Qml/CusInput/CusTextField.qml</file>
<file>Qml/CusInput/CusTextInput.qml</file>
<file>Qml/CusLabel/CusLabel.qml</file>
<file>Qml/CusLabel/CusLabel_Center.qml</file>
<file>Qml/CusLabel/CusLabel_Left.qml</file>
<file>Qml/CusLabel/CusLabel.qml</file>
<file>Qml/CusListView/CusListView.qml</file>
<file>Qml/CusPopup/CusPopup.qml</file>
<file>Qml/CusPopup/CusToolTip_Triangle.qml</file>
<file>Qml/CusPopup/CusTriangleTipBorder.qml</file>
<file>Qml/CusScroll/CusScrollBar.qml</file>
<file>Qml/CusSlider/CusSlider.qml</file>
<file>Qml/CusSlider/CusSlider_Spin.qml</file>
<file>Qml/CusSpinBox/CusSpinBox.qml</file>
<file>Qml/CusSlider/CusSlider.qml</file>
<file>Qml/CusSpinBox/CusSpinBox_HourMinute.qml</file>
<file>Qml/CusSpinBox/CusSpinBox.qml</file>
<file>Qml/CusTable/CusTableConstant.qml</file>
<file>Qml/CusTable/CusTableHeader.qml</file>
<file>Qml/CusTable/CusTableRow.qml</file>
@ -103,12 +106,12 @@
<file>Images/particle.png</file>
<file>Images/right.png</file>
<file>Images/rotate.png</file>
<file>Images/Search.png</file>
<file>Images/Search_Clear.png</file>
<file>Images/Search.png</file>
<file>Images/spinner.png</file>
<file>Images/Table_Asc.png</file>
<file>Images/Table_Asc_Hovered.png</file>
<file>Images/Table_Desc.png</file>
<file>Images/Table_Asc.png</file>
<file>Images/Table_Desc_Hovered.png</file>
<file>Images/Table_Desc.png</file>
</qresource>
</RCC>

17
src/TaoQuick/qmldir
View File

@ -1,10 +1,12 @@
module TaoQuick
module TaoQuick
BasicText 1.0 Qml/Basic/BasicText.qml
BasicTooltip 1.0 Qml/Basic/BasicTooltip.qml
CusCallLater 1.0 Qml/Basic/CusCallLater.qml
MoveArea 1.0 Qml/Basic/MoveArea.qml
RoundRectangle 1.0 Qml/Basic/RoundRectangle.qml
RoundRectangleShape 1.0 Qml/Basic/RoundRectangleShape.qml
TransArea 1.0 Qml/Basic/TransArea.qml
CusBackground 1.0 Qml/CusBackground/CusBackground.qml
CusButton 1.0 Qml/CusButton/CusButton.qml
CusButton_Blue 1.0 Qml/CusButton/CusButton_Blue.qml
CusButton_Gradient 1.0 Qml/CusButton/CusButton_Gradient.qml
CusButton_Image 1.0 Qml/CusButton/CusButton_Image.qml
@ -12,32 +14,33 @@ CusButton_ImageBackground 1.0 Qml/CusButton/CusButton_ImageBackground.qml
CusButton_ImageColorOverlay 1.0 Qml/CusButton/CusButton_ImageColorOverlay.qml
CusButton_Red 1.0 Qml/CusButton/CusButton_Red.qml
CusButton_White 1.0 Qml/CusButton/CusButton_White.qml
CusButton 1.0 Qml/CusButton/CusButton.qml
CusRadioButton 1.0 Qml/CusButton/CusRadioButton.qml
CusTextButton 1.0 Qml/CusButton/CusTextButton.qml
CusCheckBox 1.0 Qml/CusCheckBox/CusCheckBox.qml
CusSwitch 1.0 Qml/CusCheckBox/CusSwitch.qml
CusComboBox 1.0 Qml/CusComboBox/CusComboBox.qml
CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
CusImage 1.0 Qml/CusImage/CusImage.qml
CusImageOverlay 1.0 Qml/CusImage/CusImageOverlay.qml
CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
CusIPAddress 1.0 Qml/CusInput/CusIPAddress.qml
CusTextField 1.0 Qml/CusInput/CusTextField.qml
CusTextField_Btn 1.0 Qml/CusInput/CusTextField_Btn.qml
CusTextField_Search 1.0 Qml/CusInput/CusTextField_Search.qml
CusTextField_Valid 1.0 Qml/CusInput/CusTextField_Valid.qml
CusTextField 1.0 Qml/CusInput/CusTextField.qml
CusTextInput 1.0 Qml/CusInput/CusTextInput.qml
CusLabel 1.0 Qml/CusLabel/CusLabel.qml
CusLabel_Center 1.0 Qml/CusLabel/CusLabel_Center.qml
CusLabel_Left 1.0 Qml/CusLabel/CusLabel_Left.qml
CusLabel 1.0 Qml/CusLabel/CusLabel.qml
CusListView 1.0 Qml/CusListView/CusListView.qml
CusPopup 1.0 Qml/CusPopup/CusPopup.qml
CusToolTip_Triangle 1.0 Qml/CusPopup/CusToolTip_Triangle.qml
CusTriangleTipBorder 1.0 Qml/CusPopup/CusTriangleTipBorder.qml
CusScrollBar 1.0 Qml/CusScroll/CusScrollBar.qml
CusSlider 1.0 Qml/CusSlider/CusSlider.qml
CusSlider_Spin 1.0 Qml/CusSlider/CusSlider_Spin.qml
CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
CusSlider 1.0 Qml/CusSlider/CusSlider.qml
CusSpinBox_HourMinute 1.0 Qml/CusSpinBox/CusSpinBox_HourMinute.qml
CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
singleton CusTableConstant 1.0 Qml/CusTable/CusTableConstant.qml
CusTableHeader 1.0 Qml/CusTable/CusTableHeader.qml
CusTableRow 1.0 Qml/CusTable/CusTableRow.qml