2010-11-13 24 views
6

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.

+0

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. –

Trả lời

3

Câu trả lời trên Hit-testing SVG shapes? có thể giúp bạn trong nhiệm vụ này. Có vấn đề với việc thiếu hỗ trợ trình duyệt, nhưng bạn có thể sử dụng svgroot.checkIntersection để thử nghiệm một hình nhỏ (có lẽ thậm chí 0 chiều rộng/chiều cao sẽ hoạt động?) Hình chữ nhật trong hình đa giác của bạn.

1

Cách tiếp cận mà tôi đề xuất là phương sách cuối cùng có vẻ là giải pháp dễ nhất cho vấn đề này.

Tôi đã tìm thấy a nice JS library giúp dễ dàng hiển thị SVG trên canvas. Với SVG được hiển thị, tất cả những gì bạn cần là một cuộc gọi đến phương thức getImageData của ngữ cảnh 2D cho vùng 1x1 tại điểm bạn muốn kiểm tra. Tôi đoán nó giúp tạo ra một bản sao của SVG với mã hóa màu sắc để làm cho việc kiểm tra dễ dàng hơn nếu SVG của bạn phức tạp hơn so với cái tôi đang sử dụng (bạn sẽ phải kiểm tra giá trị RGB-byte).

Điều này cảm thấy khủng khiếp khi bạn thực sự kiểm tra điểm ảnh của hình ảnh raster, nhưng hiệu suất có vẻ đủ phong nha và kiểm tra màu sắc có thể được viết theo cách cho phép tạp chất (ví dụ: gần các cạnh).

Tôi đoán nếu bạn muốn tọa độ tương đối, bạn có thể thử tạo canvas có kích thước 1 đến 1 rồi chia tọa độ pixel theo kích thước canvas.

Nếu ai đó đưa ra câu trả lời hay hơn, tôi sẽ chấp nhận câu trả lời thay thế. Cho đến lúc đó, cái này đóng vai trò như một trình giữ chỗ trong trường hợp ai đó đến đây với cùng một vấn đề tìm kiếm một giải pháp dễ dàng.

+0

Nếu bạn đang cố gắng phát hiện nhấp chuột của người dùng, đường dẫn svg sẽ kích hoạt sự kiện đó. Ngoài ra, getImageData không được mô phỏng bởi iecanvas, tôi đã gặp phải vấn đề đó. –

Các vấn đề liên quan