CODEWITHSUNDEEP
androidandroid-canvas
domen
domen

Reputation: 1279

Draw a warped rectangle

I'm trying to draw a warped rectangle using Canvas. I've tried using Path to draw the straight line and then arcTo(), but I don't know which values should I use. How do I draw a shape similat to the one in the image?

enter image description here

EDIT: This code doesn't work, it draws a 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);

Upvotes: 1

Views: 281

Answers (1)

g00dy
g00dy

Reputation: 6788

Here's an interesting solution I found here:

You can use Path.quadTo() or Path.cubicTo() for that. Examples can be found in the SDK Examples (FingerPaint). In your case you would simply need to calculate the middle point and pass then your three points to quadTo()..

Some code for you:

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

  • create the paint object only once (e.g. in your 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 the documentation here:

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

Add a cubic bezier from the last point, approaching control points (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been made for this contour, the first point is automatically set to (0,0).

Parameters x1 The x-coordinate of the 1st control point on a cubic curve

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

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

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

x3 The x-coordinate of the end point on a cubic curve

y3 The y-coordinate of the end point on a cubic curve

EDIT: In your case I think you should change the 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);

Upvotes: 1

Related Questions