Draw a Rectagle with Fill Outside Borders

Question

I draw a rectangle with the borders of the rectangle's fill. I tried some of this. But I can’t get the perfect result that I expected.

This is what I expected.

I tried

    Point pTopLeft = new Point();
    Point pBotRight = new Point();
    pTopLeft.x = 100;
    pTopLeft.y = 100;
    pBotRight.x = canvas.getWidth() - 100;
    pBotRight.y = canvas.getHeight() - 100;
    Rect above = new Rect(0, 0, canvas.getWidth(), pTopLeft.y);
    paint.setColor(Color.parseColor("#77000000"));
    canvas.drawRect(above, paint);
    Rect left = new Rect(0, pTopLeft.y, pTopLeft.x, pBotRight.y);
    paint.setColor(Color.parseColor("#77000000"));

    canvas.drawRect(left, paint);
    Rect right = new Rect(pBotRight.x, pTopLeft.y, canvas.getWidth(),
            pBotRight.y);
    paint.setColor(Color.parseColor("#77000000"));
    canvas.drawRect(right, paint);
    Rect bottom = new Rect(0, pBotRight.y, canvas.getWidth(),
            canvas.getHeight());

    paint.setColor(Color.parseColor("#77000000"));
    Paint paint_text = new Paint();
    paint_text.setColor(Color.WHITE);
    paint_text.setTextSize(50);
    paint_text.setTextAlign(Align.CENTER);

    canvas.drawText("Position Card in this Frame", canvas.getWidth() / 2,
            canvas.getHeight() - 30, paint_text);
    canvas.drawRect(bottom, paint);

And it turned out like this

But I want to draw a rectangle and fill the borders to achieve a rounded border. How can i do this?

EDIT When I try to draw a rectangle one over one. The layout is like that.

What I can not give Color.TRANSPARENTfor the central rectangle, which completely transforms the second rectangle.

Answer 1

, . :

// set up some constants
int w = canvas.getWidth();
int h = canvas.getHeight();
RectF rect = new RectF(100, 100, w - 100, h - 100);
float radius = 10.0f; // should be retrieved from resources and defined as dp
float borderWidth = 2.0f; // ditto
int innerRectFillColor = 0x33000000; // or whatever shade it should be

// first fill the interior
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(innerRectFillColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(rect, radius, radius, paint);
// then draw the border
paint.setColor(Color.WHITE);
paint.setStrokeWidth(borderWidth);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRoundRect(rect, radius, radius, paint);

( ), - ( ). Bitmap, , . Porter-Duff CLEAR, :

// same constants as above except innerRectFillColor is not used. Instead:
int outerFillColor = 0x77000000;

// first create an off-screen bitmap and its canvas
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas auxCanvas = new Canvas(bitmap);

// then fill the bitmap with the desired outside color
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(outerFillColor);
paint.setStyle(Paint.Style.FILL);
auxCanvas.drawPaint(paint);

// then punch a transparent hole in the shape of the rect
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
auxCanvas.drawRoundRect(rect, radius, radius, paint);

// then draw the white rect border (being sure to get rid of the xfer mode!)
paint.setXfermode(null);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
auxCanvas.drawRoundRect(rect, radius, radius, paint);

// finally, draw the whole thing to the original canvas
canvas.drawBitmap(bitmap, 0, 0, paint);

Answer 2

, . , RoundRectShape, 0 .

    Rect frame = new Rect(left, top, right, bottom); // Window location on screen
    int width = canvas.getWidth();
    int height = canvas.getHeight();


    paint.setColor(maskColor); // Make sure your mask is semi-transparent

    // Draw four bounding rectangles  
    canvas.drawRect(0, 0, width, frame.top, paint); 
    canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);  
    canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
    canvas.drawRect(0, frame.bottom + 1, width, height, paint);

    // Create rounded rectangle to fill window 
    float outerRadii[] = {0, 0, 0, 0, 0, 0, 0, 0}; // The outside edge is just a rectangle
    float innerRadii[] = {8, 8, 8, 8, 8, 8, 8, 8}; // The inside edge is rounded
    RoundRectShape roundRect = new RoundRectShape(outerRadii, new RectF(5,5,5,5), innerRadii); // We'll stick this shape into the frame we made

    roundRect.resize(frame.width()+1, frame.height()+1); // Adjust size to match the punched-out frame 
    canvas.save();
    canvas.translate(frame.left, frame.top); // The RoundRectShape draws to the canvas at (0,0), so we need to offset the canvas, draw, then restore
    roundRect.draw(canvas, paint);
    canvas.restore();

:

http://i.stack.imgur.com/4qdTw.png