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 2, Các hình dạng cơ bản

by
Read Time:9 minsLanguages:
This post is part of a series called Manipulating HTML5 Canvas Using Konva.
Manipulating HTML5 Canvas Using Konva: Part 1, Getting Started
Manipulating HTML5 Canvas Using Konva: Part 3, Complex Shapes and Sprites

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

Bài hướng dẫn giới thiệu của loạt bài viết dạy bạn làm thế nào để vẽ hình dạng đầu tiên bằng cách sử dụng Konva. Nó cũng giải thích cách các lớp(layer) và các nhóm (groups) làm việc ở Konva. Trong phần còn lại của loạt bài, chúng tôi sẽ tập trung vào các chủ đề cụ thể hơn như việc tạo ra hình dạng cơ bản và phức tạp hoặc gắn nghe sự kiện với hình dạng khác nhau để làm cho hình ảnh của bạn có thể tương tác được.

Bài hướng dẫn cụ thể này sẽ cho bạn thấy cách để tạo ra các hình dạng cơ bản như hình chữ nhật, hình tròn và elip bằng Konva. Bạn cũng sẽ tìm hiểu về những thuộc tính khác nhau có thể được sử dụng để tùy chỉnh diện mạo của tất cả các hình dạng theo nhu cầu của bạn. Những phần sau của hướng dẫn sẽ bàn luận làm sao để vẽ các loại đường thẳng khách nhau và đa giác thông thường bằng Konva.

Vẽ hình chữ nhật, hình tròn và hình elip

Bạn có thể tạo ra các hình chữ nhật trong Konva bằng cách sử dụng các đối tượng Konva.rect(). Vị trí của góc trên bên trái của hình chữ nhật có thể được xác định bằng cách sử dụng thuộc tính x y. Tương tự, bạn có thể xác định chiều rộng và chiều cao của hình chữ nhật bằng cách sử dụng các thuộc tính chiều rộng và chiều cao. Tất cả các hình chữ nhật bạn vẽ sẽ có góc sắc vuông theo mặc định. Tuy nhiên, bạn có thể bo tròn các góc này bằng cách chọn một giá trị thích hợp cho các thuộc tính cornerRadius.

Có thể hiển thị hoặc ẩn một hình chữ nhật bằng cách sử dụng các thuộc tính visible. Nếu bạn không muốn hoàn toàn ẩn một hình chữ nhật nhưng vẫn làm cho nó bán trong suốt, bạn có thể sử dụng thuộc tính opacity. Bạn có thể xét bất kỳ giá trị giữa 0 và 1. Hình sẽ không được hiển thị nếu opacity được xét là 0.

Bạn cũng có thể xoay hoặc phóng to hình chữ nhật của bạn bằng cách sử dụng thuộc tính rotation scale tương ứng. Góc xoay được xác định bằng một số được hiểu là giá trị của góc xoay. Bạn có thể chọn để thu phóng bất kỳ hình chữ nhật theo trục x hoặc y một cách độc lập bằng cách sử dụng các thuộc tính scaleX scaleY.

Dưới đây là một ví dụ vẽ hình những chữ nhật khác nhau trên một canvas bằng cách sử dụng tất cả các thuộc tính mà chúng tôi vừa thảo luận.

Bạn nên lưu ý các hình chữ nhật không được vẽ ra theo thứ tự theo cách chúng được tạo ra. Thay vào đó, chúng được vẽ ra theo thứ tự mà chúng đã được thêm vào layer. Thuộc tính fillstroke được sử dụng để thiết lập màu của nền và nét viền tương ứng.

Bạn có thể vẽ hình tròn trong Konva bằng cách sử dụng đối tượng Konva.circle(). Lần này, thuộc tính xy xác định điểm trung tâm để vẽ vòng tròn. Bạn vẫn có thể xác định một giá trị cho cả thuộc tính chiều rộng và chiều cao. Những giá trị này được sử dụng để tính toán đường kính của hình tròn được vẽ ra. Tuy nhiên, một vòng tròn có chiều rộng và chiều cao bằng nhau. Điều này nghĩa là giá trị được xác định sau sẽ được ưu tiên hơn giá trị chỉ định trước đó trong trường hợp có xung đột. Nói cách khác, nếu bạn thiết lập width của một vòng tròn 100 và sau đó thiết lập height của nó 180, vòng tròn sẽ có đường kính 180 và chiều rộng sẽ bị bỏ qua.

Để tránh nhầm lẫn, bạn có thể bỏ qua các thuộc tính widthheight và chỉ định một giá trị cho các bán kính (radius) của hình tròn. Hãy nhớ rằng bạn cần thiết lập radius đến 50 để vẽ một vòng tròn mà chiều rộng và chiều cao là 100.

Trong một thời trang tương tự, bạn cũng có thể tạo một hình ellipse sử dụng đối tượng Konva.ellipse(). Sự khác biệt duy nhất là bất động sản bán kính bây giờ sẽ chấp nhận một đối tượng với x và y thuộc tính như giá trị của nó. Nếu đã được xác định, thuộc tính chiều rộng và chiều cao bây giờ sẽ được áp dụng một cách độc lập để xác định hình dạng cuối cùng của hình elip.

Bạn nên lưu ý rằng ellipB có chiều cao và chiều rộng lớn hơn so với ellipA. Khi cả hai đều có cùng giá trị x y, tôi đã phải thêm ellipB vào layer đầu tiên để cho ellipA có thể nhìn thấy. Nếu ellipB được thêm vào sau ellipA, nó sẽ đã được vẽ nằm trên ellipA, ẩn nó khỏi người xem.

Nếu bạn quan sát kỹ, bạn cũng sẽ thấy rằng các vòng tròn màu tím là thực sự là một elip với y bán kính xét đến 50 và x bán kính xét đến 100. Tuy nhiên, nó đã được thu nhỏ lại bởi một phần của 2 theo trục y. Quá trình phóng to cũng tăng độ rộng nét viền, làm cho nó rộng hơn hai lần ở phía trên và bên dưới cùng của hình elip so với các cạnh trái và phải.

Vẽ đường thẳng bằng cách sử dụng Konva

Bạn có thể sử dụng các đối tượng Konva.Line() để tạo ra các loại đường thẳng khác nhau và các đường cong. Tất cả đường thẳng yêu cầu bạn xác định những điểm mà qua đó dòng nên vượt qua bằng cách sử dụng thuộc tính points. Những điểm được quy định qua một mảng.

Bạn có thể tham gia bất kỳ tập hợp các điểm được cung cấp bằng cách sử dụng mảng Points để tạo thành một hình đa giác bằng cách thiết lập giá trị của thuộc tính closed sang thành true. Tương tự, bạn có thể chuyển đổi một tập hợp các đường thẳng vào splines bằng cách thiết lập một giá trị cho thuộc tính tension. Giá trị bằng 0 sẽ vẽ ra đường thẳng. Giá trị càng cao, thì đường vẽ ra càng cong.

Nó có thể cho bạn để tạo ra một hình dạng cong và khép kín (một giọt nước) bằng cách thiết lập một giá trị cho thuộc tính tension cũng như đóng đường cong bằng cách xét closed thành true.

Giống như phần còn lại của các hình dạng mà chúng tôi đã thảo luận, bạn có thể thiết lập độ rộng nét viền cho đường thẳng với thuộc tính strokeWidth. Bạn cũng có thể xác định một màu nền cho hình khép kín.

Trong ví dụ sau đây, tôi đã sử dụng cùng một tập hợp của các điểm để vẽ tất cả các hình dạng. Tuy nhiên, tôi cũng đã sử dụng phương thức move() để thay đổi hình dạng mỗi bởi một khoảng cách cụ thể nhằm tránh trùng lặp.

Bạn cũng nên chú ý rằng các đường màu đỏ và xanh cùng sử dụng cùng một tập hợp các điểm, nhưng một giá trị tension khác sẽ thay đổi đáng kể hình dạng cuối cùng của đường cong.

Vẽ đa giác thông thường

Bạn có thể cẩn thận chọn các giá trị của những điểm khác nhau trong các mảng điểm để vẽ đa giác thường gặp như pentagons (ngũ giác) và hexagons (hình lục giác). Vẽ đa giác phức tạp hơn như octagons (bát giác) bằng cách sử dụng phương pháp này có thể gặp khó khăn và dễ bị lỗi. Để tránh sai sót, bạn nên sử dụng các đối tượng Konva.RegularPolygon() để tạo ra các đa giác thông thường.

Thuộc tính xy được sử dụng để chỉ định điểm trung tâm của đa giác. Thuộc tính radius được sử dụng để xác định khoảng cách giữa các điểm trung tâm của đa giác và tất cả các đỉnh của nó. Bạn có thể sử dụng thuộc tính Sides để xác định số lượng các cạnh mà đa giác cần có. Hãy nhớ rằng tất cả các cạnh của một hình đa giác tạo ra bằng cách sử dụng phương pháp này sẽ có độ dài bằng nhau. Bạn có thể thay đổi chiều dài của một số mặt bằng cách sử dụng các thuộc tính scaleX scaleY, nhưng nó cũng sẽ thay đổi độ rộng nét viền của cạnh bị thu nhỏ.

Giống như tất cả các hình dạng mà chúng tôi đã thảo luận, bạn có thể thay đổi độ rộng nét, độ mờ và sự ẩn hiện của đa giác bằng cách sử dụng strokeWidth, opacity visibility.

Suy nghĩ sau cùng

Trong hướng dẫn này, chúng tôi đã dề cập các hình dạng cơ bản nhất mà Konva cho phép chúng ta để vẽ trên canvas một cách dễ dàng. Chúng tôi cũng đã học được các thuộc tính khác nhau được sử dụng để kiểm soát sự diện mạo của tất cả các hình dạng. Hầu hết các thuộc tính được phổ biến với tất cả các hình dạng, nhưng một số thứ chỉ áp dụng được trên những hình dạng cụ thể.

Nếu bạn có bất kỳ câu hỏi, xin vui lòng cho tôi biết trong phần bình luận. Chúng ta sẽ tìm hiểu một số hình dạng phức tạp hơn trong bài hướng dẫn tiếp theo của loạt bài này.

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.