如何绘制具有透明内部区域的矩形

Question

我想在像这张图片这样的视图的中心画矩形。为此，我使用以下代码

public class TransparentView extends View {

    public TransparentView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    public TransparentView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public TransparentView(Context context) {
        super(context);
    }
    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        canvas.drawColor(Color.parseColor("#60000000"));
        Paint borderPaint = new Paint();
        borderPaint.setARGB(255, 255, 128, 0);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(4);
        Paint innerPaint = new Paint();
        innerPaint.setARGB(0, 0, 0, 0);
        innerPaint.setAlpha(0);
        innerPaint.setStyle(Paint.Style.FILL);
        RectF drawRect = new RectF();
        drawRect.set(100, 100, 100,100);
        canvas.drawRect(drawRect, innerPaint);
        canvas.drawRect(drawRect, borderPaint);
    }
}

如何使矩形内部完全透明，使外部区域透明性差？

Answer 1

只需使用

innerPaint.setStyle(Paint.Style.STROKE);

而不是

innerPaint.setStyle(Paint.Style.FILL);

Answer 2

使用Path并向其中添加两个Rect，一个用于完整视图区域，一个用于"选择"。将路径填充类型设置为EVEN_ODD。现在用半透明的颜色填充它。

Path outerPath = new Path();
// add rect covering the whole view area
outerPath.addRect(0, 0, getWidth(), getHeight(), Path.Direction.CW);
// add "selection" rect;
RectF inner = new RectF(left, top, right, bottom);
outerPath.addRect(inner, Path.Direction.CW);
// set the fill rule so inner area will not be painted
outerPath.setFillType(Path.FillType.EVEN_ODD);
// set up paints
Paint outerPaint = new Paint();
outerPaint.setColor(0x60000000);
Paint borderPaint = new Paint();
borderPaint.setARGB(255, 255, 128, 0);
borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setStrokeWidth(4);
// draw
canvas.drawPath(outerPath, outerPaint);
canvas.drawRect(inner, borderPaint);

请注意，为了获得更好的性能，您不应该在 onPaint（） 中创建画图和路径。我建议 onSizeChanged（） 对此更好。

Answer 3

我将图像分成 5 个矩形。主要的是完全透明的，在图形的中间。其他 4 个将是半透明的。

之后，在onDraw（画布画布）中，我用半透明的颜色在4个矩形上绘制。

这是我使用的代码。

//On constructor:
float x1,x2,y1,y2;
x1 = (screenWidth - squareSize)/2;
x2 = x1 + squareSize;
y1 = (screenHeight - squareSize)/2;
y2 = y1 + squareSize;
rect = new RectF(x1, y1, x2, y2);
dark = new RectF[]{
        new RectF(0, 0, screenWidth, y1),
        new RectF(0, y1, x1, y2),
        new RectF(x2, y1, screenWidth, y2),
        new RectF(0, y2, screenWidth, screenHeight)
};
semitransparentPaint = new Paint();
semitransparentPaint.setColor(Color.BLACK);
semitransparentPaint.setAlpha((int) (256 * (1-TRANSPARENCY)));

//Inside onDraw(Canvas canvas)
for(RectF r : dark){
    canvas.drawRect(r, semitransparentPaint);
}

这可能对你有用。另外，你没有要求边框，但是在你的代码片段上，我看到你叫canvas.drawRect（drawRect，borderPaint）;女巫让我相信你也想画它们，所以我将我用来画边框的代码粘贴在这里：

//Inside onDraw(Canvas canvas)
canvas.drawLines(new float[]{
    rect.left, rect.top, rect.right, rect.top, 
    rect.right, rect.top, rect.right, rect.bottom,
    rect.right, rect.bottom, rect.left, rect.bottom,
    rect.left, rect.bottom, rect.left, rect.top}
    , 0, 16, squareBorderPaint);

Answer 4

您可以使用 Paint 的setXfermode()并将PorterDuff.Mode.ADD和PorterDuff.Mode.ADD作为参数传递，以获得内部透明区域。

我在下面提到了一个例子，它在另一个矩形中包含一个透明矩形，它显示了如何在Android中实现它。

    Paint outerPaint = new Paint();
    outerPaint.setColor(0x7f0600a6); // mention any background color 
    outerPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.ADD));
    outerPaint.setAntiAlias(true);
    Paint innerPaint = new Paint();
    innerPaint.setColor(Color.TRANSPARENT);
    innerPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    innerPaint.setAntiAlias(true);
    canvas.drawRect(0.0F, 0.0F, width, height, outerPaint);
    canvas.drawRect(150F, 150F, innerWidth, innerHeight, innerPaint);

请注意：您可以根据需要更改drawRect()范围内的值。