Làm thế nào để vẽ đường trong các mẫu khác nhau bằng canvas?

Question

Hey Tôi muốn vẽ một đường thẳng trong các mẫu khác nhau bằng cách sử dụng canvas.

Bất kỳ ý tưởng hoặc đề xuất nào đều được đánh giá cao .. !!!!

Xin cảm ơn trước.

Answer 1

Bạn phải sử dụng Path .Docs nói:

lớp

Con đường đóng gói hợp chất (nhiều đường viền) hình học đường dẫn bao gồm các đoạn đường thẳng, đường cong bậc hai, và đường cong khối. ...

Ví dụ, bạn có thể kéo dài một view và thêm vị trí sự kiện liên lạc đến một path trong onTouchEvent(MotionEvent event) phương pháp view.Then của bạn, bạn phải tạo các vị trí ngẫu nhiên tương ứng với sự kiện liên lạc mới nhất và thêm họ để các trường hợp khác của path.Finally trong onDraw() phương pháp tầm nhìn của bạn, vẽ tất cả paths.I hy vọng đoạn này giúp bạn hiểu rõ ý tưởng của tôi:

public class NetCanvas extends View { 

    private static final double MAX_DIFF = 15; 
    Path path0 = new Path(); 
    Path path = new Path(); 
    private Paint p0; 
    private Paint p; 

    public NetCanvas(Context context) { 
     super(context); 
     p0 = new Paint(); 
     p0.setShader(new LinearGradient(0, 0, 230, getHeight(), Color.GREEN, 
       Color.RED, Shader.TileMode.CLAMP)); 
     p0.setStyle(Style.STROKE); 

     p = new Paint(); 
     p.setShader(new LinearGradient(0, 0, 230, getHeight(), Color.BLUE, 
       Color.MAGENTA, Shader.TileMode.CLAMP)); 
     p.setStyle(Style.STROKE); 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event) { 

     float x0 = event.getX(); 
     float y0 = event.getY(); 
     float x = generateFloat(event.getX()); 
     float y = generateFloat(event.getY()); 

     if (event.getAction() == MotionEvent.ACTION_DOWN) { 
      path0.moveTo(x0, y0); 
      path0.lineTo(x0, y0); 

      path.moveTo(x, y); 
      path.lineTo(x, y); 
     } else if (event.getAction() == MotionEvent.ACTION_MOVE) { 
      path0.lineTo(x0, y0); 

      path.lineTo(x, y); 
     } else if (event.getAction() == MotionEvent.ACTION_UP) { 
      path0.lineTo(x0, y0); 

      path.lineTo(x, y); 
     } 
     invalidate(); 
     return true; 
    } 

    @Override 
    public void onDraw(Canvas canvas) { 
     canvas.drawPath(path0, p0); 
     canvas.drawPath(path, p); 
    } 

    private float generateFloat(Float f){ 
     double d = (Math.signum(2*Math.random() - 1)) * Math.random() * MAX_DIFF; 
     return (float) (f + d); 
    } 
} 

trong đoạn mã trên, tôi đã sử dụng hai path s, nhưng bạn có thể sử dụng ba hoặc khác .Also kết quả, phụ thuộc vào tỷ lệ ngón tay của bạn trên ví dụ screen.For:

hoặc nó có thể trông như sau:

Edit:

Trên class (NetCanvas) mở rộng View, vì vậy bạn có thể tạo một thể hiện của nó và sử dụng cá thể đó, giống như các chế độ xem khác.Ví dụ, bạn có thể chỉ cần đặt một cá thể o e nó như ContentView của Activity.Here của bạn tôi ghi đè onCreate() phương pháp Hoạt động:

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

Mặc dù bạn có thể thay đổi NetCanvas để mở rộng SurfaceView với một số thay đổi khác.

Answer 2

tôi đã thay đổi NetCanvas để vẽ một cái nhìn hình dạng giống như hình ảnh thứ hai trong câu hỏi của bạn:

public class NetCanvas1 extends View { 

    Path path0 = new Path(); 
    private Paint p0; 
    private int points_Num = 20; 
    private int first_Points_Num = 5; 

    public NetCanvas1(Context context) { 
     super(context); 
     p0 = new Paint(); 
     p0.setShader(new LinearGradient(0, 0, 230, getHeight(), Color.GREEN, 
       Color.RED, Shader.TileMode.CLAMP)); 
     p0.setStyle(Style.STROKE); 

    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event) { 

     float x0 = event.getX(); 
     float y0 = event.getY(); 

     if (event.getAction() == MotionEvent.ACTION_DOWN) { 
      path0.moveTo(x0, y0); 
      path0.lineTo(x0, y0); 

     } else if (event.getAction() == MotionEvent.ACTION_MOVE) { 
      path0.lineTo(x0, y0); 
     } else if (event.getAction() == MotionEvent.ACTION_UP) { 
      path0.lineTo(x0, y0); 
      invalidate(); 
     } 
     return true; 
    } 

    @Override 
    public void onDraw(Canvas canvas) { 
     canvas.drawPath(path0, p0); 
     FlaotPoint[] pointArray = getPoints(); 
     try { 
      for (int i = 0; i < first_Points_Num; i++) { 
       for (int j = i; j < pointArray.length; j++) { 
        canvas.drawLine(pointArray[i].getX(), pointArray[i].getY(), 
          pointArray[j].getX(), pointArray[j].getY(), p0); 
       } 
      } 
      path0.reset(); 
     } catch (Exception e) { 
     } 
    } 

    private FlaotPoint[] getPoints() { 
     FlaotPoint[] pointArray = new FlaotPoint[points_Num]; 
     PathMeasure pm = new PathMeasure(path0, false); 
     float length = pm.getLength(); 
     float distance = 0f; 
     float speed = length/points_Num; 
     int counter = 0; 
     float[] aCoordinates = new float[2]; 

     while ((distance < length) && (counter < points_Num)) { 
      // get point from the path 
      pm.getPosTan(distance, aCoordinates, null); 
      pointArray[counter] = new FlaotPoint(aCoordinates[0], 
        aCoordinates[1]); 
      counter++; 
      distance = distance + speed; 
     } 

     return pointArray; 
    } 

    class FlaotPoint { 
     float x, y; 

     public FlaotPoint(float x, float y) { 
      this.x = x; 
      this.y = y; 
     } 

     public float getX() { 
      return x; 
     } 

     public float getY() { 
      return y; 
     } 
    } 
} 

Kết quả phụ thuộc vào giá trị của points_Num, first_Points_Num và trật tự của các điểm được kết nối với các đường trong vòng lặp for:

for (int i = 0; i < first_Points_Num; i++) { 
       for (int j = i; j < pointArray.length; j++) { 
        canvas.drawLine(pointArray[i].getX(), pointArray[i].getY(), 
          pointArray[j].getX(), pointArray[j].getY(), p0); 
       } 
      } 

Bạn có thể thay đổi giá trị của mỗi biến hoặc thứ tự điểm để thay đổi kết quả.Kết quả có thể trông giống như sau đây:

Ý tưởng của tôi rất đơn giản: Nhận điểm từ đường dẫn và kết nối chúng với dòng .Nếu bạn muốn xem thêm chi tiết trong khoảng nhận được điểm từ con đường, được thực hiện theo phương pháp getPoints(), bạn có thể xem this answer và tham chiếu của nó.I hy vọng sẽ giúp bạn.