Warning, /maui/mauikit/src/controls.6/Doodle.qml is written in an unsupported language. File is not indexed.
0001 import QtQuick
0002 import QtQuick.Controls
0003 import QtQuick.Layouts
0004
0005 import org.mauikit.controls 1.3 as Maui
0006
0007 /**
0008 @since org.mauikit.controls.labs 1.0
0009
0010 @brief A drawing component wrapped in a popup surface.
0011 This controls inherits from MauiKit PopupPage, to checkout its inherited properties refer to the docs.
0012 @see PopupPage
0013
0014 @image html Misc/doodle.png
0015
0016 @warning This control is incomplete and will be moved out its own plugin named MauiKit::Painting
0017
0018 @code
0019 Maui.Page
0020 {
0021 id: _page
0022
0023 anchors.fill: parent
0024 Maui.Controls.showCSD: true
0025 Maui.Theme.colorSet: Maui.Theme.Window
0026 headBar.forceCenterMiddleContent: true
0027
0028 Button
0029 {
0030 anchors.centerIn: parent
0031 text: "Doodle Me!"
0032 onClicked: _doodle.open()
0033 }
0034 }
0035
0036 Maui.Doodle
0037 {
0038 id: _doodle
0039 sourceItem: _page
0040 }
0041 @endcode
0042
0043 <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>
0044 */
0045 Maui.PopupPage
0046 {
0047 id: control
0048
0049 Maui.Theme.backgroundColor: Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.85)
0050 Maui.Theme.textColor:"#fefefe"
0051 // deafultButtons: false
0052
0053 maxHeight: img.height + Maui.Style.toolBarHeight + Maui.Style.space.medium
0054 maxWidth: img.width
0055
0056 /**
0057 * @brief A source item can be captured to start doodling over it and to be saved later as an image.
0058 */
0059 property Item sourceItem : null
0060
0061 /**
0062 * @brief The background color of the canvas.
0063 */
0064 readonly property color bgColor : "#333"
0065
0066 /**
0067 * @brief An image source to be used as the background to doodle over it.
0068 */
0069 property alias source : img.source
0070
0071 /**
0072 * @brief The size of the brush.
0073 * @property double Doodle::brushSize
0074 */
0075 property alias brushSize : _canvas.brushSize
0076
0077 /**
0078 * @brief The opacity of the brush.
0079 * @property double Doodle::brushOpacity
0080 */
0081 property alias brushOpacity : _canvas.brushOpacity
0082
0083 /**
0084 * @brief The shape of the brush.
0085 * Possibel values are:
0086 * - 0 for circular
0087 * - 1 for rectangular
0088 * @property int Doodle::brushShape
0089 */
0090 property alias brushShape : _canvas.brushShape //0 -Circular, 1 - rectangular.
0091
0092 /**
0093 * @brief The maximum size of the brush.
0094 * @property double Doodle::maxBrushSize
0095 */
0096 property alias maxBrushSize: _canvas.maxBrushSize
0097
0098 /**
0099 * @brief The color of the paint to use with the brush.
0100 * @property color Doodle::paintColor
0101 */
0102 property alias paintColor: _canvas.paintColor
0103
0104 onOpened:
0105 {
0106 if(control.visible)
0107 {
0108 if(control.sourceItem)
0109 {
0110 control.sourceItem.grabToImage(function(result) {
0111 img.source = result.url;
0112 })
0113 }
0114 }else
0115 {
0116 _canvas.buffer.clear()
0117 }
0118 }
0119
0120 onSourceItemChanged:
0121 {
0122 if(control.visible && control.opened)
0123 {
0124 if(control.sourceItem)
0125 {
0126 control.sourceItem.grabToImage(function(result) { img.source = result.url })
0127 }
0128 }
0129 }
0130
0131 footBar.visible: true
0132
0133 footBar.rightContent: ToolButton
0134 {
0135 icon.name: "document-share"
0136 onClicked: {}
0137 }
0138
0139 footBar.leftContent: Maui.ToolActions
0140 {
0141 expanded: true
0142 autoExclusive: true
0143 checkable: false
0144
0145 Action
0146 {
0147 icon.name: "edit-undo"
0148 }
0149
0150 Action
0151 {
0152 icon.name: "edit-redo"
0153 }
0154 }
0155
0156 footBar.middleContent:[
0157
0158 Maui.ToolActions
0159 {
0160 autoExclusive: true
0161 expanded: true
0162 display: ToolButton.TextBesideIcon
0163
0164 Action
0165 {
0166 icon.name: "draw-highlight"
0167 text: i18nd("mauikit", "Highlighter")
0168 onTriggered:
0169 {
0170 control.paintColor = "yellow"
0171 control.brushShape = 1
0172 }
0173 }
0174
0175 Action
0176 {
0177 icon.name: "draw-brush"
0178 text: i18nd("mauikit", "Marker")
0179 onTriggered:
0180 {
0181 control.paintColor = "blue"
0182 control.brushShape = 0
0183 }
0184 }
0185
0186 Action
0187 {
0188 icon.name: "draw-calligraphic"
0189 text: i18nd("mauikit", "Highlighter")
0190 onTriggered:
0191 {
0192 control.paintColor = "#333"
0193 control.brushShape = 1
0194 }
0195 }
0196
0197 Action
0198 {
0199 id: _eraserButton
0200 text: i18nd("mauikit", "Eraser")
0201
0202 icon.name: "draw-eraser"
0203 }
0204 },
0205
0206 Maui.ToolActions
0207 {
0208 expanded: true
0209 autoExclusive: false
0210 display: ToolButton.TextBesideIcon
0211
0212 Action
0213 {
0214 id: _colorsButton
0215 text: i18nd("mauikit", "Color")
0216 icon.name: "color-fill"
0217 }
0218
0219 Action
0220 {
0221 id: _opacityButton
0222 text: i18nd("mauikit", "Opacity")
0223
0224 icon.name: "edit-opacity"
0225 }
0226
0227 Action
0228 {
0229 id: _sizeButton
0230 text: i18nd("mauikit", "Size")
0231
0232 }
0233 }
0234
0235 ]
0236
0237 page.footerColumn: [
0238 Maui.ToolBar
0239 {
0240 id: _sizeBar
0241 visible: _sizeButton.checked
0242 width: parent.width
0243 position: ToolBar.Footer
0244 leftContent: Label
0245 {
0246 text: i18nd("mauikit", "Size")
0247 color: Maui.Theme.textColor
0248 }
0249
0250 rightContent: Label
0251 {
0252 text: _sizeSlider.value
0253 color: Maui.Theme.textColor
0254 }
0255
0256 middleContent: Slider
0257 {
0258 id: _sizeSlider
0259 Layout.fillWidth: true
0260 value: 20
0261 from : 10
0262 to : 100
0263 stepSize: 10
0264 }
0265 },
0266
0267 Maui.ToolBar
0268 {
0269 id: _opacityBar
0270 visible: _opacityButton.checked
0271 width: parent.width
0272 position: ToolBar.Footer
0273
0274 leftContent: Label
0275 {
0276 text: i18nd("mauikit", "Opacity")
0277 color: Maui.Theme.textColor
0278 }
0279
0280 middleContent: Slider
0281 {
0282 id: _opacitySlider
0283 Layout.fillWidth: true
0284 value: 1
0285 from: 0
0286 to: 1
0287 }
0288
0289 rightContent: Label
0290 {
0291 text: _opacitySlider.value
0292 color: Maui.Theme.textColor
0293 }
0294 },
0295
0296 Maui.ToolBar
0297 {
0298 id: _colorsBar
0299 visible: _colorsButton.checked
0300 width: parent.width
0301 position: ToolBar.Footer
0302 middleContent: Maui.ColorsRow
0303 {
0304 onColorPicked:
0305 {
0306 currentColor = color
0307 control.paintColor = currentColor
0308 }
0309
0310 colors: ["yellow", "pink", "orange", "blue", "magenta", "black", "grey", "cian",
0311 "#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177" ,"#0d5ac1" ,
0312 "#f205e6" ,"#1c0365" ,"#14a9ad" ,"#4ca2f9" ,"#a4e43f" ,"#d298e2" ,"#6119d0",
0313 "#d2737d" ,"#c0a43c" ,"#f2510e" ,"#651be6" ,"#79806e" ,"#61da5e" ,"#cd2f00" ,
0314 "#9348af" ,"#01ac53" ,"#c5a4fb" ,"#996635","#b11573" ,"#4bb473" ,"#75d89e" ,
0315 "#2f3f94" ,"#2f7b99" ,"#da967d" ,"#34891f" ,"#b0d87b" ,"#ca4751" ,"#7e50a8" ,
0316 "#c4d647" ,"#e0eeb8" ,"#11dec1" ,"#289812" ,"#566ca0" ,"#ffdbe1" ,"#2f1179" ,
0317 "#935b6d" ,"#916988" ,"#513d98" ,"#aead3a", "#9e6d71", "#4b5bdc", "#0cd36d",
0318 "#250662", "#cb5bea", "#228916", "#ac3e1b", "#df514a", "#539397", "#880977",
0319 "#f697c1", "#ba96ce", "#679c9d", "#c6c42c", "#5d2c52", "#48b41b", "#e1cf3b",
0320 "#5be4f0", "#57c4d8", "#a4d17a", "#225b8", "#be608b", "#96b00c", "#088baf",
0321 "#f158bf", "#e145ba", "#ee91e3", "#05d371", "#5426e0", "#4834d0", "#802234",
0322 "#6749e8", "#0971f0", "#8fb413", "#b2b4f0", "#c3c89d", "#c9a941", "#41d158",
0323 "#409188", "#911e20", "#1350ce", "#10e5b1", "#fff4d7", "#cb2582", "#ce00be",
0324 "#32d5d6", "#17232", "#608572", "#c79bc2", "#00f87c", "#77772a", "#6995ba",
0325 "#fc6b57", "#f07815", "#8fd883", "#060e27", "#96e591", "#21d52e", "#d00043",
0326 "#b47162", "#1ec227", "#4f0f6f", "#1d1d58", "#947002", "#bde052", "#e08c56",
0327 "#28fcfd", "#bb09b", "#36486a", "#d02e29", "#1ae6db", "#3e464c", "#a84a8f",
0328 "#911e7e", "#3f16d9", "#0f525f", "#ac7c0a", "#b4c086", "#c9d730", "#30cc49",
0329 "#3d6751", "#fb4c03", "#640fc1", "#62c03e", "#d3493a", "#88aa0b", "#406df9",
0330 "#615af0", "#4be47", "#2a3434", "#4a543f", "#79bca0", "#a8b8d4", "#00efd4",
0331 "#7ad236", "#7260d8", "#1deaa7", "#06f43a", "#823c59", "#e3d94c", "#dc1c06",
0332 "#f53b2a", "#b46238", "#2dfff6", "#a82b89", "#1a8011", "#436a9f", "#1a806a",
0333 "#4cf09d", "#c188a2", "#67eb4b", "#b308d3", "#fc7e41", "#af3101", "#ff065",
0334 "#71b1f4", "#a2f8a5", "#e23dd0", "#d3486d", "#00f7f9", "#474893", "#3cec35",
0335 "#1c65cb", "#5d1d0c", "#2d7d2a", "#ff3420", "#5cdd87", "#a259a4", "#e4ac44",
0336 "#1bede6", "#8798a4", "#d7790f", "#b2c24f", "#de73c2", "#d70a9c", "#25b67",
0337 "#88e9b8", "#c2b0e2", "#86e98f", "#ae90e2", "#1a806b", "#436a9e", "#0ec0ff",
0338 "#f812b3", "#b17fc9", "#8d6c2f", "#d3277a", "#2ca1ae", "#9685eb", "#8a96c6",
0339 "#dba2e6", "#76fc1b", "#608fa4", "#20f6ba", "#07d7f6", "#dce77a", "#77ecca"]
0340
0341 }
0342 }
0343 ]
0344
0345 headBar.visible: false
0346 ScrollView
0347 {
0348 Layout.fillHeight: true
0349 Layout.fillWidth: true
0350
0351 contentHeight: img.height
0352 contentWidth: img.width
0353
0354 Image
0355 {
0356
0357 id: img
0358 height: sourceSize.height
0359 width: sourceSize.width
0360 fillMode: Image.PreserveAspectFit
0361 autoTransform: true
0362 asynchronous: true
0363 anchors.centerIn: parent
0364
0365
0366 // Label
0367 // {
0368 // color: "yellow"
0369 // text: parent.height + "-" + parent.width + " / " + control.height + "-" + control.width + " / " + buffer.width + "-"+ buffer.height
0370 // }
0371
0372
0373 }
0374
0375 Maui.DoodleCanvas
0376 {
0377 id: _canvas
0378 anchors.fill: parent
0379 brushSize : _sizeSlider.value
0380 brushOpacity :_opacitySlider.value
0381 }
0382 }
0383 }