V-Play has a new name, say hi to Felgo!Learn More

Display Images and Photos in Your App

Display an Image using AppImage

This first example fills the whole page with an AppImage. Since the image does not match the page aspect ratio, it will be distorted.

 import Felgo 3.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello Felgo"

       AppImage {
         // The image fills the page completely, this can cause distortion depending on the image size
         anchors.fill: parent
         source: "https://felgo.com/web-assets/girl.jpg"
       }
     }
   }
 }

In the next example, we chose another fillMode to avoid distortion.

 import Felgo 3.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello Felgo"

       AppImage {
         anchors.fill: parent
         // You can try different fillModes
         fillMode: Image.PreserveAspectFit
         //fillMode: Image.PreserveAspectCrop
         //fillMode: Image.Tile
         source: "https://felgo.com/web-assets/girl.jpg"
       }
     }
   }
 }

Display a RoundedImage

Rounded images are very common in apps, this is why Felgo offers the RoundedImage type, that lets you add a radius to an image.

 import Felgo 3.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello Felgo"

       RoundedImage {
         anchors.centerIn: parent
         width: dp(200)
         height: dp(200)
         fillMode: Image.PreserveAspectCrop
         source: "https://felgo.com/web-assets/girl.jpg"
         // Using half the width as radius causes a full circle
         radius: width/2
       }
     }
   }
 }

Display Fullscreen Image Preview

You can also use a basic fullscreen image preview component, the PictureViewer.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   id: app

   NavigationStack {

     Page {
       title: "Hello Felgo"

       AppButton {
         text: "Show Photo"
         onClicked: {
           // Open PictureViewer component
           PictureViewer.show(app, "https://felgo.com/web-assets/girl.jpg")
         }
       }
     }
   }
 }

You can use the NativeUtils::displayImagePicker function to open the native image gallery select dialog.

 import Felgo 3.0
 import QtQuick 2.9

 App {
   id: app

   NavigationStack {

     Page {

       AppImage {
         id: image
         anchors.fill: parent
         // important to automatically rotate the image taken from the camera
         autoTransform: true
         fillMode: Image.PreserveAspectFit
       }

       AppButton {
         anchors.centerIn: parent
         text: "Display CameraPicker"
         onClicked: {
           nativeUtils.displayImagePicker("test")
         }
       }

       Connections {
         target: nativeUtils
         onImagePickerFinished: {
           if(accepted) image.source = path
         }
       }
     }
   }
 }

How do I use a Canvas to draw/paint?

The Canvas item allows to draw straight and curved lines, simple and complex shapes, graphs, and referenced graphic images. It can also add text, colors, shadows, gradients, and patterns, and do low-level pixel operations.

The width and height properties of the Canvas item define the drawing area. If it requires rendering, the paint signal fires. When handling the signal, you can draw to the Canvas using a Context2D object:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   Page {
     Canvas {
       id: mycanvas
       width: 100
       height: 200
       onPaint: {
         var ctx = getContext("2d");
         ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
         ctx.fillRect(0, 0, width, height);
       }
     }
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

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