1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import "../"
import "tiger.js" as Tiger
Item {
id: root
width: 320
height: 480
Column {
spacing: 6
anchors {
fill: parent
topMargin: 12
}
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Tiger with SVG path")
color: Qt.lighter(palette.text)
font {
pointSize: 24
bold: true
}
}
Canvas {
id: canvas
readonly property real alpha: alphaCtrl.value
readonly property real scale: scaleCtrl.value
readonly property real rotate: rotateCtrl.value
width: root.width
height: parent.height - controls.height
antialiasing: true
onAlphaChanged: requestPaint()
onScaleChanged: requestPaint()
onRotateChanged: requestPaint()
onPaint: function() {
let ctx = canvas.getContext('2d')
const originX = canvas.width / 2 + 30
const originY = canvas.height / 2 + 60
ctx.save()
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.globalAlpha = canvas.alpha
ctx.globalCompositeOperation = "source-over"
ctx.translate(originX, originY)
ctx.scale(canvas.scale, canvas.scale)
ctx.rotate(canvas.rotate)
ctx.translate(-originX, -originY)
ctx.strokeStyle = Qt.rgba(.3, .3, .3,1)
ctx.lineWidth = 1
//! [0]
for (let i = 0; i < Tiger.tiger.length; i++) {
if (Tiger.tiger[i].width !== undefined)
ctx.lineWidth = Tiger.tiger[i].width
if (Tiger.tiger[i].path !== undefined)
ctx.path = Tiger.tiger[i].path
if (Tiger.tiger[i].fill !== undefined) {
ctx.fillStyle = Tiger.tiger[i].fill
ctx.fill()
}
if (Tiger.tiger[i].stroke !== undefined) {
ctx.strokeStyle = Tiger.tiger[i].stroke
ctx.stroke()
}
}
//! [0]
ctx.restore()
}
}
}
Column {
id: controls
anchors {
bottom: parent.bottom
bottomMargin: 12
}
LabeledSlider {
id: scaleCtrl
name: qsTr("Scale")
width: root.width
min: 0.1
max: 1
value: 0.3
}
LabeledSlider {
id: rotateCtrl
name: qsTr("Rotate")
width: root.width
min: 0
max: Math.PI * 2
value: 0
}
LabeledSlider {
id: alphaCtrl
name: qsTr("Alpha")
width: root.width
min: 0
max: 1
value: 1
}
}
}
|
