Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Regular Contributor
sonalb123
Posts: 63
Registered: ‎08-05-2013
My Device: Blackberry-10 webworks
My Carrier: zcon
Accepted Solution

Apply Radius to image or crop the image

Hi,

My aim is to selct the image from folder and apply it as a profile picture.

For now I am able to get a imge and apply it. But I want this image in rounded shape.
How can I crop the Image so that I will get  rounded shape. Is there any way to do that in using c++ or in qml.

 

I am using blackberry cascade 10.1 

 

Please help me. 

Please use plain text.
Developer
BBSJdev
Posts: 6,094
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Apply Radius to image or crop the image

You can do anything in C++ it's just a question of how easy you want it. :smileyhappy:

 

I would look at the Qt graphic libraries to see if anything fits your purpose.

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
BBSJdev
Posts: 6,094
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Apply Radius to image or crop the image

Possibly I overread your question if you just want to display it you can just place an ImageView over the top of it.

This ImageView would be an image with a transparent circle in the middle.


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Regular Contributor
sonalb123
Posts: 63
Registered: ‎08-05-2013
My Device: Blackberry-10 webworks
My Carrier: zcon

Re: Apply Radius to image or crop the image

Hi,

Is there any way through which I can display selected image in rounded shape.

 

Here is my first image. I have taken one image button and apply  image on it.
On click of + button I will open file picker and select a picture.

before.png 

 

After selecting a file my view should be like below:
after.png

Please use plain text.
Developer
BBSJdev
Posts: 6,094
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Apply Radius to image or crop the image

It takes awhile for images to be approved and therefore other people to view them.

If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Regular Contributor
sonalb123
Posts: 63
Registered: ‎08-05-2013
My Device: Blackberry-10 webworks
My Carrier: zcon

Re: Apply Radius to image or crop the image

Hey ,

Sorry but I am not able to get your suggestion.

 

I am able to replace the image with the selected one but shape is not rounded. 

 

Now my question is how can I display that image in ronded shape.

Please use plain text.
Developer
BBSJdev
Posts: 6,094
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Apply Radius to image or crop the image

Too display in a rounded shape i.e crop the image to a circle, you would need to use a graphics library or write your own.
If you just want to make it look lile it's a circle then you can place one imageView over another where the top one is an image of a square with a transparent circle cut out of it.

If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
BBSJdev
Posts: 6,094
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Apply Radius to image or crop the image

Container {
    layout: DockLayout { }

    ImageView {
        imageSource: "person.png"
    }

    ImageView {
        imageSource: "transparent circle.png"
    }
}

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.