在Android中，我如何填充心形帆布并根据百分比填写部分？

Question

我有一个观点，我希望显示一个基于心脏中间显示的百分比填充的心脏。

我试过画布，能够画心但不能局部填充，使用剪裁等但是无法实现这一点，请参阅图片

现在如果是30％，那么从底部只有30％的区域应该用红色填充，休息应该是白色的，心脏外面的颜色也是蓝色，这需要与图像中所示的相同。

＆＃13;

＆＃13;

       int percentage = 85;
        int w = 100;
        int h = 100;
        Bitmap bitmap = Bitmap.createBitmap(w,h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        Path path = new Path();
        // Fill the canvas with background color
        canvas.drawColor(Color.BLUE);
        paint.setShader(null);

        float width = 100.00f;
        float height =100.00f;
        // Starting point
        path.moveTo(width / 2, height / 5);

        // Upper left path
        path.cubicTo(5 * width / 14, 0,
                0, height / 15,
                width / 28, 2 * height / 5);

        // Lower left path
        path.cubicTo(width / 14, 2 * height / 3,
                3 * width / 7, 5 * height / 6,
                width / 2, height);

        // Lower right path
        path.cubicTo(4 * width / 7, 5 * height / 6,
                13 * width / 14, 2 * height / 3,
                27 * width / 28, 2 * height / 5);

        // Upper right path
        path.cubicTo(width, height / 15,
                9 * width / 14, 0,
                width / 2, height / 5);

        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);


        // draw text percentage
        Paint textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setTextSize(12);
        int xPos = (canvas.getWidth() / 2);
        int yPos = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() +    textPaint.ascent()) / 2)) ;
        //((textPaint.descent() + textPaint.ascent()) / 2) is the distance from the baseline to the center.
        canvas.drawText(percentage+" % ", xPos, yPos, textPaint);
        int heightOfClip = 100 - percentage;
        //clip
        canvas.clipRect(0,0,100,heightOfClip, Region.Op.XOR);
        // draw heart and color it
        canvas.drawPath(path, paint);
        // draw text percentage
        canvas.drawText(percentage+"%", xPos, yPos, textPaint);

        mSampleIv.setImageBitmap(bitmap);

＆＃13;

＆＃13;

＆＃13;