GraphicsJS cho phép bạn tạo bất kỳ đồ họa web nào bạn có thể tưởng tượng

API JavaScript tùy chỉnh là tương lai của web. Các phong trào nguồn mở đã cặp đôi với Đồ họa SVG đã mở ra các khả năng cho các nhà phát triển web.

Đồ họa là một thư viện mã nguồn mở và API API miễn phí cho xây dựng đồ họa tùy chỉnh trong trình duyệt web. Nó có thể được sử dụng như một công cụ trực quan để vẽ đồ thị, hoặc nó có thể được sử dụng để tạo ra những thứ hay ho chỉ để thể hiện.

Trên trang chủ, bạn sẽ tìm thấy một phần lớn của bản demo được tạo bằng GraphicsJS. Và những ví dụ này chỉ làm trầy xước bề mặt của những gì có thể.

Thư viện sử dụng DOM ảo của riêng nó đó là một bản tóm tắt của DOM của trình duyệt. Đây là một phần tương tự như DOM ảo của React và nó được sử dụng theo cách tương tự.

Vì thư viện này sử dụng bản sao của DOM, nên nó cũng cần các yếu tố HTML thực sự làm việc ở. Đó là lý do tại sao nó sử dụng SVG / VML thay vì các đối tượng nhúng trong khung vẽ HTML5.

Công cụ đồ họa này là ban đầu được tích hợp vào thư viện AnyChart. Từ đó, nó đã điều chỉnh và nguồn mở như API API của riêng nó.

Đồ họa hỗ trợ tất cả các trình duyệt chính, thậm chí có niên đại từ IE6 và Chrome 1.0.

Tất cả mã nguồn có sẵn trong repo GitHub nơi bạn có thể tải xuống một bản sao và chọc xung quanh nếu bạn có thời gian. Nhưng tôi nghĩ cách tốt nhất để học là lặn đầu tiên.

Bạn có thể duyệt qua Tài liệu API nhưng tôi thường thấy những tài liệu này là thừa. Tài liệu được sử dụng tốt nhất khi bạn cần tìm một phương thức hoặc lệnh gọi API cụ thể để tham khảo.

Nếu bạn chỉ mới bắt đầu, bạn có thể tham quan sân chơi được lưu trữ trên trang web của AnyChart. Đây là một nơi tốt đẹp để tìm mẫu mã làm việc phá vỡ cú pháp.

Hoặc, nếu bạn thực sự muốn bắt đầu với một hình vuông thì Hướng dẫn bắt đầu của GraphicsJS có thể giúp đỡ. Điều này giống như “chính thức” tài liệu để nó sẽ nắm tay bạn đường cong học tập mượt mà hơn so với các tài liệu API.

Dù bằng cách nào, tôi thích rằng GraphicsJS đã được mở nguồn và phát hành vào cộng đồng nhà phát triển. Nó cách xa một thư viện hoàn hảo nhưng nó là một trong những thứ tốt nhất chúng ta có tạo đồ họa SVG tùy chỉnh từ đầu.

Và để chuyển bánh răng của bạn, bên dưới bạn có thể xem một mẫu về những gì bạn có thể xây dựng với Graphics.js.