CODEWITHSUNDEEP
androidgraphicsdrawing
Shawn
Shawn

Reputation: 2366

Android fill in part of a path?

I have a shape that I'm drawing with a path. I'm filling that shape in with a gradient and then I need to put another gray area ontop of that gradient dependent upon a %. I'm using path.quadTo to make my shape so I don't know the y coordinate of the top line to properly intersect it. This is what I'm getting when I just set it to the maximum y:

Screenshot

The white stroke is the image I'm trying to partially fill in. The right gray area I want to keep, but I need to get rid of the left gray area. Any ideas? This is what I'm trying so far:

@Override
    public void onDraw(Canvas canvas) {
        Path path = new Path();
        Path grayPath = new Path();
        float x1,y1,x3,y3,x2,y2;
        float x1g,x2g;

        int width = canvas.getWidth();
        int height = canvas.getHeight();

        gradientPaint.setShader(new LinearGradient(0, height,width,height, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[] {0,0.6f,1}, Shader.TileMode.REPEAT));

        x1 = 0;
        y1 = (float) (height * .90);

        x2 = (float) (width * .75);
        y2 = (float) (height * .50);

        x3 = width;
        y3 = (float) (height * .10);

        x2g = (float) (width*.50);

        //Ramp
        path.moveTo(x1, y1);
        path.quadTo(x2, y2, x3, y3);
        //Down
        path.lineTo(x3, y1+50);
        //Back
        path.lineTo(x1, y1+50);
        //Up
        path.lineTo(x1, y1);

        //Ramp
        grayPath.moveTo(x1, y1);
        grayPath.quadTo(x2, y2, x3, y3);
        //Down
        grayPath.lineTo(x3, y1+50);
        //Back
        grayPath.lineTo(x2g, y1+50);
        //Up
        grayPath.lineTo(x2g, y3);

        grayPath.setFillType(FillType.WINDING);
        //Draw for shiny fill
        //canvas.drawPath(path, gradientPaint);
        //Draw for grayness
        canvas.drawPath(grayPath, grayPaint);
        //Draw for stroke!
        canvas.drawPath(path, strokePaint);

    }

Upvotes: 1

Views: 1904

Answers (1)

Shawn
Shawn

Reputation: 2366

Clipping is what I was looking for and is a much simpler solution:

@Override
    public void onDraw(Canvas canvas) {
        Path path = new Path();
        float x1,y1,x3,y3,x2,y2;

        int width = canvas.getWidth();
        int height = canvas.getHeight();

        gradientPaint.setShader(new LinearGradient(0, height,width,height, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[] {0,0.6f,1}, Shader.TileMode.REPEAT));

        //Start at the left side, 10% up
        x1 = 0;
        y1 = (float) (height * .90);

        x2 = (float) (width * .75);
        y2 = (float) (height * .50);

        x3 = width;
        y3 = (float) (height * .10);

        //Ramp
        path.moveTo(x1, y1);
        path.quadTo(x2, y2, x3, y3);
        //Down
        path.lineTo(x3, y1+50);
        //Back
        path.lineTo(x1, y1+50);
        //Up
        path.lineTo(x1, y1);

        //Create Gray Rect with %
        Rect rect = new Rect((int)(width*.50),0,(int) x3, (int) y1+50);

        //CLIP IT
        canvas.clipPath(path);

        //Draw for shiny fill
        canvas.drawPath(path, gradientPaint);
        //Draw for grayness
        canvas.drawRect(rect, grayPaint);
        //Draw for stroke!
        canvas.drawPath(path, strokePaint);

    }

Upvotes: 2

Related Questions