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
Posts: 20
Registered: ‎09-26-2010
My Device: Not Specified
Accepted Solution

curve line

Hi,

how can I draw curve line with some thickness?

I've found only drawPathOutline(), but it is deprecated.

 

Thank you!

Highlighted
Developer
Posts: 1,806
Registered: ‎04-28-2009
My Device: Z10 (STL100-4)-10.2.1.3253, Z10 (STL100-3)-10.3.1.2576, Z30 (STA100-5)-10.3.1.2582, Passport (SQW100-1)-10.3.1.2576, PlayBook (16GB)-2.1.0.1917
My Carrier: Verizon

Re: curve line

Use drawOutlinedPath instead. As for a line with thickness, the native Graphics class does not contain any functions to set the thickness of a line drawn. You would have to figure out the line, then make it into a thick line yourself, then draw with drawFilledPath.

---Spends time in #blackberrydev on freenode (IRC)----
Three simple rules:
1. Please use the search bar before making new posts.
2. "Like" posts that you find helpful.
3. If a solution has been found for your post, mark it as solved.
--I code too much. Well, too bad.
Contributor
Posts: 20
Registered: ‎09-26-2010
My Device: Not Specified

Re: curve line

thanks for your answer

 

and can you, please, help me make my line curvy?

 

int x0[] = { 50, 100, 75 };
int y0[] = { 50, 100, 150};

graphics.drawPathOutline(x0,y0,null,null,false);

 

I have looked into documentation, but I cant understand, how I should use  pointTypes...

Developer
Posts: 1,806
Registered: ‎04-28-2009
My Device: Z10 (STL100-4)-10.2.1.3253, Z10 (STL100-3)-10.3.1.2576, Z30 (STA100-5)-10.3.1.2582, Passport (SQW100-1)-10.3.1.2576, PlayBook (16GB)-2.1.0.1917
My Carrier: Verizon

Re: curve line

By default if you set pointTypes to null it sets each point to an end point. Let me see if I can find an article that explains this....

 

Here we are: http://supportforums.blackberry.com/t5/Java-Development/Example-gradient-filled-rounded-rectangle-wi...

---Spends time in #blackberrydev on freenode (IRC)----
Three simple rules:
1. Please use the search bar before making new posts.
2. "Like" posts that you find helpful.
3. If a solution has been found for your post, mark it as solved.
--I code too much. Well, too bad.
Developer
Posts: 114
Registered: ‎04-28-2010
My Device: Storm 9530
My Carrier: Telus

Re: curve line

[ Edited ]

Hey,

 

       Together we've derive the two curves given below which make use of the Graphics.drawFilledPath. Before we start we have drawn the curve(s) and labeled the starting and ending points of the curve(s). We have also labeled the points at which the curve turns by points c1 and c2. Below we will start to create our set of points that define a small thin part of the curve and then translate these points to our desired thickness h.

Example.png

The first curve can be derived in two ways:

      1.) 2 CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT, 5 CURVEDPATH_END_POINT

      2.) 2 CURVEDPATH_CUBIC_BEZIER_CONTROL_POINT, 2 CURVEDPATH_END_POINT

 

           First we'll start with method 2 because its easier and looks graphically better in this instance. We want to make a set of 4 x coordinates that will position x, c1, c2, and x* as described in the picture and vice-versa with y coordinates.

 

// Set of vertices
private int[] _pathX;
private int[] _pathY;

// Default PathPoint for Polygon
private byte[] _pathPoint = {
    Graphics.CURVEDPATH_END_POINT,
    Graphics.CURVEDPATH_CUBIC_BEZIER_CONTROL_POINT,
    Graphics.CURVEDPATH_CUBIC_BEZIER_CONTROL_POINT,
    Graphics.CURVEDPATH_END_POINT
};

// Constructor
public Polygon(){
    // Initialize Polygon Values
    this.reset();
}

// Paint Function
public Graphics paint(Graphics graphics) {
    // Reset Painting Field
    graphics.setGlobalAlpha(255);   // Opaque

    // Draw Polygon
    graphics.setColor(_polygonColor);         
    graphics.setDrawingStyle(Graphics.DRAWSTYLE_AAPOLYGONS, true);
    graphics.drawFilledPath(_pathX, _pathY, _pathPoint, null);
}

// Reset all Polygon Values
public reset(){
    _polygonPathX = new int[]{ };
    _polygonPathY = new int[]{ };
}

        Once we've added the coordinates and want to add a thickness h, we double up on the PathX, PathY, and PathPoint but with a translation of h in both the x and y sets (just add or subtract).

 

        I've done several of these drawFilledPath and its taken me a while to physically describe these polygons myself. Its just practice and simple drawing on paper and mapping your thoughts to the virtual vertices.

 

By the way:

 

The second curve can be derived by:

      1.) 1 CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT, 2 CURVEDPATH_END_POINT

      2.) 2 CURVEDPATH_CUBIC_BEZIER_CONTROL_POINT, 1 CURVEDPATH_END_POINT

 

 

Developer
Posts: 114
Registered: ‎04-28-2010
My Device: Storm 9530
My Carrier: Telus

Re: curve line

The major difference between using CUBIC or QUADRATIC is the way they are derived. The cubic option places the 'focus' point where the 2nd derivative is equal to zero. When I mean 'focus' point im stating the point where the curve changes direction (down to up) between c1 and c2. Whereas the quadratic option you physically state the focus point and Graphics Object creates a line from one end point to another end point.

 

Check out this tutorial. He uses QUADRATIC points to describe his button.

         http://www.deepgraysea.com/bbroundedrect.htm

Contributor
Posts: 20
Registered: ‎09-26-2010
My Device: Not Specified

Re: curve line

thank you!

I understand it now!