MauiKit Controls

Doodle.qml
1import QtQuick
2import QtQuick.Controls
3import QtQuick.Layouts
4
5import org.mauikit.controls 1.3 as Maui
6
7/**
8 @since org.mauikit.controls.labs 1.0
9
10 @brief A drawing component wrapped in a popup surface.
11 This controls inherits from MauiKit PopupPage, to checkout its inherited properties refer to the docs.
12 @see PopupPage
13
14 @image html Misc/doodle.png
15
16 @warning This control is incomplete and will be moved out its own plugin named MauiKit::Painting
17
18 @code
19 Maui.Page
20 {
21 id: _page
22
23 anchors.fill: parent
24 Maui.Controls.showCSD: true
25 Maui.Theme.colorSet: Maui.Theme.Window
26 headBar.forceCenterMiddleContent: true
27
28 Button
29 {
30 anchors.centerIn: parent
31 text: "Doodle Me!"
32 onClicked: _doodle.open()
33 }
34 }
35
36 Maui.Doodle
37 {
38 id: _doodle
39 sourceItem: _page
40 }
41 @endcode
42
43 <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/Doodle.qml">You can find a more complete example at this link.</a>
44 */
45Maui.PopupPage
46{
47 id: control
48
49 Maui.Theme.backgroundColor: Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.85)
50 Maui.Theme.textColor:"#fefefe"
51 // deafultButtons: false
52
53 maxHeight: img.height + Maui.Style.toolBarHeight + Maui.Style.space.medium
54 maxWidth: img.width
55
56 /**
57 * @brief A source item can be captured to start doodling over it and to be saved later as an image.
58 */
59 property Item sourceItem : null
60
61 /**
62 * @brief The background color of the canvas.
63 */
64 readonly property color bgColor : "#333"
65
66 /**
67 * @brief An image source to be used as the background to doodle over it.
68 */
69 property alias source : img.source
70
71 /**
72 * @brief The size of the brush.
73 * @property double Doodle::brushSize
74 */
75 property alias brushSize : _canvas.brushSize
76
77 /**
78 * @brief The opacity of the brush.
79 * @property double Doodle::brushOpacity
80 */
81 property alias brushOpacity : _canvas.brushOpacity
82
83 /**
84 * @brief The shape of the brush.
85 * Possibel values are:
86 * - 0 for circular
87 * - 1 for rectangular
88 * @property int Doodle::brushShape
89 */
90 property alias brushShape : _canvas.brushShape //0 -Circular, 1 - rectangular.
91
92 /**
93 * @brief The maximum size of the brush.
94 * @property double Doodle::maxBrushSize
95 */
96 property alias maxBrushSize: _canvas.maxBrushSize
97
98 /**
99 * @brief The color of the paint to use with the brush.
100 * @property color Doodle::paintColor
101 */
102 property alias paintColor: _canvas.paintColor
103
104 onOpened:
105 {
106 if(control.visible)
107 {
108 if(control.sourceItem)
109 {
110 control.sourceItem.grabToImage(function(result) {
111 img.source = result.url;
112 })
113 }
114 }else
115 {
116 _canvas.buffer.clear()
117 }
118 }
119
120 onSourceItemChanged:
121 {
122 if(control.visible && control.opened)
123 {
124 if(control.sourceItem)
125 {
126 control.sourceItem.grabToImage(function(result) { img.source = result.url })
127 }
128 }
129 }
130
131 footBar.visible: true
132
133 footBar.rightContent: ToolButton
134 {
135 icon.name: "document-share"
136 onClicked: {}
137 }
138
139 footBar.leftContent: Maui.ToolActions
140 {
141 expanded: true
142 autoExclusive: true
143 checkable: false
144
145 Action
146 {
147 icon.name: "edit-undo"
148 }
149
150 Action
151 {
152 icon.name: "edit-redo"
153 }
154 }
155
156 footBar.middleContent:[
157
158 Maui.ToolActions
159 {
160 autoExclusive: true
161 expanded: true
162 display: ToolButton.TextBesideIcon
163
164 Action
165 {
166 icon.name: "draw-highlight"
167 text: i18nd("mauikit", "Highlighter")
168 onTriggered:
169 {
170 control.paintColor = "yellow"
171 control.brushShape = 1
172 }
173 }
174
175 Action
176 {
177 icon.name: "draw-brush"
178 text: i18nd("mauikit", "Marker")
179 onTriggered:
180 {
181 control.paintColor = "blue"
182 control.brushShape = 0
183 }
184 }
185
186 Action
187 {
188 icon.name: "draw-calligraphic"
189 text: i18nd("mauikit", "Highlighter")
190 onTriggered:
191 {
192 control.paintColor = "#333"
193 control.brushShape = 1
194 }
195 }
196
197 Action
198 {
199 id: _eraserButton
200 text: i18nd("mauikit", "Eraser")
201
202 icon.name: "draw-eraser"
203 }
204 },
205
206 Maui.ToolActions
207 {
208 expanded: true
209 autoExclusive: false
210 display: ToolButton.TextBesideIcon
211
212 Action
213 {
214 id: _colorsButton
215 text: i18nd("mauikit", "Color")
216 icon.name: "color-fill"
217 }
218
219 Action
220 {
221 id: _opacityButton
222 text: i18nd("mauikit", "Opacity")
223
224 icon.name: "edit-opacity"
225 }
226
227 Action
228 {
229 id: _sizeButton
230 text: i18nd("mauikit", "Size")
231
232 }
233 }
234
235 ]
236
237 page.footerColumn: [
238 Maui.ToolBar
239 {
240 id: _sizeBar
241 visible: _sizeButton.checked
242 width: parent.width
243 position: ToolBar.Footer
244 leftContent: Label
245 {
246 text: i18nd("mauikit", "Size")
247 color: Maui.Theme.textColor
248 }
249
250 rightContent: Label
251 {
252 text: _sizeSlider.value
253 color: Maui.Theme.textColor
254 }
255
256 middleContent: Slider
257 {
258 id: _sizeSlider
259 Layout.fillWidth: true
260 value: 20
261 from : 10
262 to : 100
263 stepSize: 10
264 }
265 },
266
267 Maui.ToolBar
268 {
269 id: _opacityBar
270 visible: _opacityButton.checked
271 width: parent.width
272 position: ToolBar.Footer
273
274 leftContent: Label
275 {
276 text: i18nd("mauikit", "Opacity")
277 color: Maui.Theme.textColor
278 }
279
280 middleContent: Slider
281 {
282 id: _opacitySlider
283 Layout.fillWidth: true
284 value: 1
285 from: 0
286 to: 1
287 }
288
289 rightContent: Label
290 {
291 text: _opacitySlider.value
292 color: Maui.Theme.textColor
293 }
294 },
295
296 Maui.ToolBar
297 {
298 id: _colorsBar
299 visible: _colorsButton.checked
300 width: parent.width
301 position: ToolBar.Footer
302 middleContent: Maui.ColorsRow
303 {
304 onColorPicked:
305 {
306 currentColor = color
307 control.paintColor = currentColor
308 }
309
310 colors: ["yellow", "pink", "orange", "blue", "magenta", "black", "grey", "cian",
311 "#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177" ,"#0d5ac1" ,
312 "#f205e6" ,"#1c0365" ,"#14a9ad" ,"#4ca2f9" ,"#a4e43f" ,"#d298e2" ,"#6119d0",
313 "#d2737d" ,"#c0a43c" ,"#f2510e" ,"#651be6" ,"#79806e" ,"#61da5e" ,"#cd2f00" ,
314 "#9348af" ,"#01ac53" ,"#c5a4fb" ,"#996635","#b11573" ,"#4bb473" ,"#75d89e" ,
315 "#2f3f94" ,"#2f7b99" ,"#da967d" ,"#34891f" ,"#b0d87b" ,"#ca4751" ,"#7e50a8" ,
316 "#c4d647" ,"#e0eeb8" ,"#11dec1" ,"#289812" ,"#566ca0" ,"#ffdbe1" ,"#2f1179" ,
317 "#935b6d" ,"#916988" ,"#513d98" ,"#aead3a", "#9e6d71", "#4b5bdc", "#0cd36d",
318 "#250662", "#cb5bea", "#228916", "#ac3e1b", "#df514a", "#539397", "#880977",
319 "#f697c1", "#ba96ce", "#679c9d", "#c6c42c", "#5d2c52", "#48b41b", "#e1cf3b",
320 "#5be4f0", "#57c4d8", "#a4d17a", "#225b8", "#be608b", "#96b00c", "#088baf",
321 "#f158bf", "#e145ba", "#ee91e3", "#05d371", "#5426e0", "#4834d0", "#802234",
322 "#6749e8", "#0971f0", "#8fb413", "#b2b4f0", "#c3c89d", "#c9a941", "#41d158",
323 "#409188", "#911e20", "#1350ce", "#10e5b1", "#fff4d7", "#cb2582", "#ce00be",
324 "#32d5d6", "#17232", "#608572", "#c79bc2", "#00f87c", "#77772a", "#6995ba",
325 "#fc6b57", "#f07815", "#8fd883", "#060e27", "#96e591", "#21d52e", "#d00043",
326 "#b47162", "#1ec227", "#4f0f6f", "#1d1d58", "#947002", "#bde052", "#e08c56",
327 "#28fcfd", "#bb09b", "#36486a", "#d02e29", "#1ae6db", "#3e464c", "#a84a8f",
328 "#911e7e", "#3f16d9", "#0f525f", "#ac7c0a", "#b4c086", "#c9d730", "#30cc49",
329 "#3d6751", "#fb4c03", "#640fc1", "#62c03e", "#d3493a", "#88aa0b", "#406df9",
330 "#615af0", "#4be47", "#2a3434", "#4a543f", "#79bca0", "#a8b8d4", "#00efd4",
331 "#7ad236", "#7260d8", "#1deaa7", "#06f43a", "#823c59", "#e3d94c", "#dc1c06",
332 "#f53b2a", "#b46238", "#2dfff6", "#a82b89", "#1a8011", "#436a9f", "#1a806a",
333 "#4cf09d", "#c188a2", "#67eb4b", "#b308d3", "#fc7e41", "#af3101", "#ff065",
334 "#71b1f4", "#a2f8a5", "#e23dd0", "#d3486d", "#00f7f9", "#474893", "#3cec35",
335 "#1c65cb", "#5d1d0c", "#2d7d2a", "#ff3420", "#5cdd87", "#a259a4", "#e4ac44",
336 "#1bede6", "#8798a4", "#d7790f", "#b2c24f", "#de73c2", "#d70a9c", "#25b67",
337 "#88e9b8", "#c2b0e2", "#86e98f", "#ae90e2", "#1a806b", "#436a9e", "#0ec0ff",
338 "#f812b3", "#b17fc9", "#8d6c2f", "#d3277a", "#2ca1ae", "#9685eb", "#8a96c6",
339 "#dba2e6", "#76fc1b", "#608fa4", "#20f6ba", "#07d7f6", "#dce77a", "#77ecca"]
340
341 }
342 }
343 ]
344
345 headBar.visible: false
346 ScrollView
347 {
348 Layout.fillHeight: true
349 Layout.fillWidth: true
350
351 contentHeight: img.height
352 contentWidth: img.width
353
354 Image
355 {
356
357 id: img
358 height: sourceSize.height
359 width: sourceSize.width
360 fillMode: Image.PreserveAspectFit
361 autoTransform: true
362 asynchronous: true
363 anchors.centerIn: parent
364
365
366 // Label
367 // {
368 // color: "yellow"
369 // text: parent.height + "-" + parent.width + " / " + control.height + "-" + control.width + " / " + buffer.width + "-"+ buffer.height
370 // }
371
372
373 }
374
375 Maui.DoodleCanvas
376 {
377 id: _canvas
378 anchors.fill: parent
379 brushSize : _sizeSlider.value
380 brushOpacity :_opacitySlider.value
381 }
382 }
383}
Action::visible
bool visible
ToolActions
A set of grouped action visually joined together.
Definition ToolActions.qml:90
ToolBar
An alternative to QQC2 ToolBar, with a custom horizontal layout - divided into three main sections - ...
Definition ToolBar.qml:115
i18nd
QString i18nd(const char *domain, const char *text, const TYPE &arg...)
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri May 17 2024 11:56:16 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.