Làm thế nào tôi có thể kết xuất một thanh tiến trình tròn theo thủ tục?


7

Tôi đang làm việc trong Flash AS3, nhưng mã giả hoặc bất kỳ ngôn ngữ nào khác đều ổn.

Làm thế nào tôi có thể làm một thanh tiến trình tròn? Akin đến các quán bar tàu ở Pax Britanica, bạn có thể thấy chúng trong ảnh chụp màn hình ở đây .

Ngoài việc làm cho chúng theo từng khung hình, có một giải pháp rõ ràng nào tôi đang thiếu ở đây không?

Tôi đang tìm kiếm tương đương với việc kéo dài một hình chữ nhật cho một thanh tiến trình thông thường hoặc sử dụng mặt nạ đơn giản (nếu giải pháp đó tồn tại).

(Ngoài ra tôi không thể gắn thẻ này với vòng tròn hoặc thanh tiến trình do thiếu đại diện nếu có ai đó sẽ rất tuyệt)

Câu trả lời:


19

Đầu tiên tôi sẽ giải thích nguyên tắc, sau đó là phần vẽ:

Trong ví dụ của tôi, tôi giả sử rằng bạn có giá trị tiến độ từ 0 đến 100 (%), mặc dù mọi thứ khác sẽ làm.

Trên một đường thẳng, vị trí hiện tại của thanh tiến trình sẽ chỉ đơn giản là giá trị tiến độ đó.

Trên một đường tròn bạn có được vị trí đó với lượng giác. Bất kỳ điểm nào trên một vòng tròn được đưa ra là:

point.x = r * cos(angle);
point.y = r * sin(angle); 

Trong đó r là bán kính của đường tròn. Như bạn thấy, góc là biến duy nhất trong các phương trình đó. Điều đó có nghĩa là bằng cách nào đó bạn phải tích hợp tiến trình của mình vào góc độ.

Giải pháp rất đơn giản: Một "chạy" xung quanh vòng tròn bằng 2 * Pi (hoặc 360 độ). Bạn phải chia khoảng cách đó thành 100 phần nhỏ hơn, để khi giá trị tiến độ là 100, giá trị bên trong cos () và sin () là 2 * pi (hoặc 360 độ).

Bạn đạt được điều đó bằng cách chia 2 * pi (hoặc 360 độ) cho 100 và nhân nó với tiến trình:

float step = 2*pi/100;

point.x = r * cos(progress * step);
point.y = r * sin(progress * step);

Bây giờ đến phần vẽ.

Tôi không biết gì về Actioncript3 (hoặc Flash, vì vấn đề đó), vì vậy tôi không thể cho bạn biết các quy trình chính xác, nhưng nói chung sẽ có hai cách để làm điều này:

Đầu tiên, và (theo ý kiến ​​của tôi dễ dàng hơn cho cả hai): Vẽ vòng tròn một phần theo cách thủ công chỉ đơn giản là kết nối các đường màu với độ dày nhất định (nếu bạn không cần họa tiết trên đó và đủ màu đơn giản) hoặc vẽ khoanh tròn như một kết nối của quads kết cấu (nếu bạn cần kết cấu).

Thứ hai: Bạn vẽ một bức tranh đại diện cho vòng tròn được tải đầy đủ của bạn và tải nó dưới dạng kết cấu, đặt nó vào một hình tứ giác và hiển thị nó. Sau đó, bạn lại tự vẽ một vòng tròn một phần trên hình tứ giác đó và chỉ hiển thị phần của hình tứ giác có kết cấu trong đó hình tròn được hiển thị ở phía trước nó. Ví dụ, trong OpenGL, bạn có thể dễ dàng thực hiện việc này bằng cách sử dụng bộ đệm stpson.

Nếu bạn muốn biết cách tính các điểm khác nhau trên vòng tròn của mình để sử dụng chúng để lắp ráp các đa giác / đường cần thiết, bạn có thể xem lại các phương trình trên:

point.x = r * cos(angle);
point.y = r * sin(angle); 

Ví dụ, bạn có thể chạy những cái trong vòng lặp for chạy từ 0 đến tiến trình hiện tại của bạn, nếu đó là một vòng tròn bao gồm một loạt các dấu chấm được kết nối (theo cú pháp c ++):

float granularity = 2*PI/required_granularity; //determines how smooth your circle will look
float step = 2*PI/100.0f;

list<Vector2> points; //list of all the calculated points
for(float angle=0; angle < progress*step; angle += granularity)
{
    Vector2 point(radius*cos(angle), radius*sin(angle));
    points.push_back(point); //adds the point to the list
}

Bây giờ tất cả các điểm này sẽ được tập trung vào nguồn gốc của hệ tọa độ của bạn, vì vậy bạn cần di chuyển chúng đến bất kỳ vị trí nào mà bạn muốn vòng tròn của mình ở đó. Nhưng tôi nghĩ bạn có thể tự mình tìm ra điều đó: P


4

Có vẻ như bạn muốn vẽ một vòng cung. Một vòng cung dày. Tôi tìm thấy bài viết này để làm điều đó trong AS3. Kiểm tra bản demo ở phía dưới.


1
Đây có lẽ là phương pháp tôi sẽ sử dụng (chỉ vì nó cụ thể AS3) nhưng tôi đã chấp nhận câu trả lời hoạt động trong mọi ngôn ngữ để giúp hầu hết mọi người tìm kiếm. Cảm ơn bạn!
Adrian Seeley

1

Tôi đã không thử những điều sau đây, nhưng có vẻ như nó sẽ hoạt động.

Bạn cần hai hình ảnh:

  1. đồ họa HUD bên ngoài, làm cho phần bạn muốn tiến trình hiển thị trong suốt
  2. một hình tròn màu đặc hình ảnh bán kính của máy đo tiến độ, sau đó cắt nửa dưới và làm cho nó trong suốt (nó có thể là một nửa hình vuông thực sự vì phần HUD sẽ bao phủ phần còn lại)

Sau đây giả sử điểm 0% (và 100%) của bạn ở vị trí 9 giờ.


Nếu tiến độ của bạn là 50% hoặc ít hơn:

  • Xoay và vẽ nửa vòng tròn để phần trăm mong muốn được hiển thị ở phần trên cùng
  • Thực hiện cắt hình chữ nhật của khu vực nửa dưới để loại bỏ bắt đầu bên trái của hình bán nguyệt hiển thị ở khu vực dưới cùng
  • Vẽ đồ họa HUD lớp trên cùng

Nếu tiến độ của bạn> 50%:

  • Vẽ nửa vòng tròn để nó lấp đầy toàn bộ nửa trên (dấu 50%). Bạn không cần quay
  • Xoay và vẽ lại vòng tròn một lần nữa để phản ánh tỷ lệ phần trăm còn lại
  • Ví dụ: nếu bạn muốn 60%, hãy vẽ bản sao đầu tiên để hiển thị 50% sau đó xoay và vẽ bản sao thứ hai để hiển thị thêm 10%
  • Vẽ đồ họa HUD lớp trên cùng

Tôi không chắc chắn làm thế nào để làm điều này một cách cụ thể (hoặc thậm chí là có thể) trong AS3. Tôi hy vọng điều này có ý nghĩa (oh, và thực sự hoạt động!).


0

Một phương pháp khác tôi thấy là sử dụng shader.

Bạn chỉ cần một hình ảnh, toàn bộ hình ảnh HUD, với khu vực tiến độ theo thang màu xám. Bắt đầu ở vị trí 0% (ví dụ 9 giờ) với màu trắng tinh khiết và dần dần chuyển sang màu đen ở vị trí 100%.

Bạn không thể có bất kỳ màu xám nào trong phần HUD của mình, kể cả không có màu trắng hoặc đen. Nếu bạn cần sử dụng những màu đó, thì hãy chọn một màu thuần khiết khác cho thang độ dốc của bạn (một màu không được sử dụng ở bất kỳ nơi nào khác).

Yêu cầu chương trình của bạn vượt qua trình đổ bóng giá trị tiến trình trong phạm vi '0,0' đến '1,0' (hoặc bất kỳ tỷ lệ nào mà ngôn ngữ trình tạo bóng của bạn sử dụng cho phạm vi màu của nó). Bạn cũng có thể chuyển cho shader một màu thanh tiến trình (và màu 'tắt' nếu bạn muốn) nếu bạn muốn màu sắc thay đổi linh hoạt, chẳng hạn như khi trống (hoặc đầy) để cảnh báo người chơi.

Trong trình đổ bóng của bạn, bạn đánh giá từng pixel nguồn và nếu đó là màu xám thuần (mỗi R, G, B có cùng giá trị) thì pixel đó là một phần của máy đo tiến độ. Nếu nó không chỉ vượt qua màu gốc. Nếu đó là pixel của máy đo tiến độ, bạn phải xác định xem nó nên là màu 'bật' hay màu 'tắt'. Chỉ cần kiểm tra màu pixel (đó là màu xám thuần, vì vậy bạn chỉ cần kiểm tra nói thành phần 'đỏ') để xem nó ở trên hay dưới giá trị tiến độ đã qua. Hiệu quả là bất kỳ màu xám nào dưới giá trị tiến độ sẽ bật, những cái khác sẽ tắt.


3
OMG, shader cho phần hình tròn ...
Kromster
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.