0

Fill star with partially Picture

To see the above picture. My sample code is below

`protected void onDraw(Canvas canvas) { mid = getWidth()/2; int a=100,b=100; min = Math.min(a, b); fat = min / 17; half = min / 2; rad = 5; mid = mid - half;

     paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.STROKE);
    Path path = new Path();
    path.reset();
    paint.setStyle(Paint.Style.FILL);


 // top left
    path.moveTo(half * 0.5f, half * 0.84f);

 // top right
    path.lineTo(half * 1.5f, half * 0.84f);

 // bottom left
    path.lineTo(half * 0.68f, half * 1.45f);

 // top tip
    path.lineTo(half * 1.0f, half * 0.5f);

// bottom right
    path.lineTo(half * 1.32f, half * 1.45f);

 // top left
    path.lineTo(half * 0.5f, half * 0.84f);

    path.close();

canvas.drawPath(path, paint);
    super.onDraw(canvas);

}`

My question is how we do partially fill star in android?

I want this fill option with not only half fill star.

And also, If we consider full star length is 100%.

And we have to fill star length of 20% or we have to fill star length of 50% or we have to fill star length of 70%.

Any fill values to fill a star.

choza rajan
  • 109
  • 1
  • 9

1 Answers1

2

Your path object here is for the 'outline' of the star. If you want to fully paint it, then you could set the style to FILL and STROKE. But you can't do to partially paint it. You need to create another path object and set the paint to FILL and draw it. So ideally you will draw the outline and the fill separately.

It's fairly simple. You have already done half of it. You can reuse the calculation you did for your Outline path for the Fill path.

UPDATE: If this is for a Rating kind of a thing, then you need to dynamically increase or decrease the filling. If that's the case. You could draw the FILL as a RECTANGLE, and then clip it using the star OUTLINE. Then you only need to increase or decrease the width of the Rectangle.

More info here : How to mask out a simple region when painting in Android?

UPDATE: If it's a partial PICTURE that you want, then you have to create a bitmap of that picture and then draw it using drawBitmap(). Then clip the region to make it look like it's partially filled, using clipRegion().

Community
  • 1
  • 1
Henry
  • 17,490
  • 7
  • 63
  • 98
  • I want this fill option with not only half fill star. And also, If we consider full star length is 100%. And we have to fill star length of 20% or we have to fill star length of 50% or we have to fill star length of 70%. Any fill values to fill a star. – choza rajan Oct 15 '15 at 05:14
  • Glad that answer helped you. If you want to increase or decrease the fill, just increase or decrease the size of the FILLED RECTANGLE. Once you have clipped it, you will get the effect of a partially filled one. You can go from 0% to 100%. – Henry Oct 15 '15 at 06:02
  • I am also got that same idea you suggest above. This is my first question to asked in stack over flow.You have reply for this question. Thanks for that.I am happy. You continue this habit to answer questions asked by stack over flow members. – choza rajan Oct 15 '15 at 06:32
  • I am do that, but in clipping of the path is not good to see. Please see the another question link http://stackoverflow.com/questions/33301655/how-to-clip-a-star-in-android-but-the-appearance-of-the-star-is-clear – choza rajan Nov 02 '15 at 11:33