如何绘制带边框的路径？

Question

我想绘制一个类似于图像的路径.它有两个黑色边框,里面是白色而不是透明.怎么实现呢？尤其是关节位置.

Answer 1

要获得所需的结果,您必须绘制部分路径.

您将使用两个不同的Paint对象绘制两次零件,仅在笔触宽度和颜色方面有所不同.绘制每个零件后,将重置路径.代码注释应该解释其余的:

public class SView extends View {

    Path path;
    Paint paint, paintWhite;
    RectF rf, rf2, rf3;

    public SView(Context context) {
        super(context);

        path = new Path();

        // 'paint' has a wider stroke-width 
        // compared to 'paintWhite' and 
        // thus becomes the border paint
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(15);
        paint.setStyle(Style.STROKE);

        // 'paintWhite' colors the inner path
        paintWhite = new Paint();
        paintWhite.setColor(Color.WHITE);
        paintWhite.setAntiAlias(true);
        paintWhite.setStrokeWidth(12);
        paintWhite.setStyle(Style.STROKE);

        // For this example, we'll draw three
        // arcs bound by the following RectF
        // objects
        rf = new RectF(200, 200, 500, 500);
        rf2 = new RectF(200, 200, 400, 500);
        rf3 = new RectF(100, 200, 400, 500);                    
    }

    @Override
    protected void onDraw(Canvas canvas) {          

        // First arc bound by 'rf'
        path.arcTo(rf, 0, 180);

        // Draw 'path' using 'paint' 
        // and then, again using 'paintWhite'       
        canvas.drawPath(path, paint);
        canvas.drawPath(path, paintWhite);

        // Reset 'path' so as to clear 
        // history
        path.reset();

        // Repeat with the rest of arcs
        path.arcTo(rf2, 180, 180);      
        canvas.drawPath(path, paint);
        canvas.drawPath(path, paintWhite);      
        path.reset();           

        path.arcTo(rf3, 0, 180);            
        canvas.drawPath(path, paint);
        canvas.drawPath(path, paintWhite);  

    }       
}

输出:

注意:重叠的弧被绑定RectF rf3,最后绘制.

因为我们正在绘制white部分,所以borders你不会得到四路交叉.这些部分将以flyover某种方式重叠:按照它们绘制的顺序.

为了提高性能(我想),您可以在重置路径之前检查路径的下一部分是否与之前的部分相交.如果下一个零件相交,则使用两个Paint对象重置并绘制零件.如果没有,只需将零件附加到路径并等到下一个交叉点绘制它.您当然需要保留绘制零件的历史记录(在上面的示例中,历史记录将包含边界:'RectF'对象).但是,我不是100%确定这是否比重复重置路径然后绘制零件更好.