Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw Bezier Curve in Android

I have a requirement to create bezier curve in my project. For that purpose I am drawing a view with paint, but the problem is that I am not getting the exact shape for my need as mentioned in the picture below. So kindly help me with your solutions and changes or modifications in my code. Thanks in advance.

Code I am using to create Bezier Curve:

public class DrawView extends View {

    public DrawView (Context context) {
        super (context);
    }

    protected void onDraw (Canvas canvas) {
        super.onDraw (canvas);

        Paint pLine = new Paint () {{
            setStyle (Paint.Style.STROKE);
            setAntiAlias (true);
            setStrokeWidth (1.5f);
            setColor (Color.RED); // Line color
        }};

        Paint pLineBorder = new Paint () {{
            setStyle (Paint.Style.STROKE);
            setAntiAlias (true);
            setStrokeWidth (3.0f);
            setStrokeCap (Cap.ROUND);
            setColor (Color.RED); // Darker version of the color
        }};
        Path p = new Path ();
        Point mid = new Point ();
        // ...
        Point start =new Point (30,90);
        Point end =new Point (canvas.getWidth ()-30,140);
        mid.set ((start.x + end.x) / 2, (start.y + end.y) / 2);

        // Draw line connecting the two points:
        p.reset ();
        p.moveTo (start.x, start.y);
        p.quadTo ((start.x + mid.x) / 2, start.y, mid.x, mid.y);
        p.quadTo ((mid.x + end.x) / 2, end.y, end.x, end.y);

        canvas.drawPath (p, pLineBorder);
        canvas.drawPath (p, pLine);
    }
}

MainActivity

public class MainActivity extends Activity {

    private DrawView drawView;

    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        drawView = new DrawView (this);
        setContentView (drawView);

    }
}

My Actual Need:

enter image description here

Output which I am getting:

enter image description here

like image 549
Chandru Avatar asked May 06 '15 10:05

Chandru


People also ask

How do you draw a Bezier curve?

To draw a line using this equation, one can divide the curve into smaller segments, calculate the end points of each segment using the Bezier cubic equation and draw the line for the segment. For instance, one can draw a line between the points defined by t = 0 and t = 0.01, then t = 0.01 and t = 0.02, and so on.

What tool creates a Bezier curve?

In most cases, you'll be drawing bézier curves using the Pen tool, which is truly one of the most versatile tools in Illustrator. Unlike the Line tool, the lines you create with the Pen are called paths, and they're created with an anchor point on each side.

Where are Bezier curves used in real life?

Bézier curves have a lot of applications in the areas of science, engineering, and technology such as: railway route or highway modeling, networks, animation, computer-aided design system, robotics, environment design, communications, and many other fields due to their computational simplicity and stability.


2 Answers

After a long struggle i found the root cause of my issue right from the scratch. Thanks for the tool which helped me to generate the coordinates and also the blog which showed me the exact sample for my need. Finally my code is as follows:

public class DrawView extends View {

    Paint paint;
    Path path;

    public DrawView(Context context) {
        super(context);
        init();
    }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public DrawView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init(){
        paint = new Paint();

        paint.setStyle(Paint.Style.STROKE);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        path = new Path();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(3);
        path.moveTo(34, 259);
        path.cubicTo(68, 151, 286, 350, 336, 252);
        canvas.drawPath(path, paint);

    }
like image 85
Chandru Avatar answered Oct 19 '22 15:10

Chandru


You haven't closed your path and didn't set a color to you paint.

like image 37
Bondax Avatar answered Oct 19 '22 14:10

Bondax