Forums

OverviewV-Play 1 SupportRectangle with round corners › Reply To: Rectangle with round corners

OverviewV-Play 1 SupportRectangle with round corners › Reply To: Rectangle with round corners
#5974

Alex
V-Play Team

Hi komarios,

there are several ways to achieve this, highly depending on the use case.

The easiest way i can think of is creating an image with round corners and then creating a button using the image as background.

Button.qml

import QtQuick 1.1
import VPlay 1.0

Item {
  id: button

  property alias text: buttonText.text
  property alias textColor: buttonText.color
  property alias textSize: buttonText.font.pixelSize

  signal clicked

  width: 100
  height: 60

  // you could also use a MultiresolutionImage here to improve performance and memory usage on low end devices
  Image {
    source: "img/round_corners.png"
    anchors.fill: parent
  }

  Text {
    id: buttonText
    anchors.centerIn: parent
    font.pixelSize: 14
    color: "#f5b68a"
  }

  MouseArea {
    anchors.fill: parent
    onClicked: button.clicked()
  }
}

Then you can use the button like this:
main.qml

import VPlay 1.0
import QtQuick 1.1

GameWindow {
  activeScene: scene
  width: 960
  height: 640

  Scene {
    id: scene
    width: 480
    height: 320

    Button {
      anchors.centerIn: parent
      text: "click me!"
      onClicked: console.debug("aw yeah, don't stop clicking me")
    }
  }
}

 

What kind of buttons were you thinking of? Like Chrisu, with “random” colors? A possible downside of his solution is that the edges are not transparent (if needed), but have the background color instead.

Cheers,
Alex

 

 

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support