Estilo de línea de ruta personalizado al dibujar sobre lienzo
Actualmente estoy trabajando en la superposición de mapa que resalta la ruta a lo largo de puntos especificados y necesito implementar cierto estilo de línea (algo así como en la captura de pantalla)
Lo que estoy tratando de hacer – es destacar la ruta con algo así como la línea transparente con líneas de trazo negro de ambos lados
Jugar con diferentes estilos de relleno y ajustes de Paint no me ha llevado a ninguna solución hasta ahora.
¿Alguien sabe qué dirección necesito buscar?
En la actualidad he logrado dibujar sólamente la línea, pero esto no es lo que estoy buscando:
Configuración de la pintura:
mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(COLOR_DEFAULT); mPaint.setPathEffect(new CornerPathEffect(10)); mPaint.setStrokeWidth(6); mPaint.setAntiAlias(true); Rutina de dibujo
canvas.drawPath(mPath, mPaint);
Consigo resultados bastante buenos con PathDashPathEffect usando un "sello de la rociada" que es dos rectángulos muy finos y la opción del estilo de MORPH. Vea la última y la tercera línea última aquí:
Esto fue dibujado modificando el ejemplo PathEffects en ApiDemos tomado del 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; } } }
Me las arreglé para 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 dibujo mi camino 2 veces: al principio dibujo la línea negra, después de eso dibujo una línea transparente más fina para despejar el centro de la línea negra anterior.
El único truco en este enfoque es que necesito dibujar mi ruta en un mapa de bits independiente (usando el lienzo de la temperatura) y cuando el mapa de bits de la trayectoria está listo – renderizarlo al lienzo principal.
Espero 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 (fi 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í que el resultado se ve así:
