画布在android视图中水平绘制圆

Question

我正在尝试在视图中水平绘制4个圆。 但是问题是我只能看到3个半圈。 圆圈绘制不正确。 下面的代码有什么问题？

CircleView.java

public class CircleView extends View
{
    private int radius;
    private Paint blackPaint = new Paint();

    float eachDotWidth;
    float x = 0;
    float circleRadius;

    float width, height;

    public CircleView(Context context)
    {
        this(context, null);
    }

    public CircleView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        blackPaint.setStyle(Paint.Style.STROKE);
        blackPaint.setColor(Color.BLACK);
        blackPaint.setStrokeWidth(5f);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        super.onSizeChanged(w, h, oldw, oldh);
        calculateDimensions();
    }

    private void calculateDimensions()
    {

        width = getWidth() ;
        height = getHeight();

        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);

        width = getWidth();
        height = getHeight();

        eachDotWidth = getWidth()/5;
        circleRadius = getHeight()/2;

        canvas.drawColor(Color.WHITE);
        for(int i=0; i < 4; i++) {
            x=(i*eachDotWidth)-circleRadius;
            canvas.drawCircle(x, 2*circleRadius, circleRadius/2, blackPaint);
        }
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

FrameLayout circleLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    circleLayout = (FrameLayout) findViewById(R.id.circle_layout);

    CircleView circleView = new CircleView(this);

    circleLayout.addView(circleView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
}

}

请帮助我找到并解决问题。 谢谢。

Answer 1

您可以创建垂直圆：

    @Override
protected void onDraw(Canvas canvas)
{
    super.onDraw(canvas);

    width = getWidth();
    height = getHeight();

    eachDotWidth = getWidth()/8;
    circleRadius = getHeight()/2;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        x=(2*i*eachDotWidth)+eachDotWidth;
        canvas.drawCircle(x, eachDotWidth, eachDotWidth, blackPaint);
    }
}

您也可以创建水平圆：

   @Override
protected void onDraw(Canvas canvas)
{
    super.onDraw(canvas);

    width = getWidth();
    height = getHeight();

    eachDotWidth = getWidth()/8;
    circleRadius = getHeight()/8;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        x=(2*i*circleRadius)+circleRadius;
        canvas.drawCircle(circleRadius, x, circleRadius, blackPaint);
    }
}

您还可以创建对角圆（创建y变量）：

 @Override
protected void onDraw(Canvas canvas)
{
    super.onDraw(canvas);

    width = getWidth();
    height = getHeight();

    eachDotWidth = getWidth()/8;
    circleRadius = getHeight()/8;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        y=(2*i*circleRadius)+circleRadius;
        x=(2*i*eachDotWidth)+eachDotWidth;

        canvas.drawCircle(x, y, circleRadius, blackPaint);
    }
}

Answer 2

我认为您需要修改绘制圆圈的代码。 例如，我不知道为什么您对圆的半径和“点的宽度”有不同的值。 我建议您仅以每个圆（〜点）的半径进行计数，并在它们之间添加一些间距以增加宽度以满足您的需求。

尝试这样的操作（它在画布的宽度上以零坐标绘制四个相等的圆，但不考虑笔划的粗细）：

    // we want four equal circles across the whole width, so each circle's radius will be equal to 'width/(2*4)'
    circleRadius = width/8;
    // zero spacing for this example, but it can be defined
    int spacingPx = 0;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        // the x-coordinate of each circle's middle will be a circle's radius offset by the width of the circles previously drawn plus a single spacing width multiplied by the number of the circles already drawn 
        x=(i*2*circleRadius) + circleRadius + i*spacingPx;
        // we just simply pass the values – calculated x coordinate, y coordinate (here we want to have the circle's top at 0, so we need to set its middle y-coordinate to the value of its radius), the circle's radius and the Paint object that you already defined
        canvas.drawCircle(x, circleRadius, circleRadius, blackPaint);
    }

看起来像这样

如果您想根据自己的需要进行更多自定义，请指定您希望绘制圆的精确程度。

Answer 3

如果要绘制形状，可以使用Path和RectF更为灵活，可以看一下本教程： http ://raphaelfavero.github.io/Creating_Animated_Custom_View/