我怎样才能在 canvas android 中绘制这个 [暂停]

Question

我正在尝试绘制这个数字，但我无法绘制它。

我不想使用任何库。 只想在canvas android中画图。

考虑 - 圆心是屏幕的中心，即 canvas.translate(centerX, centerY)

更新：

@Override
    protected void onDraw(Canvas canvas) {
        radius = dip2px(getContext(), 150);//252
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        for (int i = -35; i <= 215; i += 1) {
            drawOuterLine(i, canvas);
        }
        canvas.restore();
    }

    private void drawOuterLine(int i, Canvas canvas) {
        Paint paint2 = new Paint();
        paint2.setAntiAlias(true);
        paint2.setColor(getResources().getColor(R.color.ruler_white));
        paint2.setStrokeWidth(dip2px(getContext(), 1));

        Coordinate coordinate = getCoordinate(radius, i);
        Coordinate coordinate1;
        float x = coordinate.getX();
        float y = coordinate.getY();
        float r;
        if (i == -35 || i == -11 || i == 15 || i == 39 || i == 65 || i == 89 || i == 115 || i == 139 || i == 165 || i == 189 || i == 215) {
            r = radius - padding;
            coordinate1 = getCoordinate(r, i);
            float x1 = coordinate1.getX();
            float y1 = coordinate1.getY();
            canvas.drawLine(-x1, -y1, -x, -y, paint2);
            String text = String.valueOf(showDegree[showDegreeCounter]);
            if (showDegreeCounter<10) showDegreeCounter++;
            Path path = getTextPath(text, mOutDegreePaint, i, radius
                    - padding - fontSize * 5 / 4);
            canvas.drawTextOnPath(text, path, 0, 0, mOutDegreePaint);
        } else if (i % 2 != 0) {
            r = radius - padding * 3 / 5;
            coordinate1 = getCoordinate(r, i);
            float x1 = coordinate1.getX();
            float y1 = coordinate1.getY();
            canvas.drawLine(-x1, -y1, -x, -y, paint2);
        }
    }

这是我实现的快照，但问题是这些度数也在旋转，我不希望这样。 请帮我解决一下这个。

Answer 1

这是一个综合性问题，但我可以解释如何实现仪表标记。

使用Canvas.drawArc()和PathDashPathEffect的组合，我们可以实现标记。 我们将使用弧线作为当前速度，使用弧线作为剩余速度。

我们为代表速度计的圆圈中的总度数定义一个值。 在那幅图中，它看起来总共有大约 270 度可用。

float totalDegrees = 270.0f

计算当前速度代表的总速度的百分比并将其分配给浮点变量。

    float currentSpeed = 20;
    float maximumSpeed = 100;
    float currentSpeedPercent = currentSpeed/maximumSpeed;

将此值乘以可用的总度数以获得第一条弧的扫角。 所以第一条弧的起始角为 0，而后掠角就是我们刚刚计算的。

     float sweepAngleCurrentSpeed = currentSpeedPercent * totalDegrees;
    float startAngleCurrentSpeed = 235.0f; // 235 degrees is based on starting the // speedometer at the angle shown in the drawing.

现在我们知道了第一条弧线，我们可以轻松地为剩余速度创建弧线。 该弧的起始角度将等于第一个弧的扫角，并且扫角将等于 270（可用总度数） - startAngle。

float startAngleRemainingSpeed = startAngleCurrentSpeed + sweepAngleCurrentSpeed;
    float sweepAngleRemainingSpeed = totalDegrees - sweepAngleCurrentSpeed;

创建用于绘制刻度线的Paint object。

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE); // style must be set to STROKE in order to do tick
// mark dashes
paint.setPathEffect(new DashPathEffect(new float[] {10,20}, 0)); // Represents the dashes

定义我们要在其中绘制速度计的边界。让我们以 100 X 100 矩形为例。

RectF bounds = new RectF(0,0,100,100);

为当前速度的刻度线设置颜色。

paint.setColor(Color.YELLOW);

绘制当前速度的圆弧：

canvas.drawArc(bounds, startAngleCurrentSpeed, sweepAngleCurrentSpeed, true, paint);

设置剩余速度刻度线的颜色。

paint.setColor(Color.GRAY);

画出剩余速度的圆弧：

canvas.drawArc(bounds, startAngleRemainingSpeed, sweepAngleRemainingSpeed, true, paint);

这将绘制一个基本的未标记速度计。 使用基于矩形边界的数学。 您可以确定 position 在哪里打勾。 或者你可以使用``` canvas.rotate()/canvas.translate()

to assist in placing the speed labels.