为什么checkIntersection总是返回false(SVG)?

时间:2019-12-27 11:25:19

标签: javascript svg

我想在两个圆之间画一条线,并确定该线是否接触任何矩形。我的代码(如下)进行绘制,绘制线条,并且当​​我调用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>

0 个答案:

没有答案