如何在 Android 中创建圆弧
How to create a Arc in Android
我想做一个像照片中这样的小尺寸弧形:仔细看照片,发现边框是黑色,中间有白色,如何设计:
这是我的尝试,但没有得到这样的视图:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int mX=200,mY=200;
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(50);
// Setting the color of the circle
mPaint.setColor(Color.BLUE);
// Draw the circle at (x,y) with radius 250
int radius = 150;
canvas.drawCircle(mX, mY, radius, mPaint);
mPaint.setColor(Color.WHITE);
mPaint.setDither(true); // set the dither to true
mPaint.setStyle(Paint.Style.STROKE); // set to STOKE
mPaint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want
mPaint.setStrokeCap(Paint.Cap.ROUND); // set the paint cap to round too
mPaint.setPathEffect(new CornerPathEffect(50) ); // set the path effect when they join.
mPaint.setAntiAlias(true);
RectF oval = new RectF(mX - radius, mY - radius, mX + radius, mY + radius);
// canvas.drawArc(oval, 180, 0, false, mPaint);
// mPaint.setColor(Color.RED);
canvas.drawArc(oval, -180, 90, false, mPaint);
// Redraw the canvas
invalidate();
}
这是我得到的当前图像:
My o/p image with this code
我重用了你以前版本的代码,通过在第一个代码中简单地画出更细的笔划来实现这一点
https://i.imgur.com/2EwelfV.png
private void init()
{
mStrokePaintOuter = new Paint(Paint.ANTI_ALIAS_FLAG);
mStrokePaintOuter.setStyle(Paint.Style.STROKE);
mStrokePaintOuter.setStrokeWidth(STROKE_WIDTH);
mStrokePaintOuter.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
mStrokePaintInner = new Paint(Paint.ANTI_ALIAS_FLAG);
mStrokePaintInner.setStyle(Paint.Style.STROKE);
mStrokePaintInner.setStrokeWidth(STROKE_WIDTH - 10);
mStrokePaintInner.setColor(ContextCompat.getColor(getContext(), android.R.color.white));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerX = 0;
int centerY = 0;
int radius = 0;
if (mRect == null)
{
centerX = getMeasuredWidth()/ 2;
centerY = getMeasuredHeight()/ 2;
radius = Math.min(centerX,centerY);
int startTop = (int) (STROKE_WIDTH / 2);
int startLeft = startTop;
int endBottom = 2 * radius - startTop;
int endRight = endBottom;
mRect = new RectF(startTop, startLeft, endRight, endBottom);
}
canvas.drawArc(mRect, 192, 258, false, mStrokePaintOuter);
canvas.drawArc(mRect, 193, 256, false, mStrokePaintInner);
}
我想做一个像照片中这样的小尺寸弧形:仔细看照片,发现边框是黑色,中间有白色,如何设计:
这是我的尝试,但没有得到这样的视图:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int mX=200,mY=200;
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(50);
// Setting the color of the circle
mPaint.setColor(Color.BLUE);
// Draw the circle at (x,y) with radius 250
int radius = 150;
canvas.drawCircle(mX, mY, radius, mPaint);
mPaint.setColor(Color.WHITE);
mPaint.setDither(true); // set the dither to true
mPaint.setStyle(Paint.Style.STROKE); // set to STOKE
mPaint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want
mPaint.setStrokeCap(Paint.Cap.ROUND); // set the paint cap to round too
mPaint.setPathEffect(new CornerPathEffect(50) ); // set the path effect when they join.
mPaint.setAntiAlias(true);
RectF oval = new RectF(mX - radius, mY - radius, mX + radius, mY + radius);
// canvas.drawArc(oval, 180, 0, false, mPaint);
// mPaint.setColor(Color.RED);
canvas.drawArc(oval, -180, 90, false, mPaint);
// Redraw the canvas
invalidate();
}
这是我得到的当前图像: My o/p image with this code
我重用了你以前版本的代码,通过在第一个代码中简单地画出更细的笔划来实现这一点 https://i.imgur.com/2EwelfV.png
private void init()
{
mStrokePaintOuter = new Paint(Paint.ANTI_ALIAS_FLAG);
mStrokePaintOuter.setStyle(Paint.Style.STROKE);
mStrokePaintOuter.setStrokeWidth(STROKE_WIDTH);
mStrokePaintOuter.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
mStrokePaintInner = new Paint(Paint.ANTI_ALIAS_FLAG);
mStrokePaintInner.setStyle(Paint.Style.STROKE);
mStrokePaintInner.setStrokeWidth(STROKE_WIDTH - 10);
mStrokePaintInner.setColor(ContextCompat.getColor(getContext(), android.R.color.white));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerX = 0;
int centerY = 0;
int radius = 0;
if (mRect == null)
{
centerX = getMeasuredWidth()/ 2;
centerY = getMeasuredHeight()/ 2;
radius = Math.min(centerX,centerY);
int startTop = (int) (STROKE_WIDTH / 2);
int startLeft = startTop;
int endBottom = 2 * radius - startTop;
int endRight = endBottom;
mRect = new RectF(startTop, startLeft, endRight, endBottom);
}
canvas.drawArc(mRect, 192, 258, false, mStrokePaintOuter);
canvas.drawArc(mRect, 193, 256, false, mStrokePaintInner);
}