1

我正在为 MapView 顶部的路线实现自定义路径效果，我想出了如何使路径的开始和结束变得圆滑的问题（就像这样Paint.setStrokeCap(Cap.ROUND)做）。看截图 - 黑线 - 是我想在最后绕行的路线

以下是我实现自定义 PathEffect 的方式：

public RouteOverlay(Context context)
{
    mContext = context;

    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(COLOR_DEFAULT);
    mPaint.setAntiAlias(true);
    mPaint.setStrokeCap(Cap.ROUND); // this one does not work...
    mPaint.setStrokeJoin(Join.ROUND);
    PathEffect e1 = new PathDashPathEffect(createRouteLineStyle(), 10, 3, PathDashPathEffect.Style.MORPH);
    PathEffect e2 = new CornerPathEffect(10);
    mPaint.setPathEffect(new ComposePathEffect(e1, e2));
}

private Path createRouteLineStyle() 
{
    Path p = new Path();
    p.moveTo(-5, ROUTE_LINE_WIDTH/2);
    p.lineTo(5,ROUTE_LINE_WIDTH/2);
    p.lineTo(5,ROUTE_LINE_WIDTH/2-currentThickness);
    p.lineTo(-5, ROUTE_LINE_WIDTH/2-currentThickness);
    p.close();
    p.moveTo(-5, -(ROUTE_LINE_WIDTH/2));
    p.lineTo(5,-(ROUTE_LINE_WIDTH/2));
    p.lineTo(5, -(ROUTE_LINE_WIDTH/2-currentThickness));
    p.lineTo(-5, -(ROUTE_LINE_WIDTH/2-currentThickness));
    return p;
}

@Override
public void draw(Canvas canvas, final MapView mapView, boolean shadow)
{
    if(shadow) return;

    if(mDrawEnabled)
    {
        synchronized(mPoints)
        {
            canvas.drawPath(mPath, mPaint);
        }
    }
}

正如您在屏幕截图中看到的那样，该行的结尾不是四舍五入的（以及开头......）。setStrokeCap(Cap.ROUND)没有帮助。

所以问题是 - 如何在我的自定义路径中添加圆帽？我正在考虑使用addArc()或addCircle()结束我的路径（和开始），但这似乎不正确。

我需要自定义路径效果的原因 - 是我需要围绕实际道路绘制路线 - 所以路线内部应该是空的并且有内部和外部笔划线。

如果有人知道如何以其他方式制作这种路径效果 - 请告诉我，因为这个解决方案有很大的缺点我必须处理..

无行程帽

4

2 回答 2

2

我设法为我的问题找到了解决方案。所以我摆脱了我的自定义路径效果并开始使用通常的笔画（笔画帽按预期工作）。所以我基本上画了我的路径2次：首先我画黑线，然后我画更细的透明线以清除之前黑线的中心。

这种方法的唯一技巧是我需要在单独的位图中绘制我的路径（使用临时画布），并且当路径位图准备好时 - 将其渲染到主画布。

@Override
public void draw(Canvas canvas, final MapView mapView, boolean shadow)
{
    //Generate new bitmap if old bitmap doesn't equal to the screen size (f.i. when screen orientation changes)
    if(pathBitmap == null || pathBitmap.isRecycled() || pathBitmap.getWidth()!=canvas.getWidth() || pathBitmap.getHeight()!=canvas.getHeight())
    {
        if(pathBitmap != null)
        {        
            pathBitmap.recycle();
        }
        pathBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Config.ARGB_8888);
        tempCanvas.setBitmap(pathBitmap);
    }

    //Render routes to the temporary bitmap
    renderPathBitmap();

    //Render temporary bitmap onto main canvas
    canvas.drawBitmap(pathBitmap, 0, 0, null);
    }
}

private void renderPath(Path path, Canvas canvas)
{
    routePaint.setStrokeWidth(ROUTE_LINE_WIDTH);
    routePaint.setColor(OUTER_COLOR);
    routePaint.setXfermode(null);

    canvas.drawPath(path, routePaint); //render outer line

    routePaint.setStrokeWidth(ROUTE_LINE_WIDTH/1.7f);
    routePaint.setColor(Color.TRANSPARENT);
    routePaint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));

    canvas.drawPath(path, routePaint); //render inner line
}

所以结果看起来像：

在此处输入图像描述

于 2012-08-16T18:06:57.163 回答
2

除非您遇到此处提到的问题http://code.google.com/p/android/issues/detail?id=24873，否则我看不出有任何理由不这样做。

于 2012-08-01T02:25:50.523 回答