Làm thế nào để có một khung lớn vô cùng?

Question

Tôi đang xây dựng một ứng dụng web sử dụng canvas để vẽ. Tôi muốn có một không gian vẽ vô cùng lớn (bạn có thể cuộn miễn là bạn muốn theo bất kỳ hướng nào) VÀ lưu dữ liệu/hình ảnh vào cơ sở dữ liệu.

Điều gì đó đã được thực hiện tương tự như ở đây: http://wordsquared.com/, nơi có nhiều người chơi trò chơi càng lớn thì càng lớn.

Tôi biết điều này sẽ yêu cầu bằng cách nào đó vẽ hình ảnh, lưu chúng vào một db, sau đó chỉ mã hóa những cái trong khung nhìn. Làm thế nào điều này và cuộn vô hạn được thực hiện/nơi tôi nên bắt đầu?

Answer 1

Đây là một phương pháp độc đáo một chút, nhưng chỉ đánh tôi là có khả năng (về lý thuyết, với không gian lưu trữ không giới hạn) vô hạn.

Bạn sẽ cần phải lưu trữ một đoạn được tải hiện tại của bảng, được cung cấp dưới dạng ID duy nhất của một số loại. Các khối và dữ liệu của họ cần phải được trong một bảng với các cột sau:

• Chunk ID
• Chunk liệu
• ID của đoạn phía bắc
• ID của nam
• ID của đông
• ID của miền tây

Bạn cần làm cho canvas có thể kéo được, có thể bằng cách sử dụng jQuery o r tương tự (this question có một số thông tin về điều đó).

Bây giờ, hãy tạo trình xử lý sự kiện để canvas được kéo và theo dõi khoảng cách di chuyển. Khi được phát hành, nếu canvas không thay đổi thành một đoạn khác, không làm gì cả.

Nếu canvas đã rời khỏi đoạn hiện tại, hãy sử dụng ID đã lưu để tìm đoạn tiếp theo cần tải. Nếu ID là 0, giả sử đoạn đó chưa tồn tại và tạo nó. Nếu không, hãy tải đoạn, thay thế đoạn hiện có. Đặt canvas trở lại căn giữa.

Với ID đủ dài và đủ dung lượng lưu trữ, điều này sẽ cung cấp cho bạn canvas vô hạn vì không có hệ thống tọa độ nào được sử dụng. Nó cũng cho phép gói các cạnh, hoặc tạo các lỗ sâu.

Cách triển khai, tôi không chắc lắm, nhưng bạn chỉ cần theo dõi mức độ di chuyển của canvas. Google Maps làm điều gì đó tương tự, vì vậy tôi sẽ xem xét cách họ xử lý nó (Tôi sẽ làm như vậy ngay và xem liệu tôi có thể thêm một số chi tiết triển khai vào câu trả lời này) hay không.

Đây có thể không phải là phương pháp thực tế nhất hoặc đơn giản nhất, nhưng thật thú vị khi nghĩ ra.

Edit: Tôi tin rằng đây là dọc theo dòng của các chức năng cơ bản: http://candrews.net/blog/2010/10/introducing-sprymap/ Đó là một trọng lượng nhẹ có thể kéo bản đồ javascript. Bạn chỉ cần theo dõi cách xa, sau đó.

Answer 2

Tôi đã tạo một thư viện để xử lý việc này có tên là TiledCanvas Nó cung cấp các giao diện để phóng to và di chuyển. Và vẽ trong một không gian vô hạn bằng cách sử dụng tất cả các apis canvas.

Nó cho phép bạn tải khối động dựa trên tọa độ, bạn chỉ cần cung cấp cho nó chức năng nhận được tham số x, y và gọi lại và bạn chỉ cần trả lại thứ gì đó có thể vẽ trên canvas.

https://github.com/Squarific/TiledCanvas