How to round an image downloaded from the Internet in blackberry cascades using qml

Question

I have a listview that displays a list of userdetails on the right and a pic profile on the left that I get from the back. For uploading and uploading an image, I use the webviewsample image class from github and it works fine. Now I need to make the image round. When I searched on the Internet, I understand that nine cuts are used for this, but I don’t know how to do it. Each of my lists has a different background, which changes randomly. Below is a sample image of what I have done and what I really want.

This is my current list view.

Here is how i need

This is the code of my custom list item that displays this view

Container {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }

            Container {
                id:profileSubContainer 
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                layout: DockLayout {

                }  


            WebImageView {
                id: profilePic
                url: profilePicture

                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                scalingMethod: ScalingMethod.AspectFit
                visible: (profilePic.loading == 1.0)

            }


            ImageView {
                id: defaultPic
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                scalingMethod: ScalingMethod.AspectFit
                imageSource:  "asset:///Images/defaultProfile.png"
                visible:!profilePic.visible

            }


            layoutProperties: StackLayoutProperties 
            {
                spaceQuota: 1
            }
        }



            CustomButtonTextArea {
                id: userName
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 2
                }
                text: username
                textEditable: false
                textAreaStyle: getStyle()

            }



    }

Answer 1

Qt, , :

• ( Photoshop/GIMP ..) PNG.

2. , , - , , pic . pic, , pic, ( , PNG).

:

   a. Profile Image
   b. Background Image
   c. Text 

, z .

Image // Background Image 
{
    z = 2;  
}

Image // Profile Image 
{
    z = 1; 
}

Text  
{
    z = 3; 
}

P.S. , , . - qt 4.8 long back, , .

---

1.

( ), Qt.

• QPainter - , .
• Qml.
• , .

- : http://qt-project.org/forums/viewthread/2066

P.S. , , .

Answer 2

OpacityMask, Qt QtGraphicalEffects, Canvas, Qt 5.0.

Rectangle{
  id: root
  width: 400
  height: 400

  color: "gray"

  property string imageUrl: "./rabbid.jpg"

  Canvas{
    anchors{
        fill: parent
        margins: 50
    }

    Component.onCompleted:{
        loadImage(imageUrl); // Ready to be used in onPaint handler
    }

    onPaint:{
        console.log("Painting...");
        var context = getContext("2d");
        context.save();

        context.fillStyle = "black";
        context.arc(width/2, height/2, width/2, height/2, width);
        context.fill();

        context.globalCompositeOperation = "source-in";
        context.drawImage(root.imageUrl, 0, 0, width, height);

        context.restore();
    }
  }
}

:

Context.globalCompositeOperation = "source-in" , . Context2D .