Chương 3. Ứng dụng xây dụng thư viện vẽ đồ thị sử dụng Canvas. 3.1. Giới thiệu về thư viện.
Thư viện dùng Canvas để tạo một môi trường có thể vẽ đồ họa được ngay trên nền web của máy khách, sử dụng thẻ Canvas trong HTML5 và JavaScript. Thư viện gồm các file đuôi “.js”, thư viện này sẽ gồm các hàm cho phép vẽ đồ thị một cách đơn giản, các hàm dễ sử dụng, có thể cấu hình cho đồ thị hoặc bớt các hàm trong thư viện nếu muốn. Dữ liệu đầu vào là các mảng nên thuận tiện cho người dùng. Các hàm trong thư viện được viết cho người sử dụng có thể đọc hiểu được, và có thể chỉnh sửa dễ dàng nhờ các ghi chú cho mỗi dòng lệnh. Thư Viện cho phép vẽ các đồ thị phổ biến hiện nay như đồ thị dạng column, pie, scatter, doughnut,
line...
3.2. Ý nghĩa của thư viện
Thư viện là một công cụ giúp người sử dụng tạo ra các đồ thị một cách dễ dàng hơn và chuyên nghiệp hơn. Với việc tạo đồ họa sử dụng Canvas và JavaScipt thì thư viện sẽ tối ưu được các ưu thế so với việc sử dụng các phần mềm vẽ đồ thị khác, cũng như có được ưu thế so với cách tạo đồ thị truyền thống như trước đây. Là việc sử dụng công nghệ mới, công nghệ của tương lai nên hạn chế được rủi ro do lỗi thời, và có điều kiện phát triển thư viện. Chính những sự khác biệt khi vẽ đồ thị ngay trên máy khách tạo ra một ý nghĩa to lớn đối với người sử dụng, giúp tiết kiệm được các chi phí về dung lượng và băng thông, tối ưu về hình ảnh cũng như đồ họa khi sử dụng thư viện này.
3.3. Mục đích hướng tới
Mục đích hướng tới của ứng dụng này là giảm bớt khó khăn và nhược điểm khi vẽ đồ thị từ máy chủ, phần mềm vẽ đồ thị. Tạo ra một ứng dụng tốt khi vẽ đồ thị trên nền web. Một ứng dụng tận dụng tối đa các tiện ích của một công nghệ mới, đưa đến cho người sử dụng nhưng ưu điểm tốt phù hợp với sự phát triển của các công nghệ có trong HTML5.
3.4. Các kĩ thuật và chức năng của thư viện
Thư viện với chức năng vẽ đồ bằng cách sử dụng thẻ <canvas> trong HTML5. Vì
thư viện gọn nhẹ, chỉ bao gồm các file. js nên có thể dễ dàng trong khâu cài đặt. Ngoài ra nó cũng là một các ứng dụng mở, để hoàn toàn có thể chỉnh sửa các thông số, cũng như các đoạn mã trong thư viện theo ý của người sử dụng.
Các kĩ thuật đã sử dụng trong thư viện:
3.4.1. Thu Nhỏ kích cỡ nếu kích thước canvas không phù hợp với đồ thị
Trong khi sử dụng đồ thị, có thể do một số lý do mà đồ thị hiển thị không đúng như yêu cầu. Các kích thước của đồ thị so với kích thước mà Canvas tạo ra vùng vẽ đồ họa bị sai lệch, có thể dẫn tới việc đồ thị không hiện thị được, hoặc hiển thị không hết các thành phần của nó. Vì thế nên chức năng tự thu nhỏ kích thước đồ thị, khi có sự sai lệnh về kích thước của vùng môi trường vẽ đồ họa, sẽ làm giảm thiểu các lỗi khi hiển thị đồ thị. Đây chỉ là biện pháp để giảm thiểu rủi ro cho việc vẽ đồ thị, chứ không phải là biện pháp nên sử dụng. Vì để đồ thị được hiển thị đúng và đẹp, đồ họa rõ nét thì kích thước của vùng môi trường do Canvas tạo ra phải lớn hơn các kích thước của đồ thị. Nếu kích thước đó nhỏ hơn thì chức năng này sẽ được kích hoạt, nhưng khi đó chất lượng của đồ thị được tạo ra sẽ không còn tốt bằng chất lượng hình ảnh đồ thị khi được đặt trong kích thước phù hợp.
Để có thể thu nhỏ kích thước của đồ thị khi có sai lệch về kích thước vùng tạo đồ họa thì trong đồ thị có tích hợp sẵn hàm scale() . Hàm này có tác dụng đo giá trị lớn nhất mà đồ thị tạo ra (về cả chiều cao lẫn chiều rộng) nếu có sự chênh lệch về kích thước, thì hàm sẽ gán giá trị lớn nhất đó vào một biến. Sau đó sẽ có một biến rate là một biến tỷ lệ giữa kích thước của vùng tạo đồ họa của canvas và kích thước của đồ thị. Sau đó hàm scale() sẽ làm nhiệm vụ co đồ thị lại dựa trên biến rate này. Các lệnh dùng để thu nhỏ kích thước đồ thị cho phù hợp với vùng tạo đồ họa do thẻ canvas tạo ra như sau:
rate=(canvas.width/ (2*R+ (patternWidth+2*textWidth+10))) ; ctx.scale(rate,rate) ; if (canvas.height < maxheight) { rate = (canvas.height/maxheight) ; ctx.scale(rate,rate) ; } }; if (canvas.height < maxheight) { rate = (canvas.height/maxheight) ; ctx.scale(rate,rate) ; };
Hàm câu lệnh ctx.scale(rate,rate) cho phép thu nhỏ các kích thước của đồ thị theo tỷ lệ của biến rate (rate<1) . Như vậy sau thi thực hiện câu lệnh scale(rate,rate) thì đồ thị sẽ được thu nhỏ lại phù hợp với kích thước ban đầu mà canvas đã tạo ra.
Hình18: Hình ảnh trước và sau khi sử dụng hàm scale(rate,rate) .