Question

Here’s simplified version of my code:

Paint p = new Paint();

p.setShader(borderShader); //use a bitmap as a texture to paint with
p.setFilterBitmap(true);
p.setShadowLayer(20, 20, 20, Color.BLACK);

canvas.clipRect(10,0,width-10,height);
canvas.drawCircle(width/2,height/2,1000/2,p);

So the image looks something like this:

A circle that’s clipped on both sides.

The problem is, since the shadow is ofset by 20 pixels down, and 20 pixels to the right. The right portion of the shadow is clipped by the clipRect and won’t show.

I have to use clipRect instead of simply drawing a white rectangle to clip the circle because the left and right of the circle needs to be transparent to display the background underneath.

Answer 1

I ended up using Path to draw the shape by using two arcs and two line segments instead of using rectangular clipping areas on a circle.

A lot of trig and math later, it works perfectly.

EDIT:

Per request, here is a sample of the code I ended up using. Note that this is custom tailored to my application and will work to draw out a shape exactly like the one in my question.

private void setupBorderShadow()
{
    //Set up variables
    int h = SUI.WIDTH / 2; // x component of the center of the circle 
    int k = SUI.HEIGHT_CENTER; // y component of the center of the circle

    int x = SUI.WIDTH / 2 - 4 * SUI.CIRCLE_RADIUS_DIFFERENCE - SUI.BORDER_WIDTH; //left side of the rectangle
    int r = 6 * SUI.CIRCLE_RADIUS_DIFFERENCE + SUI.BORDER_WIDTH; //radius of circle


    //define a rectangle that circumscribes the circle
    RectF circle = new RectF(h - r, k - r, h + r, k + r);

    Path p = new Path();
    //draw a line that goes from the bottom left to the top left of the shape
    p.moveTo(x, (float) (k + Math.sqrt(-(h * h) + 2 * h * x + r * r - (x * x))));
    p.lineTo(x, (float) (k - Math.sqrt(-(h * h) + 2 * h * x + r * r - (x * x))));

    //calculate the angle that the top left of the shape represents in the circle
    float angle = (float) Math.toDegrees(Math.atan(Math.sqrt(-(h * h) + 2 * h * x + r * r
            - (x * x))
            / (h - x)));

    //draw an arc from the top left of shape to top right of shape 
    p.arcTo(circle, 180 + angle, (180 - angle * 2));

    // the x component of the right side of the shape
    x = SUI.WIDTH / 2 + 4 * SUI.CIRCLE_RADIUS_DIFFERENCE + SUI.BORDER_WIDTH;

    //draw line from top right to bottom right
    p.lineTo(x, (float) (k + Math.sqrt(-(h * h) + 2 * h * x + r * r - (x * x))));

    //draw arc back from bottom right to bottom left. 
    p.arcTo(circle, angle, (180 - angle * 2));


    //draw the path onto the canvas
    _borderCanvas.drawPath(p, SUI.borderShadowPaint);
}

Note that some of the variables that I use such as “CIRCLE_RADIUS_DIFFERENCE” might not make sense. Ignore these, they are app specific constants. All the variables that actually make a difference in the geometric calculations are labeled.