5

I have this code:

public class TestView extends View {

private Path mPath;
private Paint mPaint = new Paint();

public TestView(Context context) {
    this(context, null);
}

public TestView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public TestView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mPath = new Path();
    mPath.moveTo(0, 0);
    mPath.quadTo(50, -50, 100, 0);
    mPath.quadTo(150, 50, 200, 0);
    mPath.quadTo(250, -50, 300, 0);
    mPath.quadTo(350, 50, 400, 0);
    mPath.quadTo(450, -50, 500, 0);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    canvas.translate(0, getMeasuredHeight() / 2F);
    // just making sure to clip starting and ending curve
    canvas.clipRect(50, -100, 450, 100, Region.Op.INTERSECT);
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
}
}

That produces this:

enter image description here

But I want this (pardon my Paint skills):

enter image description here

Any help on filling area under this sine curve will be appreciated.

3
  • what is Region post its import line or implementation, from this line canvas.clipRect(50, -100, 450, 100, Region.Op.INTERSECT); Oct 22, 2013 at 13:57
  • @Warlock its import android.graphics.Region;;
    – M-Wajeeh
    Oct 22, 2013 at 14:01
  • @Warlock the problem is solved I just needed to play with quadTo() values a bit. Thanks anyway.
    – M-Wajeeh
    Oct 22, 2013 at 14:04

2 Answers 2

6

change your values to

mPath.moveTo(0,100);
mPath.quadTo(50, -50, 100, 0);
mPath.quadTo(150, 50, 200, 0);
mPath.quadTo(250, -50, 300, 0);
mPath.quadTo(350, 50, 400, 0);
mPath.quadTo(450, -50, 500, 100);
1
  • 2
    Bit late :) ? I have solved it with similar approach.Thanks anyway.
    – M-Wajeeh
    Oct 22, 2013 at 14:09
2

Never mind, this produced what I wanted:

    mPath = new Path();
    mPath.moveTo(0, 0);
    mPath.quadTo(50, -100, 100, -50);
    mPath.quadTo(150, -0, 200, -50);
    mPath.quadTo(250, -100, 300, -50);
    mPath.quadTo(350, -0, 400, -50);
    mPath.quadTo(450, -100, 500, -0);
    mPath.close();

enter image description here

2
  • 1
    still you dont need to change too much values in my solution :) just the y of start point and end point Oct 22, 2013 at 14:10
  • What should be parameter if want to set this as Background in Half of screen.(bottom to half of screen)
    – DJhon
    Sep 2, 2016 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.