安卓 M : Canvas strokeWidth and strokeStyle issue while drawing arcs

Question

对于以下自定义 View :如果笔划宽度为 0.01，则在 Android M 和 pre-M 设备中(例如: Lollipop )

但是，如果笔划宽度为 0.0f，则在 Android M 和 pre-M 设备中(例如: Lollipop )

是否应该考虑 Android M 中笔划宽度的变化？Stroke style 和 stroke width 之间是否存在依赖关系？

XML 布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <com.example.testspeedtestgui.TestView
                    android:id="@+id/testView1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentEnd="true" 
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp" 
                    />

</RelativeLayout>

实现speedometer.java的代码如下所示:

package com.example.testspeedtestgui;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

public class TestView extends View {

    private Paint outerLogoPaint;
    private Paint centerOuterPaint;
    private Path outerLogoEdge;


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

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

    public TestView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }
    private void init(Context context) {
        if(Build.VERSION.SDK_INT >= 11){
            this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }
        initDrawingTools();

    }

    private void initDrawingTools() {

        float strokeWidth=0.01f;
        centerOuterPaint=new Paint();
        centerOuterPaint.setAntiAlias(true);
        centerOuterPaint.setColor(Color.BLUE);
        centerOuterPaint.setStrokeWidth(strokeWidth);
        centerOuterPaint.setStrokeCap(Paint.Cap.ROUND);
        centerOuterPaint.setStyle(Paint.Style.STROKE);

        RectF rect = new RectF();
        float angle = getSemicircle(0.025f,0.5f,0.975f,0.5f,rect);
        outerLogoEdge = new Path();
        outerLogoEdge.moveTo(0.025f, 0.495f);
        outerLogoEdge.arcTo(rect, angle, 180);
        outerLogoEdge.moveTo(0.025f, 0.495f);
        outerLogoEdge.lineTo(0.2f, 0.495f);
        //Edge surrounding the lower part of outer semi circle(Logo edge Init) Logo edge Init
        angle = getSemicircle(0.20f,0.5f,0.80f,0.5f,rect);
        outerLogoEdge.arcTo(rect, angle, 180);
        outerLogoEdge.moveTo(0.975f, 0.495f);
        outerLogoEdge.lineTo(0.8f, 0.495f);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        float scale = getWidth();
        canvas.save(Canvas.MATRIX_SAVE_FLAG);
        canvas.scale(scale, scale);
        drawLogo(canvas);
        canvas.restore();

    }

    private void drawLogo(Canvas canvas) {

        canvas.save(Canvas.MATRIX_SAVE_FLAG);
        canvas.drawPath(outerLogoEdge, centerOuterPaint);
        canvas.restore();
    }


    public float getSemicircle(float xStart, float yStart, float xEnd,
            float yEnd, RectF ovalRectOUT) {

        float centerX = xStart + ((xEnd - xStart) / 2);
        float centerY = yStart + ((yEnd - yStart) / 2);

        double xLen = (xEnd - xStart);
        double yLen = (yEnd - yStart);
        float radius = (float) (Math.sqrt(xLen * xLen + yLen * yLen) / 2);

        RectF oval = new RectF(centerX - radius,
                centerY - radius, centerX + radius,
                centerY + radius);

        ovalRectOUT.set(oval);

        double radStartAngle = 0;
        radStartAngle = Math.atan2(yStart - centerY, xStart - centerX);
        float startAngle = (float) Math.toDegrees(radStartAngle);

        return startAngle;

    }


}

从代码 TestView.java 来看，centerOuterPaint.setStrokeWidth(strokeWidth) 似乎是导致问题的原因。

这是我的应用程序模块的一部分，不适用于 Android M。在运行 Android 6.0 的 Nexus 5 上测试。

源代码位于 https://github.com/vyshas/SpeedometerTest

Answer 1

这里有几个问题:

1. 永远不要使用 canvas.save(Canvas.MATRIX_SAVE_FLAG); 而只是使用 canvas.save()。

Note: if possible, use the parameter-less save(). It is simpler and faster than individually disabling the saving of matrix or clip with this method.

1. 您正在 (0...1) 范围内绘制微观级别的所有内容。然后你将它放大近一百倍。这是不好的。 canvas.scale() 不应以这种方式使用。而是尝试以正常比例绘制元素本身。

   您可以使用 canvas.getHeight() 和 canvas.getWidth() 获取高度和宽度 你的观点。根据这个细节，绘制圆弧和线。