Làm cách nào để hiển thị đường dẫn mịn cho một tập hợp các điểm dữ liệu?

Question

Tôi đã khó hiểu về việc hiển thị đường dẫn trong vài ngày qua mà không có bất kỳ giải pháp thực sự nào.

Bằng cách hiển thị đường dẫn, tôi đã đưa ra một tập hợp các điểm dữ liệu x, y (ở khoảng cách khác nhau) để vẽ một đường đứt nét (hoặc trong trường hợp của tôi một tứ giác xoay) có độ dài cố định theo khoảng thời gian đều đặn giữa tạo ra một con đường trơn tru.

Nếu bạn có kiểm soát chuyến bay cho iPhone, tôi đang cố tạo hiệu ứng tương tự như hiển thị đường dẫn trong trò chơi đó.

Đây là vấn đề của tôi. Nếu chiều rộng của đồ họa + khoảng cách không thể xác định chính xác trong khoảng cách giữa 2 điểm dữ liệu thì tôi sẽ bị bỏ qua hoặc chồng chéo. Giải pháp duy nhất của tôi cho điều này là

1) Lấy điểm chồng chéo/gạch dưới làm điểm kết thúc của điểm đặt dữ liệu tiếp theo và sau đó vẽ từ đó đến điểm sau.

2) Luôn vẽ theo điểm cuối cuối cùng và bắt đầu làm mới từ điểm dữ liệu tiếp theo.

Cả hai giải pháp này đều lý tưởng và cả hai đều có vấn đề.

Có ai có giải pháp tốt hơn không?

Mọi trợ giúp sẽ được đánh giá cao.

Màn hình sau minh họa những gì tôi đang cố gắng để tạo ra: http://www.firemint.com/flightcontrol/screenshots-peaceful.html

Dòng chấm dày.

Cập nhật:

Xin chào tôi đã thử hiển thị qua đường cong, tôi tính đường cong khối (qua 4 điểm kiểm soát). Tuy nhiên vấn đề là một trong những nội suy. Cho 0 và 1 tôi có thể bước qua 2 điểm bất kỳ. Tuy nhiên tôi muốn bước qua toàn bộ đường dẫn (nhiều điểm kiểm soát). Vấn đề là một số điểm kiểm soát sẽ là một khoảng cách khác nhau, và do đó bước qua một bước tăng liên tục (nói 0.2) sẽ tạo ra kết quả bất thường. Tôi nhận ra để có thể đi qua toàn bộ con đường tôi cần tính toán chiều dài của toàn bộ đường cong ... câu hỏi là làm thế nào để tôi làm điều đó? ... Hoặc là có một cách khác?

Cheers Giàu

Answer 1

Bạn hoàn toàn hạn chế quads kích thước cố định? Các giải pháp lý tưởng là để cắt ngắn quad cuối cùng với kích thước chính xác.

Nếu bạn bị hạn chế, bạn có thể làm một vài việc. Nếu bạn đang vẽ các đường đứt nét, bạn có thể thay đổi khoảng cách của dấu gạch ngang để đảm bảo bạn không bao giờ kết thúc với một phần quads trên các điểm cuối. Điều này có thể bị mất tập trung khi khoảng cách sẽ điều chỉnh dựa trên độ dài của phân đoạn.

chỉnh sửa:

Ah, ảnh giúp. Tôi giả sử vì đây là trên iPhone mà bạn đang nhận được một loạt các điểm mà từ đó vẽ đường giữa chúng tạo ra một đường cong chấp nhận được. Nếu đây là trường hợp sử dụng splines/đường cong nguyên thủy có lẽ là quá mức cần thiết. Tôi có lẽ sẽ tiếp cận vẽ đường như được chỉ đơn giản bằng cách vẽ quads tại tất cả các điểm dữ liệu đó là một khoảng cách nhất định từ điểm dữ liệu cuối cùng.

Các thuật toán sẽ là một cái gì đó như:

1. Vẽ quad vào điểm dữ liệu đầu tiên (xoay một cách thích hợp)
2. Traverse danh sách điểm đến khi bạn đang ở khoảng cách X ít nhất từ ​​điểm cuối cùng
3. Lerp giữa điểm hiện tại và điểm truy cập cuối cùng để tìm trung tâm chính xác để đặt tứ giác tiếp theo.
4. Vẽ quad (xoay một cách thích hợp)
5. Đến bước 2
6. Nếu bạn có một điểm một phần cho các quad cuối cùng vẽ nó như bình thường (điều này sẽ cung cấp cho một tốt hơn thị giác hơn cắt bỏ nó).

Đối với niềm vui, để lerp giữa hai điểm bởi một số khoảng cách D có nghĩa là ít hơn so với khoảng cách giữa hai điểm (điều này có lẽ đơn giản hơn trong trường hợp 2D nhưng tôi thích làm việc chung):

vector v = point2 - point1; 
normalize(v); 
v *= D; 
finalPoint = point1 + v; 

Answer 2

Bạn có thể muốn xem Bezier curves hoặc hermite curves chúng không khó để tính toán và bạn nhận được các đường cong mềm mại đẹp.

Answer 3

Có lẽ bạn nên xem các thuật toán Bézier curves và Splines.

Answer 4

Có chức năng CoreGraphics gọi là "CGPathAddQuadCurveToPoint" được sử dụng để vẽ các đường trơn. An example on how to use it is on GitHub.