CODEWITHSUNDEEP
androidandroid-canvascurvebezier
Morya
Morya

Reputation: 346

Curve passing through three points in android canvas

What i actually want is , with the help of three points i need to draw a curve passing through all the three points. I can acheive this by using ".Path.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)" method but in this scenario my middle point does not lie on the curve. I need to draw a "︶" shaped curve and not like "V" shaped curve. i.e. the the curve must be curved at every point on the curve.

Upvotes: 3

Views: 1415

Answers (1)

divanov
divanov

Reputation: 6339

Assuming we have three points D0(x0,y0), D1(x1,y1), D2(x2,y2). We also have to find Bezier cubic spline P0-P1-P2-P3 passing through D0, D1 and D2.

Obviously,

P0 = D0
P3 = D2

Then there are infinitive number of Bezier splines passing through point D1 defined by equation

P2 = (D1 - (1-t)^3 * P0 - t^3 * P3) / (3*(1-t)*t^2) -
     (1-t) * P1/t;

where t is Bezier curve parameter corresponding to point D1.

To find a real curve, we should assign some t, for simplicity, let's take t = 0.5 and choose P1. Then P2 can be found from the equation above.

Here is a solution based on restriction that P1-P2 is parallel to D0-D2:

% vector pointing from D0 to D2
baseSides = 0.3 * (D2 - D0)
% vector moving D1 towards D0 - D2 base
baseDown = 0.1 * (D0 - D1) + (D2 - D1))
% moving D1 down to the base and split to left and right
P1" = D1 + baseDown - baseSides
P2" = D1 + baseDown + baseSides
P1' = P1" + (P1" - D1) * 2 / 3
P2' = P2" + (P2" - D1) * 2 / 3
P1 = P1' + P1' - D0
P2 = P2' + P2' - D2

then you can use P1, P2 and P3 coordinates as parameters for Path.cubicTo(). 0.3 is a scaling factor here, changing it makes curve wider-narrower.

These computations are based on De Casteljau's algorithm for Bezier curve splitting.

Bezier spline passing through a point

here red diamonds are P1" and P2", green diamonds are P1' and P2' and blue circles are P1 and P2.

Upvotes: 2

Related Questions