在视图上绘制折线时坐标比例不正确

Question

我想在view 上画一个polyline。我不想在MapView 上画它，因为我只想要没有任何背景的polyline。

我有polyline 坐标，也有它的边界（东北和西南坐标）。

这个想法是创建一个自定义view 并在那里绘制路径。我相信我遇到的问题是规模。我可以将LatLng 坐标转换为x 和y 坐标，但是view 上显示的折线太小。 view 设置为 64dp 的宽度和高度。

这是我正在做的事情：

public PolylineView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    polylineSize = (int) context.getResources().getDimension(R.dimen.polyline_size);
    setupAttributes(attrs);
}

private void setupAttributes(AttributeSet attrs) {
    // Obtain a typed array of attributes
    TypedArray a = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.PolylineView, 0, 0);
    // Extract custom attributes into member variables
    try {
        polylineColor = a.getColor(R.styleable.PolylineView_polylineColor, Color.BLACK);

    } finally {
        // TypedArray objects are shared and must be recycled.
        a.recycle();
    }

    polyline = new Paint(Paint.ANTI_ALIAS_FLAG);
    polyline.setAntiAlias(true);
    polyline.setStyle(Paint.Style.STROKE);
    polyline.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
    polyline.setStrokeCap(Paint.Cap.ROUND);
    polyline.setColor(polylineColor);

    path = new Path();
    smp = new SphericalMercatorProjection(polylineSize);
}

@Override protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    point = smp.toPoint(polylineCoordinates.get(0));

    path.moveTo((float) (point.x * scale), (float) (point.y * scale));

    for (int i = 1; i < polylineCoordinates.size(); i++) {
        point = smp.toPoint(polylineCoordinates.get(i));

        path.lineTo((float) (point.x * scale), (float) (point.y * scale));
    }

    canvas.drawPath(path, polyline);
}

public void setPolyline(List<LatLng> polylineCoordinates, RealmLatLngBounds polylineBounds) {
    this.polylineBounds = polylineBounds;
    this.polylineCoordinates = polylineCoordinates;

    //Find the scale
    Point northeast = smp.toPoint(polylineBounds.getNortheast());
    Point southwest = smp.toPoint(polylineBounds.getSouthwest());
    scale = polylineSize / Math.max(Math.max(northeast.x, southwest.x), Math.max(northeast.y, southwest.y));

    invalidate();
    requestLayout();
}

之后我可以转换polyline 坐标以便使用view 的完整大小吗？

编辑：

我可以看到的问题之一是在转换为x 和y 时，值是两个接近（精度）

Answer 1

在@pskink 的帮助下，我成功实现了这一目标

private int polylineSize;
private Paint polyline;
private SphericalMercatorProjection smp;


PointF northeast;
PointF[] points;
PointF southwest;

Path originalPath;
Path transformedPath;


public PolylineView(Context context) {
    super(context);
}

public PolylineView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    polylineSize = (int) context.getResources().getDimension(R.dimen.polyline_size);
    setupAttributes(attrs);
}

public PolylineView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    polylineSize = (int) context.getResources().getDimension(R.dimen.polyline_size);
    setupAttributes(attrs);
}

private void setupAttributes(AttributeSet attrs) {
    // Obtain a typed array of attributes
    TypedArray a = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.PolylineView, 0, 0);
    // Extract custom attributes into member variables
    int polylineColor;
    try {
        polylineColor = a.getColor(R.styleable.PolylineView_polylineColor, Color.BLACK);

    } finally {
        // TypedArray objects are shared and must be recycled.
        a.recycle();
    }

    polyline = new Paint(Paint.ANTI_ALIAS_FLAG);
    polyline.setAntiAlias(true);
    polyline.setStyle(Paint.Style.STROKE);
    polyline.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
    polyline.setStrokeCap(Paint.Cap.ROUND);
    polyline.setColor(polylineColor);

    smp = new SphericalMercatorProjection(polylineSize);

}

public void setPolylineData(List<LatLng> polylineCoordinates, RealmLatLngBounds polylineBounds) {

    originalPath = new Path();
    transformedPath = new Path();

    Point point = smp.toPoint(polylineBounds.getNortheast());
    northeast = new PointF((float) point.x, (float) point.y);

    point = smp.toPoint(polylineBounds.getSouthwest());
    southwest = new PointF((float) point.x, (float) point.y);

    points = new PointF[polylineCoordinates.size()];

    for (int i = 0; i < polylineCoordinates.size(); i++) {
        point = smp.toPoint(polylineCoordinates.get(i));
        points[i] = new PointF((float) point.x, (float) point.y);
    }

    originalPath.moveTo(points[0].x, points[0].y);

    for (PointF p : points) {
        originalPath.lineTo(p.x, p.y);
    }

    RectF src = new RectF(southwest.x, northeast.y, northeast.x, southwest.y);
    RectF dst = new RectF(0, 0, polylineSize, polylineSize);
    Matrix matrix = new Matrix();
    matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
    originalPath.transform(matrix, transformedPath);

    invalidate();
    requestLayout();
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawPath(transformedPath, polyline);
}

此视图用于RecyclerView，数据设置在onBindViewHolder上