畫布在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/