1

円の外輪にドットを表示する際に問題が発生しています。円の端の 1 つにドットを配置すると、ドットが半分にカットされます。スクリーンショット: https://drive.google.com/file/d/0B9BaYaKRY3v3Y2hXYkpSOE1nY28/edit?usp=sharing

円の半径を少し小さくしたいだけなので、外側のドットにスペースがある場所にスペースができます。もちろん、円はビューの真ん中にとどまる必要があります。これを行う方法に関するヒントは非常に高く評価されています。

作業中のコードブローは、ドットが切り取られているという事実を受け入れて完全に機能しています。(2 色の円の作成を手伝ってくれた @Sherif elKhatib に感謝)

public class PercentView extends View {

public PercentView(Context context) {
    super(context);
    init();
}

public PercentView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public PercentView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

private void init() {
    paint = new Paint();
    paint.setColor(Color.parseColor("#3498db"));
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);
    bgpaint = new Paint();
    bgpaint.setColor(Color.parseColor("#2980b9"));
    bgpaint.setAntiAlias(true);
    bgpaint.setStyle(Paint.Style.FILL);
    rect = new RectF();
    circlePaint = new Paint();
}

Paint paint;
Paint bgpaint;
RectF rect;
float percentage = 5;
Paint circlePaint;
float[] dots = new float[1000];
int dotsNum = -1;
String[] colorCode = new String[1000];

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // draw background circle anyway
    canvas.drawArc(rect, -90, 360, true, bgpaint);
    if (percentage != 0) {
        int left = 0;
        int width = getWidth();
        int top = 0;
        rect.set(left, top, left + width, top + width);
        canvas.drawArc(rect, -90, (float) (3.6 * percentage), true, paint);

        for (int i = 0; i <= dotsNum; i++) {
            circlePaint.setAntiAlias(true);
            circlePaint.setColor(Color.parseColor(colorCode[i]));
            circlePaint.setStyle(Paint.Style.FILL);
            float dotX = (float) (this.getWidth() / 2 + this.getWidth() / 2
                    * Math.cos((dots[i] * 3.6 - 90) * Math.PI / 180));
            float dotY = (float) (this.getHeight() / 2 + this.getWidth()
                    / 2 * Math.sin((dots[i] * 3.6 - 90) * Math.PI / 180));
            canvas.drawCircle(dotX, dotY, 30, circlePaint);
        }
    }
}

public void setPercentage(float inpercentage) {
    this.percentage = inpercentage;
    invalidate();
}

public void setDot(int type) {
    dotsNum++;

    switch (type) {
    case 0: 
        colorCode[dotsNum] = "#27ae60";
        break;
    case 1: 
        colorCode[dotsNum] = "#f1c40f";
        break;
    case 2: 
        colorCode[dotsNum] = "#e74c3c";
        break;
    case 3: 
        colorCode[dotsNum] = "#34495e";
        break;
    }

    dots[dotsNum] = percentage;
    invalidate();
}

}

4

1 に答える 1