我想在两个圆之间画一条线,并确定该线是否接触任何矩形。我的代码(如下)进行绘制,绘制线条,并且当我调用checkIntersection时,即使在视觉上肯定重叠,它也会返回false。为什么checkIntersection返回false?
var svg;
$(function() {
svg = $("#svg_map").get(0);
var destination = $("#destination");
var current_location = $("#current_location");
destination.css("fill", "green");
current_location.css("fill", "blue");
//get all ellipses
var route_points = $("ellipse");
draw_line(destination.attr("cx"), destination.attr("cy"), current_location.attr("cx"), current_location.attr("cy"));
});
function draw_line(x1, y1, x2, y2){
var container = $("#layer1")[0];
var new_line = $(document.createElementNS('http://www.w3.org/2000/svg','path')).attr({
id:"line2",
d: "M "+ x1 + ", " + y1 + "L " + x2 + ", "+y2,
stroke: "purple",
"stroke-width": 3
});
new_line.appendTo(container);
var all_shops = $("rect");
for(var i = 0; i < all_shops.length; i++){
console.log(svg.checkIntersection(new_line[0], all_shops.eq(i)[0].getBBox()));
if(svg.checkIntersection(new_line[0], all_shops.eq(i)[0].getBBox())) {
all_shops.eq(i).attr("fill", "yellow");
}
}
}
rect:not(#layer1):hover{
fill: #bebebe;
opacity:0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="466.69052"
height="370.52399"
viewBox="0 0 467 370"
version="1.1"
id="svg_map"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="drawing.svg">
<defs
id="defs5430" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.70710678"
inkscape:cx="324.6336"
inkscape:cy="27.144499"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5433">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(222.26135,-39.191815)">
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916603;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438"
width="24.190477"
height="19.654762"
x="-221.49405"
y="39.220238" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4"
width="24.190477"
height="19.654762"
x="-188.83702"
y="39.220238" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-5"
width="24.190477"
height="19.654762"
x="-221.49405"
y="65.225006" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-8"
width="24.190477"
height="19.654762"
x="-188.83702"
y="65.225006" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-8"
width="24.190477"
height="19.654762"
x="-156.17999"
y="39.220238" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-2"
width="24.190477"
height="19.654762"
x="-123.5229"
y="39.220238" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-5-8"
width="24.190477"
height="19.654762"
x="-156.17999"
y="65.225006" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-8-1"
width="24.190477"
height="19.654762"
x="-123.5229"
y="65.225006" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-6"
width="24.190477"
height="19.654762"
x="-221.49405"
y="91.229774" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-0"
width="24.190477"
height="19.654762"
x="-188.83702"
y="91.229774" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-5-5"
width="24.190477"
height="19.654762"
x="-221.49405"
y="117.23452" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-8-0"
width="24.190477"
height="19.654762"
x="-188.83702"
y="117.23452" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-7"
width="24.190477"
height="19.654762"
x="-156.17993"
y="91.229774" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-3"
width="24.190477"
height="19.654762"
x="-123.5229"
y="91.229774" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-5-4"
width="24.190477"
height="19.654762"
x="-156.17993"
y="117.23452" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="rect5438-4-8-19"
width="24.190477"
height="19.654762"
x="-123.5229"
y="117.23452" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916603;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527"
cx="-127.96865"
cy="113.6531"
rx="2.2450638"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="current_location"
cx="-127.96865"
cy="87.834869"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-6"
cx="-128.34282"
cy="62.016628"
rx="2.245064"
ry="2.9934187"
neighbour_ids="path5527-47, path5527-09, path5527-2, path5527-1" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="destination"
cx="-161.64461"
cy="62.390808"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-4"
cx="-193.82385"
cy="62.390808"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-66"
cx="-193.82387"
cy="88.583221"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-5"
cx="-193.82387"
cy="114.40146"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-9"
cx="-160.89626"
cy="114.02728"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-50"
cx="-160.52208"
cy="87.460693"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-17"
cx="-193.82387"
cy="42.55941"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-0"
cx="-160.52208"
cy="42.185234"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-47"
cx="-127.59447"
cy="42.55941"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-95"
cx="-219.64209"
cy="62.016636"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-05"
cx="-220.01628"
cy="88.583221"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-46"
cx="-220.01628"
cy="114.40146"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-02"
cx="-193.82387"
cy="134.23286"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-59"
cx="-160.89626"
cy="133.85869"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-45"
cx="-128.71701"
cy="133.85869"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-7"
cx="-101.77624"
cy="114.40145"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-509"
cx="-101.02789"
cy="87.834862"
rx="2.245064"
ry="2.9934187" />
<ellipse
style="fill:#ff0000;fill-opacity:1;stroke-width:13.22916698;stroke-miterlimit:4;stroke-dasharray:none"
id="path5527-09"
cx="-101.02788"
cy="62.016632"
rx="2.245064"
ry="2.9934187"
neighbour_ids="path5527-6" />
</g>
</svg>