Trong bài học này, chúng ta sẽ học cách vẽ các đa giác thông thường bằng canvas HTML. Bạn sẽ cần có hiểu biết cơ bản về lượng giác và đường tròn đơn vị để hiểu đầy đủ cách mã hoạt động
Đa giác đều là đa giác có tất cả các cạnh có độ dài bằng nhau và tất cả các góc trong bằng nhau
Trước hết xét đường tròn đơn vị. Đây là một đường tròn có tâm tại [0, 0] với bán kính 1 đơn vị
Một đa giác đều, chẳng hạn như hình ngũ giác, có thể được vẽ bên trong hình tròn đơn vị như sau
Để vẽ hình ngũ giác, chúng ta cần xác định được 5 điểm trên hình tròn đơn vị và xoay và vẽ các đường thẳng giữa chúng
Đây là nơi mà một số hiểu biết về lượng giác trở nên hữu ích
Xét một điểm [a, b] trên đường tròn đơn vị như sau
Chúng ta biết bán kính [r], trong trường hợp này là 1 vì nó là đường tròn đơn vị. Tuy nhiên, nó có thể là bất kỳ độ dài nào chúng tôi chọn
Điểm [a, b] có thể viết dưới dạng các tỉ số lượng giác như sau
Tọa độ x được cho bởi a = r cos 𝛳
Tọa độ y được cho bởi b = r sin 𝛳
Trong Javascript, chúng ta có thể xác định điểm đầu tiên là
Lưu ý rằng chúng tôi thêm các giá trị tọa độ [x, y] vì chúng tôi sẽ không nhất thiết phải căn giữa vòng tròn tại [0, 0]
Vì chúng ta đang vẽ một hình ngũ giác nên chúng ta biết rằng góc mà chúng ta cần quay qua sẽ là 360o / 5. Tuy nhiên, tất cả các góc phải được tính bằng radian. Vậy góc sẽ là 2*Pi/5. Trong Javascript, điều này được viết là
Bây giờ chúng ta có thể bắt đầu xem xét việc kéo cái này lại với nhau
BƯỚC 1
Chúng tôi tạo một phần tử canvas và tham chiếu nó như sau
BƯỚC 2
Bây giờ chúng ta khai báo một số biến
Dòng 12. vì chúng ta đang vẽ một hình ngũ giác nên chúng ta đặt số cạnh là 5
Dòng 13. chúng tôi xác định bán kính cho vòng tròn của chúng tôi. Hình ngũ giác sẽ được vẽ bên trong hình tròn, mỗi đỉnh của hình ngũ giác sẽ nằm trên chu vi của hình tròn
Dòng 14. chúng tôi đặt tọa độ x của tâm vòng tròn
Dòng 15. chúng tôi đặt tọa độ y của tâm vòng tròn
Dòng 16. chúng tôi tính kích thước của góc bên ngoài của ngũ giác. Đây là góc mà chúng ta sẽ cần phải xoay qua sau khi mỗi đường được vẽ
BƯỚC 3
Bây giờ chúng ta có thể thiết lập một vòng lặp để vẽ từng đường của đa giác
Dòng 17. chúng ta bắt đầu con đường
Dòng 18. chúng ta di chuyển đến điểm đầu tiên đối diện trực tiếp với tâm của vòng tròn [được đánh dấu bằng màu đỏ bên dưới]
Dòng 19 đến 21. chúng tôi thiết lập một vòng lặp để vẽ từng đường
Dòng 20. chúng tôi vuốt ve con đường
Chúng tôi kết thúc với những điều sau đây
BƯỚC 4
Những người bạn vẫn cảm thấy thoải mái với mã tại thời điểm này có thể nhận ra rằng chúng ta có thể đơn giản hóa mọi thứ một chút
Lớp này sử dụng các sự kiện khác nhau để tạo một tập hợp các đỉnh nhằm tạo một hình học Đa giác mới bằng cách sử dụng Draw. Khi vẽ. create["polygon"] được gọi, một tham chiếu tới PolygonDrawAction được trả về. Bạn có thể nghe các sự kiện trên phiên bản PolylineDrawAction, cho phép người dùng tạo các đường đa tuyến đáp ứng các tiêu chí do nhà phát triển chỉ định
Xem thêmMẫu - Ngăn vẽ một đường tự cắt nhau
Thí dụ
function enableCreatePolygon[draw, view] {
let action = draw.create["polygon"];
// PolygonDrawAction.vertex-add
// Fires when user clicks, or presses the "F" key.
// Can also be triggered when the "R" key is pressed to redo.
action.on["vertex-add", function [evt] {
createPolygonGraphic[evt.vertices];
}];
// PolygonDrawAction.vertex-remove
// Fires when the "Z" key is pressed to undo the last added vertex
action.on["vertex-remove", function [evt] {
createPolygonGraphic[evt.vertices];
}];
// Fires when the pointer moves over the view
action.on["cursor-update", function [evt] {
createPolygonGraphic[evt.vertices];
}];
// Add a graphic representing the completed polygon
// when user double-clicks on the view or presses the "C" key
action.on["draw-complete", function [evt] {
createPolygonGraphic[evt.vertices];
}];
}
function createPolygonGraphic[vertices]{
view.graphics.removeAll[];
let polygon = {
type: "polygon", // autocasts as Polygon
rings: vertices,
spatialReference: view.spatialReference
};
let graphic = new Graphic[{
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as SimpleFillSymbol
color: "purple",
style: "solid",
outline: { // autocasts as SimpleLineSymbol
color: "white",
width: 1
}
}
}];
view.graphics.add[graphic];
}nhà xây dựng
Hành động vẽ đa giác mới [ thuộc tính ]
Tham số
thuộc tính Đối tượng
không bắt buộcXem các thuộc tính để biết danh sách tất cả các thuộc tính có thể được chuyển vào hàm tạo
Tổng quan tài sản
Bất kỳ thuộc tính nào cũng có thể được đặt, truy xuất hoặc nghe. Xem chủ đề Làm việc với Thuộc tính
Hiển thị thuộc tính kế thừa Ẩn thuộc tính kế thừa
NameTypeSummaryClass DeclaredClassChuỗiTên của lớp học
biết thêm chi tiếtNgười truy cập hasZBooleanKiểm soát xem hình được tạo có tọa độ z hay không
thêm chi tiếtDrawAction chế độChuỗiChế độ vẽ
thêm chi tiếtPolygonDrawAction đỉnhSố[][]Mảng số hai chiều biểu thị tọa độ của từng đỉnh bao gồm hình được vẽ
chi tiết khác DrawAction chế độ xemChế độ xem bản đồTham chiếu đến MapView
thêm chi tiếtDrawActionChi tiết tài sản
declaredClass Chuỗichỉ đọc được kế thừa
Từ khi. ArcGIS Maps SDK dành cho JavaScript 4. 7
Tên của lớp học. Tên lớp được khai báo có định dạng là
draw.create["polygon", {mode: "freehand"}];hasZ Boolean được kế thừa
Kiểm soát xem hình được tạo có tọa độ z hay không
Giá trị mặc định. đúng
chế độ Chuỗi
Từ khi. ArcGIS Maps SDK dành cho JavaScript 4. 7
Chế độ vẽ. Nó chỉ có liên quan khi hành động được tạo lần đầu tiên. Giá trị của nó không thể thay đổi trong vòng đời hành động
Những giá trị khả thi
ValueDescriptionhybridVertices được thêm vào khi con trỏ được bấm hoặc kéo. các đỉnh tự do được thêm vào trong khi con trỏ được kéo. clickVertices được thêm vào khi con trỏ được nhấp vàoGiá trị có thể . "kết hợp". "tự do". "nhấp chuột"
Giá trị mặc định. kết hợp
Thí dụ
draw.create["polygon", {mode: "freehand"}];đỉnh Số[][]chỉ đọc được kế thừa
Mảng số hai chiều biểu thị tọa độ của từng đỉnh bao gồm hình được vẽ
chế độ xem MapView kế thừa
Tham chiếu đến MapView
Tổng quan về phương pháp
Hiển thị các phương thức kế thừa Ẩn các phương thức kế thừa
NameReturn TypeSummaryClass addHandles[]Thêm một hoặc nhiều tay cầm sẽ được gắn với vòng đời của đối tượng
biết thêm chi tiếtNgười truy cập canRedo[]BooleanCho biết liệu phương thức redo[] có thể được gọi trên thực thể hành động hay không
chi tiết khác DrawAction canUndo[]BooleanCho biết liệu phương thức undo[] có thể được gọi trên thực thể hành động hay không
chi tiết khác DrawAction hoàn thành[]Hoàn thành vẽ hình đa giác và kích hoạt sự kiện vẽ hoàn thành
thêm chi tiếtPolygonDrawAction emit[]BooleanPhát ra một sự kiện trên ví dụ
chi tiết khác DrawAction getCoordsAndPointFromScreenPoint[]FromScreenPointResult . nullÁnh xạ điểm màn hình đã cho tới một điểm bản đồ
chi tiết khác DrawAction getCoordsFromScreenPoint[]Số[] . nullÁnh xạ điểm màn hình đã cho tới một điểm bản đồ
chi tiết khác DrawAction hasEventListener[]BooleanCho biết liệu có một trình xử lý sự kiện trên phiên bản khớp với tên sự kiện được cung cấp hay không
thêm chi tiết DrawAction hasHandles[]BooleanTrả về true nếu tồn tại một nhóm xử lý được đặt tên
biết thêm chi tiếtNgười truy cập on[]Mục tiêuĐăng ký một trình xử lý sự kiện trên ví dụ
thêm chi tiếtDrawAction làm lại[]Từng bước làm lại các hành động được ghi trong ngăn xếp
thêm chi tiếtDrawAction removeHandles[]Loại bỏ một nhóm xử lý thuộc sở hữu của đối tượng
chi tiết khác Người truy cập screenToMap[]Điểm . nullÁnh xạ điểm màn hình đã cho tới một điểm bản đồ
thêm chi tiếtDrawAction Hoàn tác[]Từng bước hoàn tác các hành động được ghi trong ngăn xếp
thêm chi tiếtDrawActionChi tiết phương pháp
addHandles [handleOrHandles, groupKey ]được kế thừa !view.updating, [] => { wkidSelect.disabled = false; }, { once: true } ]; // Handle gets removed when the object is destroyed. this.addHandles[handle];
Thông số
handleOrHandles WatchHandle. WatchHandle[]
Xử lý được đánh dấu để loại bỏ sau khi đối tượng bị phá hủy
khóa nhóm *
không bắt buộcKhóa xác định nhóm mà các tay cầm sẽ được thêm vào. Tất cả các tay cầm trong nhóm sau này có thể được gỡ bỏ bằng Accessor. removeHandles[]. Nếu không có khóa nào được cung cấp, các tay cầm sẽ được thêm vào một nhóm mặc định
canRedo []{Boolean}được kế thừa
Cho biết liệu phương thức redo[] có thể được gọi trên thực thể hành động hay không
trả lại
TypeDescriptionBooleanReturnsdraw.create["polygon", {mode: "freehand"}];canUndo []{Boolean}được kế thừa
Cho biết liệu phương thức undo[] có thể được gọi trên thực thể hành động hay không
trả lại
TypeDescriptionBooleanReturnsdraw.create["polygon", {mode: "freehand"}];hoàn tất []
Hoàn thành vẽ hình đa giác và kích hoạt sự kiện vẽ hoàn thành. Gọi phương thức này nếu logic vẽ cần được hoàn thành ngoài việc nhấp đúp hoặc nhấn phím "C"
emit [loại, sự kiện ]{Boolean}inherited
Phát ra một sự kiện trên ví dụ. Phương pháp này chỉ nên được sử dụng khi tạo các lớp con của lớp này
Thông số
loại Chuỗi
Tên của sự kiện
sự kiện Đối tượng
không bắt buộcTải trọng sự kiện
trả lại
LoạiMô tảBooleandraw.create["polygon", {mode: "freehand"}];getCoordsAndPointFromScreenPoint [screenPoint]{FromScreenPointResult . null}được kế thừa
Ánh xạ điểm màn hình đã cho tới một điểm bản đồ
Tham số
screenPoint ScreenPoint
Vị trí trên màn hình
trả lại
TypeDescriptionFromScreenPointResult. nullĐối tượng kết quả chứa hoặcdraw.create["polygon", {mode: "freehand"}];getCoordsFromScreenPoint [screenPoint]{Number[] . null}được kế thừa
Ánh xạ điểm màn hình đã cho tới một điểm bản đồ
Tham số
screenPoint ScreenPoint
Vị trí trên màn hình
trả lại
LoạiMô tảSố[]. nullArray của thành phần x,y và z [nếu hasZ được bật] của điểm được liên kết với điểm màn hình đã cho hoặcdraw.create["polygon", {mode: "freehand"}];hasEventListener [type]{Boolean}được kế thừa
Cho biết liệu có một trình xử lý sự kiện trên phiên bản khớp với tên sự kiện được cung cấp hay không
Tham số
loại Chuỗi
Tên của sự kiện
trả lại
TypeDescriptionBooleanTrả về true nếu lớp hỗ trợ sự kiện đầu vàohasHandles [ groupKey ]{Boolean} !view.updating, [] => { wkidSelect.disabled = false; }, { once: true } ]; // Handle gets removed when the object is destroyed. this.addHandles[handle]; 1 sẽ được gọi để ngừng lắng nghe [các] sự kiện. PropertyTypeDescriptionremoveFunctionKhi được gọi, loại bỏ người nghe khỏi sự kiện
Thí dụ
draw.create["polygon", {mode: "freehand"}];làm lại []kế thừa
Từng bước làm lại các hành động được ghi trong ngăn xếp. Gọi canRedo[] trước khi gọi phương thức này để kiểm tra xem phương thức này có thể được gọi trong trường hợp hành động không. Gọi phương thức này sẽ kích hoạt các sự kiện thêm đỉnh hoặc xóa đỉnh tùy thuộc vào hành động cuối cùng
Thí dụ
draw.create["polygon", {mode: "freehand"}];removeHandles [ groupKey ]được kế thừa
Từ khi. ArcGIS Maps SDK dành cho JavaScript 4. 25
Loại bỏ một nhóm xử lý thuộc sở hữu của đối tượng
Tham số
khóa nhóm *
không bắt buộcMột khóa nhóm hoặc một mảng hoặc tập hợp các khóa nhóm để xóa
Thí dụ
draw.create["polygon", {mode: "freehand"}];screenToMap [screenPoint]{Point . null}được kế thừa
Ánh xạ điểm màn hình đã cho tới một điểm bản đồ
Tham số
screenPoint ScreenPoint
Vị trí trên màn hình
trả lại
LoạiMô tảĐiểm. nullMapPoint được liên kết với điểm màn hình đã cho hoặc null nếu không thể ánh xạ điểm màn hìnhhoàn tác []kế thừa
Từng bước hoàn tác các hành động được ghi trong ngăn xếp. Gọi canUndo[] trước khi gọi phương thức này để kiểm tra xem phương thức này có thể được gọi trong trường hợp hành động hay không. Gọi phương thức này sẽ kích hoạt các sự kiện thêm đỉnh hoặc xóa đỉnh tùy thuộc vào hành động cuối cùng
Thí dụ
draw.create["polygon", {mode: "freehand"}];Tổng quan sự kiện
NameTypeSummaryClass cập nhật con trỏ{đỉnh. Số[][],vertexIndex. Số,ngăn mặc định. Chức năng,defaultNgăn chặn. Boolean,loại. "cập nhật con trỏ"}Kích hoạt sau khi con trỏ di chuyển trên dạng xem
thêm chi tiếtPolygonDrawAction vẽ-hoàn thành{đỉnh. Số[][],ngăn mặc định. Chức năng,defaultNgăn chặn. Boolean,loại. "vẽ-hoàn tất"}Kích hoạt sau khi người dùng hoàn thành việc vẽ một đa giác
thêm chi tiếtPolygonDrawAction làm lại{đỉnh. Số[][],vertexIndex. Số,ngăn mặc định. Chức năng,defaultNgăn chặn. Boolean,loại. Chuỗi}Kích hoạt để phản hồi lại hành động làm lại hoặc khi lệnh redo[] được gọi
thêm chi tiếtPolygonDrawAction hoàn tác{đỉnh. Số[][],vertexIndex. Số,ngăn mặc định. Chức năng,defaultNgăn chặn. Boolean,loại. Chuỗi}Kích hoạt để phản hồi hành động hoàn tác hoặc khi hoàn tác [] được gọi
thêm chi tiếtPolygonDrawAction thêm đỉnh{đỉnh. Số[][],vertexIndex. Số,ngăn mặc định. Chức năng,defaultNgăn chặn. Boolean,loại. "thêm đỉnh"}Kích hoạt khi một đỉnh được thêm vào
thêm chi tiếtPolygonDrawAction xóa đỉnh{đỉnh. Số[][],vertexIndex. Số,ngăn mặc định. Chức năng,defaultNgăn chặn. Boolean,loại. "xóa đỉnh"}Kích hoạt khi một đỉnh bị loại bỏ
thêm chi tiếtPolygonDrawActionchi tiết sự kiện
cập nhật con trỏ
Kích hoạt sau khi con trỏ di chuyển trên dạng xem
Của cảiđỉnh Số[][]
Một mảng hai chiều các số biểu thị tọa độ của mỗi đỉnh tạo nên hình học