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:
Output which I am getting:
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.
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.
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.
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);
}
You haven't closed your path and didn't set a color to you paint.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With