SVG путь прыжков на пересечении в карте листовки - PullRequest
Новая
       11

SVG путь прыжков на пересечении в карте листовки

0 голосов
/ 31 октября 2018

Имея путь SVG, какой будет самый простой способ SVG рисовать прыжки на перекрестках, чтобы пути, пересекающие друг друга, были более удобными для UX? Оба пересечения с другими путями и внутри самого пути.

Примерно так:

enter image description here

или

enter image description here

Вычисление пересечений и отрисовка каждого сегмента пути по отдельности - вариант, но я боюсь повлиять на производительность, потому что путь SVG рисуется внутри полилинии Leaflet, и на карте может быть много полилиний.

1 Ответ

0 голосов
/ 31 октября 2018

В первом холсте SVG я использую другую более широкую белую линию, чтобы отметить пересечение. Во втором я использую JavaScript для вычисления пересечения и рисую белый круг, чтобы отметить его. Формула для пересекающихся линий: Точка пересечения двух отрезков в двух измерениях - написано Полом Бурком 

function Intersect(p1,p2,p3,p4){
  var denominator = (p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y);
  var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x))/denominator;
  var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x))/denominator;
  var x = p1.x + ua*(p2.x - p1.x);
  var y = p1.y + ua*(p2.y - p1.y);
  if(ua > 0 && ua < 1 && ub > 0  && ub < 1){
  return {x:x,y:y};
  }else{return false;}
}

let p1={x:50,y:90}
let p2={x:50,y:10}
let p3={x:10,y:50}
let p4={x:90,y:50}

let _int = Intersect(p1,p2,p3,p4);

int.setAttributeNS(null,"cx", _int.x);
int.setAttributeNS(null,"cy", _int.y);
svg{border:1px solid; width:60vh}

line{stroke-linecap:round;}
.white{stroke:#fff;stroke-width:6}
.black{stroke:#000;stroke-width:2}
<svg viewBox="0 0 100 100">
  <defs>
  <line id="l1" x2="50" y2="10" x1="50" y1="90" />
  <line id="l2" x1="50" y1="10" x2="10" y2="50" />
  <line id="l3" x1="10" y1="50" x2="90" y2="50" />
  </defs>

 
<use xlink:href="#l1" class="black" /> 
  
<use xlink:href="#l3" class="white" /> 
  
<use xlink:href="#l2" class="black" />
<use xlink:href="#l3" class="black" /> 
  
  
</svg>

<svg viewBox="0 0 100 100">

 
<use xlink:href="#l1" class="black" /> 
<use xlink:href="#l2" class="black" />
  
<circle id="int" cx="0" cy="0" r="3" fill="white" />
  
<use xlink:href="#l3" class="black" /> 
  
  
</svg>
...