Unsolved How to put a plus sign in the background of an app
-
Hi all,
At the first steps of reading about Qt Quick, I did this example. And this time I want to manipulate it a little.
I want to put a big plus sign (+) on the background of the app, so that the bubble can stand on the middle of it when it's also in the middle of the page.I thought about it and did some tasks to get what I want. But when I run the app by Desktop kit, no sign of the plus mark (a row and a column) is shown.
Would you please tell me the correct way of adding that "+" sign and have it work as needed?
Thanks.
-
inside
MainForm {
addImage { source: "PlusSign.svg" anchor.horizontalCenter = mainWindow.horizontalCenter anchor.verticalCenter = mainWindow.verticalCenter width = mainWindow.width / 5 height = width }
-
so firstly I need an XML file to define that sign, not?
For example it's of the bubble (BTW, I made it a little bigger —r from 42 to 62):
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <defs> <radialGradient id="grad1" cx="0.5" cy="0.7" r="0.7" fx="0.5" fy="0.4"> <stop offset="0" style="stop-color:rgb(255,255,255)" /> <stop offset="1.5" style="stop-color:rgb(0,102,153)" /> </radialGradient> </defs> <circle cx="100" cy="80" r="62" fill="url(#grad1)"/> </svg>
-
Do I need to create an XML file, say, named "PlusSign.svg" please?
And is yes, how to do it so that it yields that Plus Sign for my app? -
You don't need any XML. You can create a plus symbol either by drawing it yourself with QML or embedding a image of a plus symbol.
For now, it's probably easier, if you go for the image approach, as it's slightly easier to accomplish.
You basically need to to do the following:
- get a image of a plus symbol
- add that image to your resources file. (see the section "Adding Resources" here http://doc.qt.io/qtcreator/qtcreator-accelbubble-example.html)
- Now you can use the code snippet that @VRonin provided you. (you may need to adapt the
source
name )
-
@Schluchti said in How to put a plus sign in the background of an app:
You don't need any XML
Technically SVG is XML, the code posted above by @tomy , for example, is a circle with a 3D effect
-
@VRonin Should have taken a better look at it. Looked a bit like a XML layout at first glance. Sorry!