Chọn các phần tử SVG bằng cách vẽ xung quanh chúng

Question

Tôi đang làm việc trên một dự án mà tôi muốn vẽ một đường xung quanh một số phần tử SVG để thực hiện lựa chọn các đối tượng bên trong khu vực.

Đây là ảnh chụp màn hình của những gì tôi có ngay bây giờ. Tôi đã sử dụng Paint để thêm dòng để làm cho nó hoàn toàn rõ ràng những gì tôi đang cố gắng để đạt được. Tôi muốn chọn hai rect bên trong vòng tròn được vẽ.

Screenshot http://s23.postimage.org/y6t5t9be3/Screen_Shot_2013_02_26_at_15_31_26.png

tôi nhìn thấy một số bước mà đã được giải quyết:

1. Tạo một yếu tố path tại mousedown và ghi lại những chuyển động chuột cho đến khi mouseup
2. Đóng path, trong trường hợp người dùng không vẽ vòng tròn
3. Tìm các phần tử svg hoàn toàn hoặc một phần bên trong vòng tròn

Bạn thấy phương pháp nào và bạn có bất kỳ đề xuất nào về cách tiếp cận không?

Tôi đang sử dụng D3.js. Điều này slide (bởi Mike Bostock, tác giả của D3) có thể là thú vị để có một cái nhìn tại.

Answer 1

tôi sẽ đi theo các bước sau:

1. nhận được AABB (hoặc min/hộp max) của mẫu tự do,
2. tìm kiếm tất cả các yếu tố có AABB chồng chéo một trong những freeforms và lưu trong một danh sách,
3. nhận thân lồi của hình thức tự do,
4. kiểm tra nếu mỗi hoặc một số các đỉnh từ các yếu tố của danh sách nằm bên trong lồi-thân

Tùy thuộc vào việc bạn kiểm tra tất cả các đỉnh nằm bên trong thân lồi, bạn có thể xác định xem phần tử nằm hoàn toàn bên trong bản vẽ tự do hay chỉ chồng lên nhau.

Thật không may là tôi không quen thuộc với d3.js, nhưng chỉ đoán rằng nó cung cấp các phương pháp để có được vỏ lồi, aabbs và các điểm kiểm tra nằm trong một đa giác. Có lẽ nó thậm chí còn cung cấp cho bạn với khả năng thực hiện các truy vấn AABB để tìm chồng chéo AABB ở bước 2.

chúc may mắn ...