如何在画布android上绘制此[保留]

问题描述 投票:-1回答:1

我试图绘制此图,但无法绘制。

我不想使用任何库。只想在Android画布上绘制。enter image description here

考虑-圆心是屏幕的中心,即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);
        }
    }

这是我已完成的快速操作,但问题是这些度数也在旋转,我不希望那样。请帮助我。

java android canvas android-canvas
1个回答
1
投票

这是一个全面的问题,但我可以解释如何实现仪表标记。

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

我们在代表速度计的圆圈中定义了总度数的值。在该绘图中,似乎总共可以使用270度。

float totalDegrees = 270.0f

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

    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对象。

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);

这将绘制一个基本的未标记速度表。根据矩形的边界使用数学。您可以确定刻度线的位置。或者你可以使用```canvas.rotate()/ canvas.translate()

to assist in placing the speed labels.



© www.soinside.com 2019 - 2024. All rights reserved.