1
0
mirror of https://github.com/jaredtao/TaoQuick.git synced 2025-01-31 21:22:58 +08:00

add: draw cubic bezier

This commit is contained in:
MachaelKong 2022-03-31 22:18:31 +08:00
parent b51eb90d32
commit 7772114772
4 changed files with 121 additions and 3 deletions

View File

@ -57,8 +57,9 @@
<file>Contents/ShapeGallery/ShapeCircle.qml</file>
<file>Contents/ShapeGallery/ShapeEllipse.qml</file>
<file>Contents/ShapeGallery/ShapeTriangle.qml</file>
<file>Contents/ShapeGallery/ShapeBezier.qml</file>
<file>Contents/ShapeGallery/ShapeQuadraticBezier.qml</file>
<file>Contents/ShapeGallery/ShapeCapStyles.qml</file>
<file>Contents/ShapeGallery/ShapeJoinStyles.qml</file>
<file>Contents/ShapeGallery/ShapeCubicBezier.qml</file>
</qresource>
</RCC>

View File

@ -28,8 +28,12 @@ Rectangle {
shapeUrl: "../ShapeGallery/ShapeEllipse.qml"
}
ListElement {
name: "Bezier"
shapeUrl: "../ShapeGallery/ShapeBezier.qml"
name: "Quadratic Bezier"
shapeUrl: "../ShapeGallery/ShapeQuadraticBezier.qml"
}
ListElement {
name: "Cubic Bezier"
shapeUrl: "../ShapeGallery/ShapeCubicBezier.qml"
}
ListElement {
name: "Join Styles"

View File

@ -0,0 +1,113 @@
import QtQuick 2.12
import QtQuick.Shapes 1.12
Rectangle {
color: "lightGray"
Item {
width: 200
height: 100
anchors.centerIn: parent
Shape {
id: shapeRoot
anchors.fill: parent
ShapePath {
strokeWidth: 4
strokeColor: "black"
startX: 30
startY: 60
// Defines a cubic Bezier curve with two control points.
PathCubic {
x: 170; y: 60
control1X: circleA.x; control1Y: circleA.y
control2X: circleB.x; control2Y: circleB.y
}
}
Rectangle {
id: circleA
color: "blue"
width: 10
height: 10
radius:5
SequentialAnimation {
loops: Animation.Infinite
running: true
NumberAnimation {
target: circleA
property: "x"
from: 0
to: shapeRoot.width
duration: 5000
}
NumberAnimation {
target: circleA
property: "x"
from: shapeRoot.width
to: 0
duration: 5000
}
NumberAnimation {
target: circleA
property: "y"
from: 0
to: shapeRoot.height
duration: 5000
}
NumberAnimation {
target: circleA
property: "y"
from: shapeRoot.height
to: 0
duration: 5000
}
}
}
Rectangle {
id: circleB
color: "blue"
width: 10
height: 10
radius:5
x: shapeRoot.width - width
SequentialAnimation {
loops: Animation.Infinite
running: true
NumberAnimation {
target: circleB
property: "y"
from: 0
to: shapeRoot.height
duration: 5000
}
NumberAnimation {
target: circleB
property: "y"
from: shapeRoot.height
to: 0
duration: 5000
}
NumberAnimation {
target: circleB
property: "x"
from: shapeRoot.width
to: 0
duration: 5000
}
NumberAnimation {
target: circleB
property: "x"
from: 0
to: shapeRoot.width
duration: 5000
}
}
}
}
}
}