Làm cách nào để chuyển đổi curveTo() thành danh sách các điểm?

Question

Lấy AS3 sau đó sẽ vẽ một đường cong sử dụng curveTo():

var line:Shape = new Shape(); 

line.x = line.y = 20; 
line.graphics.lineStyle(2, 0xFF0000); 
line.graphics.curveTo(200, 200, 200, 0); 

addChild(line); 

Kết quả là hình ảnh là:

Bây giờ tôi muốn một cái gì đó để có thể đi theo con đường này; làm thế nào tôi có thể chuyển đổi hình ảnh này thành một danh sách các tọa độ? Tôi đấu tranh với bất kỳ toán học tiên tiến, nhưng tôi giả sử có một công thức rõ ràng (một số) mà curveTo() sử dụng để tạo ra ở trên mà tôi có thể nhân rộng và sửa đổi để tạo danh sách mong muốn của mình.

Kết quả có thể trông giống như thế này (giả sử khoảng cách giữa các điểm khoảng 5px).

Vector.<Point> = [ 
    new Point(20, 20), 
    new Point(23, 23), 
    new Point(27, 28), 
    new Point(33, 32), 
    new Point(40, 37) 
    /* ...etc... */ 
]; 

Kết quả sẽ được sử dụng cho những thứ như tạo ra một cơn mưa đạn mà theo các đường dẫn sau đây, ví dụ:

Answer 1

Từ đọc các tài liệu actionscript, tôi hiểu rằng curveTo phương thức trong kịch bản hành động tạo ra một đường cong Bezier bậc hai.

Đường cong bao gồm ba "điểm kiểm soát" mà bạn chỉ định trong mã của bạn:

control point 1 (p1) = (20,20) 
control point 2 (p2) = (200,200) 
control point 3 (p3) = (200,0) 

Để suy một giá trị dọc theo đường cong theo giá trị u dao động 0-1 (với 0 là bắt đầu điểm và 1 là điểm kết thúc) bạn có thể sử dụng cái được gọi là đa thức Bernstein. Đối với một đường cong bậc hai (trường hợp của bạn) các đa thức là:

B1 = (1 - u) * (1 - u) 
B2 = 2 * u * (1 - u) 
B3 = u * u 

Đơn giản chỉ cần tính toán những con số này cho tham số giá trị u và thêm cùng các điểm kiểm soát nhân với đa thức Bernstein tương ứng của họ.

point on curve at parameter *u* = p1 * B1 + p2 * b2 + p3 * B3 

Vì vậy, ví dụ, nếu bạn muốn để có được 5 điểm dọc theo đường cong, bạn tính toán các điểm dọc theo đường cong tại giá trị tham số 0, 0,25, 0,5, 0,75, và 1,0

Answer 2

curveTo() được sử dụng để vẽ đường cong bezier bậc hai, trong đó đường cong bezier được tính giữa hai điểm cuối và liên quan đến hai điểm neo, và đường cong bezier bậc hai là đường cong nơi cả hai điểm neo đều có tọa độ giống nhau.

Đường cong Bezier được tính bằng một số phương trình cho phép bạn tìm tọa độ x và y cho điểm đạt được tại một thời điểm nhất định dọc theo đường dẫn, vì vậy điều này đã phù hợp với nhu cầu của bạn khá tốt. Bạn có thể tìm thông tin chung về đường cong bezier trên this page.

Tất cả những gì bạn cần làm để có được điểm tọa độ là dịch các phương trình này sang ActionScript. Và may mắn thay, Paul Tondeur có một bài đăng trên blog đẹp cho thấy cách thực hiện điều này. Giải pháp của ông được sử dụng để vẽ các đường cong bezier khối, nhưng bạn có thể dễ dàng thay đổi mã để trả lại tọa độ cho những gì bạn đang cố gắng làm.

Answer 3

Đường cong Bezier là hàm tham số.Đường cong Bezier bậc hai (nghĩa là ba điểm kiểm soát) có thể được biểu thị bằng: F (t) = A (1 - t)^2 + B (1 - t) t + Ct^2 trong đó A, B và C là điểm và t đi từ số không đến một.

này sẽ cung cấp cho bạn hai phương trình:

x = a(1 - t)^2 + b(1 - t)t + ct^2 

y = d(1 - t)^2 + e(1 - t)t + ft^2 

Nếu bạn thêm ví dụ phương trình dòng (y = kx + m) vào đó, bạn sẽ kết thúc với ba phương trình và ba ẩn số (x, y và t).

từ: How to find the mathematical function defining a bezier curve

sử dụng phương trình này, bạn có thể tạo một mảng của x và y phối