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 { add

    Image {
    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:



  • @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!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.