Tuỳ chỉnh dòng con đường phong cách khi vẽ trên vải

Question

Tôi hiện đang làm việc trên lớp phủ bản đồ trong đó nổi bật con đường cùng điểm nhất định và tôi cần phải thực hiện theo phong cách nhất định dòng (giống như trên ảnh chụp màn hình)

Những gì tôi cố gắng làm - là để làm nổi bật tuyến đường với đường nét trong suốt có đường nét đen từ cả hai bên

Phát với các kiểu tô đầy khác nhau và cài đặt Paint chưa dẫn tôi đến bất kỳ giải pháp nào cho đến thời điểm này.

Có ai biết tôi cần tìm hướng nào không?

Hiện nay tôi cố gắng vẽ chỉ đường rắn, nhưng đây không phải là những gì tôi đang tìm kiếm:

Sơn thiết lập:

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

Vẽ thói quen

canvas.drawPath(mPath, mPaint); 

Answer 1

Tôi nhận được kết quả khá tốt với PathDashPathEffect bằng cách sử dụng một "dấu gạch ngang" đó là hai rất mỏng hình chữ nhật và tùy chọn kiểu MORPH. Xem trước và 3 dòng cuối cùng ở đây:

này được rút ra bằng cách thay đổi các ví dụ PathEffects trong ApiDemos lấy từ 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

tôi quản lý để tìm một giải pháp tốt hơn cho vấn đề của tôi. Vì vậy, tôi đã loại bỏ hiệu ứng đường dẫn tùy chỉnh của mình và bắt đầu sử dụng đột quỵ thông thường. Vì vậy, tôi về cơ bản vẽ đường dẫn của tôi 2 lần: lúc đầu tôi vẽ đường màu đen, sau đó tôi vẽ đường trong suốt mỏng hơn để xóa trung tâm của đường màu đen trước đó.

Bí quyết duy nhất trong cách tiếp cận này là tôi cần vẽ đường dẫn của mình trong một bitmap riêng biệt (sử dụng canvas tạm thời) và khi bitmap đường dẫn sẵn sàng - hiển thị nó lên canvas chính.

Hy vọng điều này sẽ giúp người khác

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

Vì vậy, kết quả trông giống như: