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 3, Các hình phức tạp và Sprite

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

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

Trong hướng dẫn thứ hai của loạt bài này, bạn đã biết làm thế nào để vẽ hình cơ bản bằng cách sử dụng Konva. Bạn có thể kết hợp các hình dạng cơ bản một bằng một cách này hay cách khác để tạo ra hình sao, hình nhẫn, hình mũi tên, đồng hồ, hoặc một túp lều. Konva cũng cho phép bạn tạo ra một số hình dạng phức tạp thường gặp bằng cách sử dụng chức năng có sẵn được cung cấp bởi các thư viện

Trong hướng dẫn này, bạn sẽ tìm hiểu làm thế nào để tạo ra các ngôi sao và hình chiếc nhẫn trong Konva. Sau đó, chúng tôi sẽ thảo luận làm thế nào để viết văn bản bằng Konva và làm sao để viết nó dọc theo một đường dẫn cụ thể. Bạn cũng sẽ tìm hiểu làm thế nào để vẽ hình ảnh và sprites trên canvas bằng cách sử dụng Konva.

Vẽ hình sao và hình chiếc nhẫn

So với rất nhiều hình dạng phức tạp khác mà bạn có thể vẽ trên Canvas, hình ngôi sao là một trong những hình phổ biến nhất. Với thiết lập các giá trị đúng, bạn cũng có thể biến ngôi sao  cánh nhọn thành hình dạng huy hiệu đơn giản. Konva cho phép bạn vẽ ngôi sao bằng cách sử dụng các đối tượng Konva.Star().

Bạn có thể chỉ định số lượng đầu nhọn mà một ngôi sao nên có bằng cách sử dụng thuộc tính numPoints. Bạn có thể kiểm soát kích thước của những đỉnh nhọn này bằng cách sử dụng các thuộc tính innerRadiusouterRadius. Sự khác biệt lớn trong giá trị của những thuộc tính này sẽ làm cho các ngôi sao trông nhọn hơn. Thiết lập bán kính bên ngoài bằng với bán kính bên trong sẽ tạo một đa giác thường, với số cạnh bên nhiều gấp đôi giá trị của numPoints. Thay đổi các giá trị của numPoints, innerRadiusouterRadius có thể được kết quả thành một số hình dạng thú vị.

Như thường lệ, bạn có thể xoay và thu phóng hình ngôi sao mà bạn tạo ra bằng cách sử dụng thuộc tính rotation, scale, scaleXscaleY. Tương tự, bạn có thể kiểm soát độ mờ của hình ngôi sao bằng cách sử dụng thuộc tính opacity và hiện hoặc ẩn nó với sự giúp đỡ của thuộc tính visibile.

Hình chiếc nhẫn ở Konva bao gồm một vòng tròn lớn hơn tô kín nền, và một vòng tròn nhỏ, rỗng nhỏ đặt phía bên trên nó. Bán kính của vòng tròn bên trong được xác định bằng thuộc tính innerRadius, và bán kính của vòng tròn bên ngoài được xác định bằng outerRadius. Thuộc tính xy kiểm soát vị trí trung tâm của ngôi sao.

Bạn có thể có thu phóng và xoay hình chiếc nhẫn bạn tạo bằng cách sử dụng scaleX, scaleY, scalerotation. Tuy nhiên, hãy nhớ rằng góc xoay dường như sẽ không có bất kỳ tác dụng nào, trừ khi bạn đã thu nhỏ hình chiếc nhẫn với độ lớn khác nhau theo hướng của x và y.

Trong ví dụ sau đây, tôi đã xếp chồng lấp nhiều ngôi sao và hình chiếc nhẫn lên nhau để tạo ra một mô hình đẹp. Ba ngôi sao và hai hình nhẫn trong mẫu được xếp đồng tâm. Hãy nhớ rằng bất cứ khi nào bạn đang cố gắng để tạo ra một điều gì đó như thế này, luôn vẽ hình dạng lớn nhất đầu tiên. Nếu tôi đã thêm starA vào layer, nó sẽ có bao phủ tất cả các hình chiếc nhẫn nhỏ hơn và cả các ngôi sao, ẩn chúng đi khỏi góc nhìn của người xem.

Text và TextPath trong Konva

Bạn có thể viết chữ (text) trên Canvas bằng cách sử dụng các đối tượng Konva.Text(). Khi tạo một đối tượng text, bạn có thể xác định các giá trị cho các font chữ, kích cỡ chữ, kiểu font và font variant (biến thể của chữ) sử dụng thuộc tính fontFamily, fontSize, fontStylefontVariant. Bộ font mặc định là Arial, và kích thước chữ mặc định là 12. Bạn có thể thiết lập các thuộc tính fontStyle thành normal, bold hoặc italic. Tương tự, fontVariant có thể được thiết lập là normal hoặc smallcaps.

Nội dung thực tế mà bạn muốn viết có thể được xác định bằng cách sử dụng thuộc tính text. Nếu không đủ không gian giữa các dòng trong một bình luận nhiều dòng, bạn có thể tăng nó bằng cách sử dụng thuộc tính lineHeight.

Điểm trên cùng-bên trái mà Konva bắt đầu viết các văn bản được xác định bằng thuộc tính xy. Bạn có thể giới hạn chiều rộng của nội dung văn bản bằng cách sử dụng thuộc tính width. Văn bản bất kỳ mà bạn viết sẽ được canh lề trái theo mặc định. Bạn có thể sắp xếp nó qua phải hoặc ở giữa bằng cách thuộc tính align.

Trong ví dụ trên, bạn nên lưu ý rằng tôi đã thêm textB vào layer sau khi thêm tất cả các thành phần khác. Bằng cách này, chúng tôi có thể đảm bảo rằng các báo thực tế vẫn trên đầu trang của tất cả các hình dạng khác.

Các văn bản mà bạn viết trên Canvas không phải theo các đường thẳng. Bạn cũng có thể cung cấp một đường dẫn cho các văn bản theo cách sử dụng thuộc tính data. Đường dẫn được cung cấp dưới dạng một chuỗi dữ liệu SVG và có thể bao gồm các lệnh để thực hiện theo các đường thẳng, đường cong, và hình vòng cung.

Một điều quan trọng bạn nên nhớ là văn bản mà bạn muốn viết dọc theo một đường dẫn cụ thể đã được tạo ra bằng cách sử dụng các đối tượng Konva.TextPath(). Dưới đây là một ví dụ có đường dẫn cho các văn bản bố trí dọc theo nó trong các hình thức của một đường cong Cubic Bezier.

Vẽ hình ảnh và Sprites với Konva

Bây giờ bạn có thể tạo ra một loạt các hình dạng bằng cách sử dụng các phương pháp mà chúng tôi đã thảo luận trong bài này và các bài trước đó, nhưng đôi khi nó làm cho ý nghĩa hơn để trực tiếp sử dụng một hình ảnh khi cố gắng để vẽ một hình ảnh trên Canvas. Konva cho phép bạn vẽ hình ảnh bằng cách sử dụng đối tượng Konva.Image().

Vị trí ở góc trên cùng-bên trái của một ảnh được xác định bởi giá trị của thuộc tính xy. Tương tự, chiều rộng và chiều cao của nó được xác định bằng cách sử dụng các thuộc tính widthheight. Các giá trị của thuộc tính widthheight không cần phải bằng với kích thước thực tế của hình ảnh. Bạn cũng có thể thu phóng hoặc xoay hình ảnh bằng cách sử dụng thuộc tính rotation, scale, scaleX, và scaleY.

Cần chú ý rằng trong đoạn code phía trên, tôi đã gọi đối tượng Konva.Image() sau khi hình ảnh đã được tải. Việc cố gắng để khởi tạo các đối tượng Konva.Image() trước khi hình ảnh được tải sẽ phát sinh ra lỗi. Hình ảnh của cánh đồng đã được lấy từ Pixabay.

Konva cũng cho phép bạn để render sprites trên Canvas với sự giúp đỡ của đối tượng Konva.Sprite(). Sự khác biệt duy nhất là lần này bạn có thể sử dụng các khoá animationanimations thêm vào hình ảnh chúng tôi sử dụng trước đó trong khi vẽ nên hình ảnh.

Khoá animation nhận một chuỗi để xác định id của hoạt cảnh đê chơi. Khoá animations nhận một đối tượng lưu bản đồ hoạt hình của sprite như giá trị của nó. Bạn có thể kiểm soát tỉ lệ mà tại đó một hoạt cảnh của sprite được chạy bằng cách sử dụng thuộc tính frameRate.

Chiều rộng và chiều cao của sprite cho nhân vật anh hùng là 80px và 94px. Tôi đã sử dụng các giá trị này để báo cho Konva vị trí của một sprite sẽ được hiển thị trong khi chạy một kết quả hoạt cảnh cụ thể.. Mỗi kết quả hoạt cảnh được cho một id để xác định nhân vật anh hùng đang làm gì. id này được dùng sau đó khi bạn muốn báo Konva là hoạt cảnh nào nên được chạy. Cũng giống như ví dụ trước, tôi đã khởi tạo nhân vật anh hùng sau khi hình ảnh tải để tránh sai sót.

Sprite sheet cho nhân vật anh hùng mà chúng ta dùng trong bài được tạo ra bởi tokka. Tôi cũng đã dùng cùng hình ảnh trong bài hướng Crafty Beyond the Basics: Sprites để tạo một hoạt cảnh sprite. Các hướng dẫn trong đó cho bạn thấy làm thế nào để tạo ra một trò chơi 2D đơn giản bằng cách sử dụng Crafty.

Quay lại Konva, ví dụ sau cho thấy một hoạt hình nhân vật anh hùng đi bộ và nhảy. Hình anh hùng ở dưới cùng có một giá trị frameRate cao hơn, làm cho nó xuất hiện như thể anh hùng đang chạy ở tốc độ của siêu nhân.

Kết luận

Sau khi hoàn tất bài hướng dẫn thứ hai và thứ ba, bạn sẽ có thể tạo ra rất nhiều hình dạng, hình mẫu và thiết kế của mình bằng cách sử dụng Konva. Phần cuối cũng cho thấy bạn làm thế nào để vẽ hình ảnh và sprites trên canvas của bạn. Điều này bao gồm tất cả các nhu cầu có liên quan đến vẽ của bạn.

Nếu bạn có bất kỳ câu hỏi nào liên quan đến bài hướng dẫn này, tôi rất vui lòng giúp bạn. Các hướng dẫn tiếp theo sẽ chỉ bạn làm thế nào để tô màu các hình với gradient (tô chuyển màu) và làm sao để áp dụng shadow (bóng đổ) trên bất cứ gì bạn vẽ trên canvas.

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.