Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Thao tác HTML5 Canvas bằng cách sử dụng Konva: Phần 1, Bắt Đầu

by
Read Time:7 minsLanguages:
This post is part of a series called Manipulating HTML5 Canvas Using Konva.
Manipulating HTML5 Canvas Using Konva: Part 2, Basic Shapes

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Bây giờ HTML5 canvas đã được hỗ trợ bởi tất cả các trình duyệt phổ biến được một thời gian dài. Bạn có thể sử dụng nó cho việc vẽ đồ họa trên một trình duyệt với sự giúp đỡ của JavaScript. Các hình ảnh có thể được tạo ra trên một canvas, từ đường nét đơn giản và hình dạng đến các bố cục ảnh chụp và hoạt hình.

Trong loạt bài này, bạn sẽ tìm hiểu về một thư viện canvas rất hữu ích được gọi là Konva. Bạn có thể sử dụng Konva để vẽ các hình dạng khác nhau trên canvas. Trong số những thứ khác, các thư viện cho phép bạn thu phóng, xoay và diễn hoạ tất cả các hình dạng và gán các event listener.

Bài hướng dẫn này sẽ tập trung vào các khái niệm cơ bản của thư viện trong khi cung cấp tổng quan về các tính năng khác nhau của thư viện. Sau đó, chúng tôi sẽ chuyển sang các chủ đề cụ thể và phức tạp hơn. Thư viện đầu tiên ra đời là thư viện phổ biến KineticJS.

Stage, Layers, và Shapes

Tất cả mọi thứ mà bạn vẽ ra với Konva sẽ yêu cầu bạn tạo ra một stage bằng cách sử dụng Konva.Stage. Bạn có thể xác định các thành phần container của một stage bằng cách sử dụng các thuộc tính container. Từng stage cũng đòi một giá trị chiều rộng và chiều cao mà có thể được xác định bằng cách sử dụng các thuộc tính widthheight tương ứng.

Một stage có thể chứa nhiều layer. Mỗi layer sẽ có hai trình dựng hình <canvas>. Trình dựng cảnh được sử dụng để vẽ tất cả các hình dạng hiển thị cho bạn trên stage. Trình dựng hình được ẩn từ khỏi người dùng. Nó được sử dụng để thực hiện phát hiện các sự kiện có hiệu suất cao.

Một layer có thể chứa nhiều hình dạng, nhóm của hình dạng khác nhau hoặc một nhóm của các nhóm. Stage, layer, group và các hình dạng hoạt động như các nút ảo có thể được cá nhân hoá và chuyển đổi.

Vẽ các hình dạng bằng cách sử dụng Konva

Trước khi chúng tôi tạo ra hình dạng bất kỳ, chúng ta cần phải kèm theo các thư viện trong dự án của bạn. Có rất nhiều cách để làm điều này. Nếu bạn đang sử dụng package manager, bạn có thể chạy các lệnh sau đây.

Bạn cũng có thể liên kết trực tiếp đến một phiên bản minified (thu gọn) của thư viện được lưu trữ trên cdnjs jsDelivr.

Một khi bạn đã cài đặt các thư viện, bạn có thể sử dụng các mã sau đây để tạo ra các hình dạng hình chữ nhật trên canvas.

Vẽ bất cứ gì trên canvas là một quá trình gồm năm bước. Trước tiên, bạn cần phải khởi tạo một stage, ở stage đó những hình dạng khác nhau sẽ được vẽ bằng cách sử dụng Konva.Stage. Điều này đòi hỏi bạn phải xác định chiều rộng (width) và chiều cao (height) của stage cũng như các id cho thành phần container sẽ chứa stage. Trong trường hợp của chúng tôi, các hình chữ nhật đang được vẽ ra bên trong một div id làm ví dụ.

Trong bước tiếp theo, bạn phải tạo tất cả các lớp mà bạn muốn render trên stage của bạn. Chúng tôi chỉ đang tạo một layer duy nhất trong ví dụ này, nhưng bạn có thể tạo nhiều layer và thêm chúng tất cả vào một stage duy nhất. Những layer khác nhau có thể rất hữu ích khi hình nền của bạn bao gồm các thành phần tĩnh cũng như các thành phần đang di chuyển. Trong trường hợp này, bạn có thể thêm các thành phần tĩnh trên một layer và các thành phần đang di chuyển khác. Từ khi bạn sẽ không cần phải cập nhật hình nền tĩnh sau khi mỗi lần vẽ lại, điều này có thể cải thiện hiệu suất một cách đáng kể.

Sau khi tạo các layer, bạn có thể khởi tạo các hình dạng khác nhau như hình chữ nhật, elip, hình ngôi sao và hình vòng nhẫn (tròn) mà bạn muốn hiển thị trên các layer. Cuối cùng, bạn phải thêm các hình dạng vào các layer và thêm layer vào stage.

Tạo các nhóm trong Konva

Nhóm các hình dạng khác nhau với nhau là một ý tưởng tốt khi bạn muốn quản lý tất cả các hình dạng như một đơn vị duy nhất. Ví dụ, giả sử rằng bạn đã tạo ra một chiếc xe bằng cách sử dụng hai vòng tròn cho các bánh xe và hai khối hình chữ nhật cho thân xe. Nếu bạn muốn di chuyển chiếc xe này về phía trước mà không phải tạo ra một nhóm, bạn sẽ có dịch chuyển tất cả các hình dạng một lúc trong một lần. Một phương pháp hiệu quả hơn là chỉ cần thêm các vòng tròn và các hình chữ nhật với một nhóm và dịch chúng tất cả cùng một lúc.

Để thêm hình dạng bất kỳ vào một nhóm, bạn cần phải sử dụng phương thức add(), giống như bạn đã làm khi thêm hình vào một layer. Bạn cũng có thể thêm một nhóm vào một nhóm khác để tạo ra hình phức tạp hơn. Ví dụ, bạn có thể tạo ra một người ngồi bên trong xe thành một trong những nhóm và thêm người đó vào nhóm đại diện cho chiếc xe.

Trong ví dụ sau đây, tôi đã lưu giữ những điều đơn giản và chỉ tạo ra một nhóm carA. Sau đó, tôi có thể xoay và phóng to toàn bộ chiếc xe cùng một lúc.

Sắp xếp các layer trong Konva

Bạn đã biết về layer trong Konva. Lớp là một cái gì đó khác nhau. Theo mặc định, tất cả các hình dạng mà bạn thêm vào một layer được vẽ ra theo thứ tự mà chúng đã được thêm vào. Điều này có nghĩa là hình dạng thêm vào một layer sau tất cả những hình khác sẽ được vẽ ra phía trên của hình dạng khác.

Konva cho phép bạn kiểm soát thứ tự mà các hình dạng được vẽ ra bằng cách sử dụng phương pháp sắp xếp layer khác nhau như moveToTop(), moveToBottom(), moveUp(), moveDown()zIndex().

Phương pháp moveToTop() sẽ vẽ hình dạng đã cho trên tất cả các hình dạng khác đã được thêm vào cùng một layer. Hình dạng được vẽ trên một layer đã được thêm vào stage của Konva sau layer của hình dạng cụ thể sẽ vẫn được duy trì nằm phía trên hình của chúng tôi. Đây là lý do tại sao các vòng tròn màu chàm trong ví dụ sau vẫn nằm bên dưới vòng tròn màu xanh lá cây nhạt, ngay cả sau khi gọi moveToTop().

Phương thức moveToBottom() sẽ vẽ hình nhất định dưới đây tất cả các hình dạng khác đã được thêm vào cùng một layer. Cũng giống như moveToTop(), các hình dạng sẽ di chuyển đến dưới cùng của layer của chính nó và không phải là của layer bên dưới chúng.

Phương thức MoveUp() moveDown() di chuyển hình dạng mà trên đó họ được gọi, một vị trí ở trên hoặc dưới vị trí hiện tại của chúng trong cùng một layer. Phương thức zIndex() được sử dụng để thiết lập index của một hình dạng nằm bên trong của layer chứa nó. Không giống như CSS, bạn không thể thiết lập một giá trị tùy ý zIndex ở Konva. Cho một layer có 10 hình, giá trị zIndex chỉ có thể giữa 0 và 9.

Trong ví dụ trên, bạn có thể thấy rằng chỉ cần nhấn nút "Indigo Top" không vẽ ra các vòng tròn màu chàm nằm trên tất cả những hình khác, trong khi nhấn "Indigo Above all Others" sẽ định vi nó ở phía trên cùng. Điều này là bởi vì nút cuối cùng cũng di chuyển layer có chứa các vòng tròn màu chàm lên trên cùng.

Kể từ khi các vòng tròn có thể được kéo rê xung quanh, nó có thể là một ý tưởng hay để kéo chúng lên trên các hình khác và xem làm thế nào các vị trí của vòng tròn màu chàm thay đổi khi bạn nhấn những nút khác nhau.

Suy nghĩ sau cùng

Chúng tôi đã bao phủ một số khái niệm cơ bản liên quan đến Konva trong hướng dẫn này. Bây giờ, bạn có thể vẽ một hình dạng phổ biến trên vải và di chuyển chúng xung quanh như một nhóm. Hướng dẫn này cũng cho thấy bạn làm sao để đẩy một hình dạng cụ thể lên hoặc xuống trong trường hợp bị chồng lấp.

JavaScript đã trở thành một trong những ngôn ngữ de facto của việc làm trên web. Nó không phải chỉ vì cách học của nó , và có rất nhiều các framework cũng như các thư viện đủ để bạn luôn bận rộn. Nếu bạn đang tìm kiếm tài liệu bổ sung để nghiên cứu hay sử dụng trong công việc của bạn, hãy kiểm tra những gì chúng tôi có sẵn trên Envato Market

Nếu bạn có bất kỳ câu hỏi nào liên quan đến hướng dẫn này, vui lòng cho tôi biết trong phần bình luân Hướng dẫn tiếp theo sẽ chỉ cho bạn làm thế nào để vẽ các hình dạng cơ bản trong Konva.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.