Tôi có một bản đồ mà tôi đã chuyển đổi từ đồ họa raster thành tệp SVG bằng cách chuyển đổi các vùng màu khác nhau thành đường dẫn.Điểm trong Đa giác có kiểm tra bằng SVG và JavaScript không?
Tôi biết cách thực hiện kiểm tra điểm-đa giác cơ bản cho một dải cạnh, nhưng các phần tử svg:path
đại diện cho nhiều đa giác cũng như mặt nạ (để giải thích cho biển vv) và trích xuất thông tin đó bằng cách phân tích thuộc tính d
có vẻ khá nặng tay.
Có thư viện JS nào cho phép tôi đơn giản hóa việc kiểm tra đó không? Về cơ bản, tôi muốn tạo các điểm ngẫu nhiên và sau đó kiểm tra xem chúng có trên đất (tức là bên trong đa giác) hoặc nước (tức là bên ngoài).
Vì phần tử SVG dường như cho phép xử lý sự kiện chuột, tôi nghĩ rằng điều này không phải là vấn đề lớn (ví dụ: nếu bạn có thể biết con trỏ chuột có ở trên đầu phần tử hay không, bạn đã giải quyết được vấn đề điểm-đa giác). EDIT: Làm phức tạp vấn đề một chút, tôi nên đề cập rằng các yếu tố svg:path
dường như được dựa trên đường cong chứ không phải là đường, do đó, chỉ cần phân tích thuộc tính d
để tạo ra một dãy các cạnh dường như không phải là một tùy chọn.
Khi các phần tử có thể chiếm một thuộc tính fill
, một cách tiếp cận ghetto để hiển thị SVG trên canvas và sau đó tìm giá trị màu của pixel tại điểm đã cho, nhưng có vẻ như làm đi.
Sau khi đã thực hiện thông số SVG và dành một giờ với bảng điều khiển JavaScript của Chrome, có vẻ vấn đề lớn nhất là tôi có phần tử 'svg: path' chứ không phải phần tử hình dạng thông thường. Nếu không, có thể sử dụng 'svg.checkIntersection' với một' svg: rect' 1x1 (giả sử nó hoạt động cho các vùng thay vì phác thảo). API SVG dường như có chút trợ giúp nếu bạn đang tìm kiếm bất kỳ hình thức trừu tượng nào. –