How to draw Bezier Curve in Android

Chandru picture Chandru · May 6, 2015 · Viewed 18.7k times · Source

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

Answer

Chandru picture Chandru · May 10, 2015

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);

    }