Нарисовать четверть калибра с помощью холста в Android?

Как я могу создать такой же датчик? для этого типа датчика существует какая-либо библиотека или maven? Я использую холст для круглого датчика, но я не могу создать его

 RectF oval = getOval(canvas, 1);
    RectF oval2 = getOval(canvas, 1.1f);

    Paint paint = new Paint();
    paint.setColor(Color.DKGRAY);

    canvas.drawArc(oval2, 180, 90, true, paint);
    canvas.drawArc(oval, 180, 90, true, backgroundPaint);

    RectF innerOval = getOval(canvas, 0.9f);
    canvas.drawArc(innerOval, 180, 90, true, backgroundInnerPaint);

<GaugeView
        android:id="@+id/gauge"
        android:layout_width="@dimen/panel_gauge_height"
        android:layout_height="@dimen/panel_gauge_width"
        app:divisions="8"
        app:scaleEndValue="8"
        app:scaleStartAngle="50"
        app:scaleStartValue="0"
        app:showNeedle="true"
        app:subdivisions="2" />

введите здесь описание изображения


android java android-canvas gauge
person Saeed Hashemi    schedule 08.11.2015    source источник

Ответы (1)


arrow_upward
9
arrow_downward

  1. Вы можете просто погуглить, чтобы найти кучу GagueViews. Я думаю, ты это уже сделал.

  2. Это кажется простым. Таким образом, вы можете написать свой собственный View. Вы можете использовать drawArc, чтобы нарисовать 3 дуги разных цветов. Вы можете использовать drawLine для рисования точек измерения (только не забудьте установить Paint.setStrokeCap(Cap.Round)). Что касается иглы, вы можете использовать drawPath. Приложив некоторые усилия и используя правильные координаты, вы сможете сами написать изящный GaugeView.

  3. Если вам сложно написать собственное представление, вы можете сослаться на некоторые GaugeView в разделе GitHub. Вы получите хорошую отправную точку.

ОБНОВЛЕНИЕ: я написал простой GaugeView на основе изображения в вашем вопросе. Вычисления выполняются в пикселях, вы можете умножить их на DisplayMetrics.density, чтобы они были в независимых пикселях. Кроме того, вы можете захотеть показать большинство значений здесь через xml, чтобы вы могли управлять ими в макете. Это может быть хорошей отправной точкой.

public class GaugeView extends View {

    private Paint arcPaint;

    public GaugeView(Context context) {
        super(context);
        initialize();
    }

    public GaugeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initialize();
    }

    public GaugeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initialize();
    }

    private void initialize() {
        arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(15f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int width = canvas.getWidth();
        int height = canvas.getHeight();

        int arcCenterX = width - 10;
        int arcCenterY = height - 10;

        final RectF arcBounds = new RectF(arcCenterX - 100, arcCenterY - 100, arcCenterX + 100, arcCenterY + 100);


        // Draw the arc
        canvas.drawArc(arcBounds, 180f, 20f, false, arcPaint);
        arcPaint.setColor(Color.DKGRAY);
        canvas.drawArc(arcBounds, 200f, 40f, false, arcPaint);
        arcPaint.setColor(Color.GRAY);
        canvas.drawArc(arcBounds, 2400f, 30f, false, arcPaint);

        // Draw the pointers
        final int totalNoOfPointers = 20;
        final int pointerMaxHeight = 25;
        final int pointerMinHeight = 15;

        int startX = arcCenterX - 120;
        int startY = arcCenterY;
        arcPaint.setStrokeWidth(5f);
        arcPaint.setStrokeCap(Paint.Cap.ROUND);

        int pointerHeight;
        for (int i = 0; i <= totalNoOfPointers; i++) {
            if(i%5 == 0){
                pointerHeight = pointerMaxHeight;
            }else{
                pointerHeight = pointerMinHeight;
            }
            canvas.drawLine(startX, startY, startX - pointerHeight, startY, arcPaint);
            canvas.rotate(90f/totalNoOfPointers, arcCenterX, arcCenterY);
        }
    }
}


Окончательное обработанное изображение выглядит следующим образом:
final GuageView

person Henry    schedule 09.11.2015
comment
Это очень хорошо, большое спасибо - person Saeed Hashemi; 10.11.2015
comment
Для иглы вы можете вдохновиться кодом указателей (нарисовать и повернуть линию) и нарисовать ее другим цветом и длиной. - person Nutriz; 23.01.2019