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

Java Development

Reply
Contributor
jacobtabak
Posts: 34
Registered: ‎03-14-2010
My Device: N/A
My Carrier: Fledge
Accepted Solution

Rounded rectangle clipping area

Greetings again,

 

I'm trying to draw a rounded rectangle with a bitmap texture inside of it and transparent corners.  I've got an implementation that works, but it's so sloppy that I was hoping to find a better way to do it.

 

The approach that I took was to draw the bitmap first, and then use Graphics.clear() to clear out the points in the corners.

 

 I used this algorithm to assist in finding the points that needed to be cleared: http://www.cs.unc.edu/~mcmillan/comp136/Lecture7/circle.html

 

Can you think of an easier way to do this that uses existing code like the drawRoundRect or drawArc methods?

Please use plain text.
Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various
My Carrier: various

Re: Rounded rectangle clipping area

You can ask the Graphics object to drawTexturedPath with your Bitmap as one of the parameters.

Since you need rounded rectangle, your path will have to include various types of points.

 

For example, if your top left corner is (x, y) and the radius of your arc is r, your path will include 3 points:

(x, y + r), (x + (int) (r * (1. - Math.sqrt(2.))), y + (int) (r * (1. - Math.sqrt(2.)))) and (x + r, y).  The first and the third point will have CURVEDPATH_END_POINT type while the middle point will have CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT type.

 

Other corners will need similar treatment.  I also vaguely remember seeing an advice to call

graphics.setDrawingStyle(DRAWSTYLE_AAPOLYGONS, false) prior to your drawTexturedPath - search the forums for more details.

 

Good luck!

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Please use plain text.
Contributor
jacobtabak
Posts: 34
Registered: ‎03-14-2010
My Device: N/A
My Carrier: Fledge

Re: Rounded rectangle clipping area

Thank you, that's incredibly helpful.  If you have a moment take a look at my other post about colors :smileyhappy:

Please use plain text.
New Contributor
bcall_99
Posts: 5
Registered: ‎10-18-2010
My Device: Not Specified

Re: Rounded rectangle clipping area

I had spend quite some time to google how to draw round corners for images in blackberry and it seems like there is no sample code anywhere.

 

Hope the following piece of code help a little bit.

 

int w = bmp.getWidth();
int h = bmp.getHeight();
int arc = 14;
           
int xPts[] = {0,         0,         arc,        //top left corner
                     w-arc,     w,         w,            //top right corner
                     w,         w,         w-arc,        //bottom right corner
                     arc,         0 ,     0};            //bottom left corner    
              
int yPts[] = {arc,        0,        0,            //top left corner
                    0,        0,         arc,        //top right corner
                    h-arc,    h,        h,            //bottom right corner
                    h,        h,        h-arc};        //bottom left corner

 

//To be honest, i don't quite get what the following 5 lines are doing... ^_^           

int fAngle = Fixed32.toFP(0);
int dvx = Fixed32.cosd(fAngle);
int dux = -Fixed32.sind(fAngle);
int dvy = Fixed32.sind(fAngle);         
int duy = Fixed32.cosd(fAngle);

byte end = Graphics.CURVEDPATH_END_POINT;
byte curve = Graphics.CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT;
              
//each corner has 3 points:
//the 2 end points and the middle point is draw as a curve.
byte types [] = { end, curve, end,
                            end, curve, end,
                            end, curve, end,
                            end, curve, end};
             
g.drawTexturedPath(xPts, yPts, types, null, 0, 0, dvx, dux, dvy, duy, bmp);

 

 

Please use plain text.
Regular Contributor
santacrab
Posts: 70
Registered: ‎10-06-2010
My Device: BB 9780

Re: Rounded rectangle clipping area

Is there no way to apply a "mask shape" to a bitmap to reach the same result?

 

For example, if i have a rectangle image, is there no way to apply a roundedrectangle as shape, to have as result my image with rounded borders?

Please use plain text.
Trusted Contributor
milanvishal
Posts: 201
Registered: ‎12-17-2010
My Device: Not Specified

Re: Rounded rectangle clipping area

Hi, I want to set the bitmap according to my x,y origin & rotate it . image is going to rotate fine but not from the origins from where i want to rotate. i m using this method. g.drawTexturedPath(xPts, yPts, null, null, 0, 0, dvx, dux, dvy,duy, face); but i can't set to fix origin. i worked on below code. int w = face.getWidth(); int h = face.getHeight(); double a = Math.toRadians(angle); int x1 = (int) (0 - h * Math.sin(a)); int y1 = (int) (0 + h * Math.cos(a)); int x2 = (int) (x1 + w * Math.cos(a)); int y2 = (int) (y1 + w * Math.sin(a)); int x3 = (int) (0 + w * Math.cos(a)); int y3 = (int) (0 + w * Math.sin(a)); int xPts[] = { 0, x1, x2, x3 }; int yPts[] = { 0, y1, y2, y3 }; int fAngle = Fixed32.toFP(angle); int dvx = Fixed32.cosd(fAngle); int dux = -Fixed32.sind(fAngle); int dvy = Fixed32.sind(fAngle); int duy = Fixed32.cosd(fAngle); g.drawTexturedPath(xPts, yPts, null, null, 0, 0, dvx, dux, dvy, duy, face); So can any one help me to solve this problem? thanking you for help.....
Please use plain text.
Regular Contributor
milan555
Posts: 52
Registered: ‎07-04-2011
My Device: Bold-3
My Carrier: Developer

Re: Rounded rectangle clipping area

from next time please post your code in proper fomate.

so it is easy to read.

 

Regards

Please use plain text.