android - Draw a warped rectangle -

i'm trying draw warped rectangle using canvas. i've tried using path draw straight line , arcto(), don't know values should use. how draw shape similat 1 in image?

edit: code doesn't work, draws straight line.

        path path = new path();         path.moveto(width/2-10, (height/2)+130);         path.lineto(width/2-12, (height/2)+170);          float x1 = width/2-12; //228         float y1 = height/2+170; //570         float x3 = width/2-70; //170         float y3 = height/2+140; //540         float x2 = (x3+x1)/2; //199         float y2 = (y3+y1)/2; //555          path.quadto(x1, y1, x2, y2);         paint paint = new paint()         {             {                 setstyle(paint.style.stroke);                 setcolor(color.yellow);                 setstrokecap(paint.cap.round);                 setstrokewidth(3.0f);                 setantialias(true);             }         };         mcanvas.drawpath(path, paint); 

here's interesting solution found here:

you can use path.quadto() or path.cubicto() that. examples can found in sdk examples (fingerpaint). in case need calculate middle point , pass 3 points quadto()..

some code you:

• (x1,y1) , (x3,y3) starting , ending points respectively.

• create paint object once (e.g. in constructor)

  paint paint = new paint() {     {         setstyle(paint.style.stroke);         setstrokecap(paint.cap.round);         setstrokewidth(3.0f);         setantialias(true);     } }; final path path = new path(); path.moveto(x1, y1);  final float x2 = (x3 + x1) / 2; final float y2 = (y3 + y1) / 2;         path.quadto(x2, y2, x3, y3); canvas.drawpath(path, paint); 

from documentation here:

public void cubicto (float x1, float y1, float x2, float y2, float x3, float y3) 

add cubic bezier last point, approaching control points (x1,y1) , (x2,y2), , ending @ (x3,y3). if no moveto() call has been made contour, first point automatically set (0,0).

parameters x1 x-coordinate of 1st control point on cubic curve

y1 y-coordinate of 1st control point on cubic curve

x2 x-coordinate of 2nd control point on cubic curve

y2 y-coordinate of 2nd control point on cubic curve

x3 x-coordinate of end point on cubic curve

y3 y-coordinate of end point on cubic curve

edit: in case think should change code to:

final path path = new path(); path.moveto(width/2-12, (height/2+170);  float x1 = width/2-12; //228 float y1 = height/2+170; //570 float x3 = width/2-70; //170 float y3 = height/2+140; //540 float x2 = (x3+x1)/2 + 14.5; //213.5 float y2 = (y3+y1)/2 + 7.5; //562.5  path.quadto(x2, y2, x3, y3); paint paint = new paint() {     {         setstyle(paint.style.stroke);         setcolor(color.yellow);         setstrokecap(paint.cap.round);         setstrokewidth(3.0f);         setantialias(true);     } }; mcanvas.drawpath(path, paint);