2012-06-06 12 views
7

Obecnie pracuję na mapie nakładki które wskazuje drogę wzdłuż określonych punktach i muszę realizować pewien styl linii (coś jak na zrzucie)klienta podczas rysowania na płótnie

route indication co mam próbując to zrobić - należy podświetlić trasę za pomocą czegoś w rodzaju przezroczystej linii z czarnymi liniami obrysu z obu stron.

Odtwarzanie z różnymi stylami wypełnień i ustawieniami Farby nie doprowadziło do dotychczasowego rozwiązania.

Czy ktoś wie, w jakim kierunku muszę szukać?

Obecnie udało mi się wyciągnąć tylko linia ciągła, ale to nie jest to, czego szukam:

Farba setup:

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

Rysunek rutyna

canvas.drawPath(mPath, mPaint); 
+0

Zastosowanie dwóch Farby i zrobić dwa losowanie przechodzi, po jednym dla _FILL_ i jeden dla _STROKE_. –

Odpowiedz

26

Mam całkiem dobre wyniki z PathDashPathEffect przy użyciu "Dash Stamp", który jest bardzo cienki prostokąty i opcja stylu MORPH. Zobacz ostatni i 3rd ostatni wiersz tutaj:

enter image description here

ten został opracowany przez modyfikację przykład PathEffects w ApiDemos pobranych z 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; 
     } 
    } 
} 
+0

Dobra odpowiedź! dzięki! Co się stanie, jeśli chcę ustawić kolor tła ostatniej linii? Czy to jest możliwe? Chciałabym, aby obramowanie było czarne i wypełnione niebieskimi –

+0

Czy możemy zwiększyć szerokość linii w ostatniej linii obrazu? – user1294668

+0

@ user1294668 Oczywiście, ale nie wiem, jak będzie wyglądał wynik. Metoda 'makePathDash' rysuje coś, co wygląda jak znak równości, gdzie kresek są prostokąty o wysokości 2 pikseli (współrzędne Y + -3 i + - 4). Po prostu je podwyższaj. – Gene

1

udało mi się znaleźć lepsze rozwiązanie dla mojego problemu. Pozbyłem się więc niestandardowego efektu ścieżki i zacząłem używać zwykłego obrysu. Więc w zasadzie narysuję swoją ścieżkę 2 razy: najpierw rysuję czarną linię, potem rysuję przezroczystą linię, aby wyczyścić środek poprzedniej czarnej linii.

Jedyna sztuczka w tym podejściu polega na tym, że muszę narysować ścieżkę w oddzielnej bitmapie (przy użyciu płótna tymczasowego), a gdy bitmapa ścieżki jest gotowa - wyrenderować ją na głównym obszarze roboczym.

nadzieję, że pomoże ktoś inny

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

Więc wynik wygląda następująco:

enter image description here

+0

Nie mogę uruchomić go na mapach OSM. Oto kod, którego używam. Nic nie rysuje. 'If ​​(pathBitmap == zerowy || pathBitmap.isRecycled || pathBitmap.getWidth()()! = Canvas.getWidth() || pathBitmap.getHeight()! = Canvas.getHeight()) \t \t { \t \t \t if (pathBitmap! = null) \t \t \t { \t \t \t \t pathBitmap.recycle(); \t \t \t} \t \t \t pathBitmap = Bitmap.createBitmap (canvas.getWidth() canvas.getHeight() Config.ARGB_8888); \t \t \t tempCanvas = new Canvas (pathBitmap); \t \t \t \t \t} tempCanvas .drawPath (ścieżka routePaint); canvas.drawBitmap (ścieżkaBitmap, 0, 0, null); ' – user1294668

Powiązane problemy