personalizada al dibujar sobre lienzo

Question

estoy trabajando actualmente en el mapa de superposición que destaca la ruta a lo largo de los puntos especificados y tengo que aplicar cierto estilo de línea (algo así como la captura de pantalla)

Lo que estoy tratando de hacer - es resaltar la ruta con algo como línea transparente con líneas de trazo negras de ambos lados

Jugar con diferentes estilos de relleno y las configuraciones de pintura no me han llevado a ninguna solución hasta el momento.

¿Alguien sabe en qué dirección debo buscar?

Actualmente he conseguido llamar la única línea continua, pero esto no es lo que estoy buscando:

pintura configuración:

mPaint.setStyle(Paint.Style.STROKE); 
mPaint.setColor(COLOR_DEFAULT); 
mPaint.setPathEffect(new CornerPathEffect(10)); 
mPaint.setStrokeWidth(6); 
mPaint.setAntiAlias(true); 

Dibujo rutina

canvas.drawPath(mPath, mPaint); 

Answer 1

Obtuve buenos resultados con PathDashPathEffect usando un "sello de tablero" que es dos muy delgados rectángulos y la opción de estilo MORPH. Vea la última y tercera última línea aquí:

Este se elaboró ​​mediante la modificación del ejemplo PathEffects en ApiDemos tomadas desde el SDK:

package com.example.android.apis.graphics; 

import android.content.Context; 
import android.graphics.*; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import android.view.View; 

public class PathEffects extends GraphicsActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(new SampleView(this)); 
    } 

    private static class SampleView extends View { 
     private Paint mPaint; 
     private Path mPath; 
     private PathEffect[] mEffects; 
     private int[] mColors; 
     private float mPhase = 3; 

     private static void makeEffects(PathEffect[] e, float phase) { 
      e[0] = null;  // no effect 
      e[1] = new CornerPathEffect(10); 
      e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase); 
      e[3] = new PathDashPathEffect(makePathDash(), 12, phase, 
              PathDashPathEffect.Style.MORPH); 
      e[4] = new ComposePathEffect(e[2], e[1]); 
      e[5] = new ComposePathEffect(e[3], e[1]); 
     } 

     public SampleView(Context context) { 
      super(context); 
      setFocusable(true); 
      setFocusableInTouchMode(true); 

      mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
      mPaint.setStyle(Paint.Style.STROKE); 
      mPaint.setStrokeWidth(6); 

      mPath = makeFollowPath(); 

      mEffects = new PathEffect[6]; 

      mColors = new int[] { Color.BLACK, Color.RED, Color.BLUE, 
            Color.GREEN, Color.MAGENTA, Color.BLACK 
           }; 
     } 

     @Override protected void onDraw(Canvas canvas) { 
      canvas.drawColor(Color.WHITE); 

      RectF bounds = new RectF(); 
      mPath.computeBounds(bounds, false); 
      canvas.translate(10 - bounds.left, 10 - bounds.top); 

      makeEffects(mEffects, mPhase); 
      invalidate(); 

      for (int i = 0; i < mEffects.length; i++) { 
       mPaint.setPathEffect(mEffects[i]); 
       mPaint.setColor(mColors[i]); 
       canvas.drawPath(mPath, mPaint); 
       canvas.translate(0, 28); 
      } 
     } 

     @Override public boolean onKeyDown(int keyCode, KeyEvent event) { 
      switch (keyCode) { 
       case KeyEvent.KEYCODE_DPAD_CENTER: 
        mPath = makeFollowPath(); 
        return true; 
      } 
      return super.onKeyDown(keyCode, event); 
     } 

     private static Path makeFollowPath() { 
      Path p = new Path(); 
      p.moveTo(0, 0); 
      for (int i = 1; i <= 15; i++) { 
       p.lineTo(i*20, (float)Math.random() * 35); 
      } 
      return p; 
     } 

     private static Path makePathDash() { 
      Path p = new Path(); 
      p.moveTo(-6, 4); 
      p.lineTo(6,4); 
      p.lineTo(6,3); 
      p.lineTo(-6, 3); 
      p.close(); 
      p.moveTo(-6, -4); 
      p.lineTo(6,-4); 
      p.lineTo(6,-3); 
      p.lineTo(-6, -3); 
      return p; 
     } 
    } 
} 

Answer 2

he conseguido encontrar una mejor solución para mi problema. Así que me deshice de mi efecto de ruta personalizada y comencé a usar el trazo habitual. Así que básicamente dibujé mi camino 2 veces: al principio dibujé la línea negra, después de eso dibujé una línea transparente para borrar el centro de la línea negra anterior.

El único truco en este enfoque es que necesito dibujar mi camino en un mapa de bits separado (usando un lienzo temporal) y cuando el mapa de bits de ruta esté listo, renderízalo en el lienzo principal.

Esperamos que esto ayude a alguien más

@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 
} 

Así resultado es idéntico: