I want to draw rectangle at center of a view like this image .For this I am using the following code
我想在这个图像的中心绘制矩形,为此我使用了以下代码
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);
}
}
How can i make complete transparent inside the rectangle and poor transparent at the outer region?
我怎样才能使矩形内部完全透明,外部区域的透明度较差?
3 个解决方案
#1
11
Just use
只使用
innerPaint.setStyle(Paint.Style.STROKE);
instead of
而不是
innerPaint.setStyle(Paint.Style.FILL);
#2
2
Use Path
and add two Rect
s into it, one for the full View area and one for the “selection”. Set Path fillType to EVEN_ODD. Now fill that with half-transparent color.
使用路径并在其中添加两个矩形,一个用于完整视图区域,一个用于“选择”。设置路径填充类型为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);
Note that for better performance you should not create Paints and Paths in onPaint(). I suggest onSizeChanged() is better for that.
注意,为了获得更好的性能,不应该在onPaint()中创建颜料和路径。我建议onsizechange()更好。
#3
1
I separated the image in 5 rectangles. The main one is the complete transparent one, that's in the middle of the figure. The other 4 will be semi-transparent.
我把图像分成5个矩形。最主要的是完全透明的,在图的中间。另外4个将是半透明的。
After that, inside onDraw(Canvas canvas) I painted over the 4 rectangles with a semi-transparent color.
之后,在onDraw(画布)内,我用半透明的颜色在四个矩形上作画。
Here's the code I used.
这是我用过的代码。
//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);
}
That may work for you. Also, you didn't ask for the borders, but on your code snippet I saw that you called canvas.drawRect(drawRect, borderPaint); witch makes me believe you also want to draw them, so I'll paste here the code I used to draw the borders:
这可能对你有用。另外,您并没有要求边界,但是在您的代码片段中,我看到您调用了canvas。绘制矩形(绘制矩形,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);
#1
11
Just use
只使用
innerPaint.setStyle(Paint.Style.STROKE);
instead of
而不是
innerPaint.setStyle(Paint.Style.FILL);
#2
2
Use Path
and add two Rect
s into it, one for the full View area and one for the “selection”. Set Path fillType to EVEN_ODD. Now fill that with half-transparent color.
使用路径并在其中添加两个矩形,一个用于完整视图区域,一个用于“选择”。设置路径填充类型为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);
Note that for better performance you should not create Paints and Paths in onPaint(). I suggest onSizeChanged() is better for that.
注意,为了获得更好的性能,不应该在onPaint()中创建颜料和路径。我建议onsizechange()更好。
#3
1
I separated the image in 5 rectangles. The main one is the complete transparent one, that's in the middle of the figure. The other 4 will be semi-transparent.
我把图像分成5个矩形。最主要的是完全透明的,在图的中间。另外4个将是半透明的。
After that, inside onDraw(Canvas canvas) I painted over the 4 rectangles with a semi-transparent color.
之后,在onDraw(画布)内,我用半透明的颜色在四个矩形上作画。
Here's the code I used.
这是我用过的代码。
//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);
}
That may work for you. Also, you didn't ask for the borders, but on your code snippet I saw that you called canvas.drawRect(drawRect, borderPaint); witch makes me believe you also want to draw them, so I'll paste here the code I used to draw the borders:
这可能对你有用。另外,您并没有要求边界,但是在您的代码片段中,我看到您调用了canvas。绘制矩形(绘制矩形,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);