我有一个自定义视图(圆圈),部分填充拱(红色)。这是https://gyazo.com/72e19cb97fd9f2adac2259c3855cf136的照片。
我想将自定义视图划分为多个部分,当单击按钮时,我绘制一个拱形。 1点击1/5覆盖拱形,第二次点击2/5等...直到5。
当我按下增量按钮时,如何用红色拱形填充我的视图?(我不了解绘图部分)
这是我已经尝试过的 - 我的CustomView类:
public class MySimpleView extends View {
private static final int PAINT_FLAGS = Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG;
private static final int STROKE_WIDTH = 40;
private static final int SECTIONS = 5;
private Paint basePaint, degreesPaint, centerPaint, rectPaint;
private RectF rect;
private int centerX, centerY, radius;
private int fullArchSliceLength;
private int colorArchLineLength;
public MySimpleView(Context context) {
super(context);
init();
}
public MySimpleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MySimpleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
rectPaint = new Paint(PAINT_FLAGS);
rectPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
rectPaint.setStyle(Paint.Style.FILL);
centerPaint = new Paint(PAINT_FLAGS);
centerPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
centerPaint.setStyle(Paint.Style.FILL);
basePaint = new Paint(PAINT_FLAGS);
basePaint.setStyle(Paint.Style.STROKE);
basePaint.setStrokeWidth(STROKE_WIDTH);
basePaint.setColor(ContextCompat.getColor(getContext(), R.color.darkGrey));
degreesPaint = new Paint(PAINT_FLAGS);
degreesPaint.setStyle(Paint.Style.STROKE);
degreesPaint.setStrokeCap(Paint.Cap.ROUND);
degreesPaint.setStrokeJoin(Paint.Join.ROUND);
degreesPaint.setStrokeWidth(STROKE_WIDTH);
degreesPaint.setColor(Color.RED);
fullArchSliceLength = 360 / SECTIONS;
colorArchLineLength = fullArchSliceLength - 2;
}
public void swapColor() {
degreesPaint.setColor(degreesPaint.getColor() == Color.RED ? Color.GREEN :
Color.RED);
postInvalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (rect == null) {
centerX = getMeasuredWidth() / 2;
centerY = getMeasuredHeight() / 2;
radius = Math.min(centerX, centerY);
int startTop = STROKE_WIDTH / 2;
int startLeft = STROKE_WIDTH / 2;
int endBottom = 2 * radius - startTop;
int endRight = 2 * radius - startTop;
rect = new RectF(startTop, startLeft, endRight, endBottom);
}
canvas.drawRect(rect, rectPaint);
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, basePaint);
// TODO: 2019-04-26 LOOK HERE
for (int i = 3; i < SECTIONS; i++) {
canvas.drawArc(rect, i * fullArchSliceLength,colorArchLineLength,
false, degreesPaint);
}
// TODO: 2019-04-26 LOOK HERE
// canvas.drawArc(rect, 0F, 90F, false, degreesPaint);
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, centerPaint);
}
}
public class MySimpleView extends View {
private static final int PAINT_FLAGS = Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG;
private static final int STROKE_WIDTH = 40;
private static final int SECTIONS = 5;
private Paint basePaint, degreesPaint, centerPaint, rectPaint;
private RectF rect;
private int centerX, centerY, radius;
private int fullArchSliceLength;
private int colorArchLineLength;
private int currentSections = 1;
public MySimpleView(Context context) {
super(context);
init();
}
public MySimpleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MySimpleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
rectPaint = new Paint(PAINT_FLAGS);
rectPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
rectPaint.setStyle(Paint.Style.FILL);
centerPaint = new Paint(PAINT_FLAGS);
centerPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
centerPaint.setStyle(Paint.Style.FILL);
basePaint = new Paint(PAINT_FLAGS);
basePaint.setStyle(Paint.Style.STROKE);
basePaint.setStrokeWidth(STROKE_WIDTH);
basePaint.setColor(ContextCompat.getColor(getContext(), android.R.color.darker_gray));
degreesPaint = new Paint(PAINT_FLAGS);
degreesPaint.setStyle(Paint.Style.STROKE);
degreesPaint.setStrokeCap(Paint.Cap.ROUND);
degreesPaint.setStrokeJoin(Paint.Join.ROUND);
degreesPaint.setStrokeWidth(STROKE_WIDTH);
degreesPaint.setColor(Color.RED);
fullArchSliceLength = 360 / SECTIONS;
colorArchLineLength = fullArchSliceLength - 2;
}
//just a simple increment function
public void increment() {
if (currentSections < SECTIONS) {
currentSections++;
postInvalidate();
}
}
public void swapColor() {
degreesPaint.setColor(degreesPaint.getColor() == Color.RED ? Color.GREEN :
Color.RED);
postInvalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (rect == null) {
centerX = getMeasuredWidth() / 2;
centerY = getMeasuredHeight() / 2;
radius = Math.min(centerX, centerY);
int startTop = STROKE_WIDTH / 2;
int startLeft = STROKE_WIDTH / 2;
int endBottom = 2 * radius - startTop;
int endRight = 2 * radius - startTop;
rect = new RectF(startTop, startLeft, endRight, endBottom);
}
canvas.drawRect(rect, rectPaint);
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, basePaint);
/*
startAngle is set to 270 so it will start at the top.
0 is right
90 bottom
180 left
270 top
*/
canvas.drawArc(rect, 270, currentSections * colorArchLineLength, false, degreesPaint);
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, centerPaint);
}
}
基本上你的逻辑有点不对劲。当调用drawArc
时,第一个参数将是你的行的startAngle
(意思是该行从圆的顶部,左侧,右侧,底部开始)。我在评论中写了每个学位对应的内容。 sweepAngle
是你绘制的度数(你已经正确计算过)。希望它能像你期望的那样工作!