html로 줄을 많이 그리는 방법은 무엇입니까?

Question

나는 내 페이지에 많은 이미지가 있고 한 이미지를 다른 이미지에 연결할 라인을 그리는 방법을 찾고있다. (화살표 일 필요는 없다. 보통 라인이다.) 예를 들어,

$ 

    $ 

이제 두 이미지 ($)를 회선과 어떻게 연결할 수 있습니까?

감사합니다.

Answer 1

가입일 기본 JavaScript, HTML 및 CSS에 대해 묻는 것 같습니다. 여기서는 이들을 사용하는 간단한 방법이 있습니다. 라이브러리에 전적으로 의존하지 않고 이러한 종류의 그래픽 계산을 수행하는 수학 및 이론을 이해하는 것이 좋습니다.

두 이미지 간의 거리와 각도를 계산하여 HTML div을 라인으로 사용하십시오.

당신이 제대로 정렬하고, 그래서 라인이, 당신이 그들의 z-index 값을 수정할 수있는 이미지 뒤에 대신 전면에 표시 할 경우

// Get the position of the first image 
 
var imgOnePosition = document.getElementById("one").getBoundingClientRect(); 
 

 
// Get the position of the second image 
 
var imgTwoPosition = document.getElementById("two").getBoundingClientRect(); 
 

 
// Calculate the angle between the two images' positions. 
 
// Math.atan2() returns a value in radians so convert it to degrees as well 
 
var angle = Math.atan2(imgOnePosition.top - imgTwoPosition.top, imgOnePosition.left - imgTwoPosition.left) * (180/Math.PI); 
 

 
// Calculate the distance, hopefully you remember this from basic algebra :) 
 
var distance = Math.sqrt(Math.pow(imgOnePosition.top - imgTwoPosition.top, 2) + Math.pow(imgOnePosition.left - imgTwoPosition.left, 2)); 
 

 
// Create a new DIV to represent our line 
 
var line = document.createElement("div"); 
 

 
// Now we style it 
 
line.style.position = "absolute"; // so that we can change left and top 
 
line.style.width = distance + "px"; 
 
line.style.height = "2px"; 
 
line.style.left = "50%"; // Center the element in its parent 
 
line.style.top = "50%"; // Center the element in its parent 
 
line.style.background = "#000"; 
 
line.style.transformOrigin = "0% 50%"; // Rotate around one edge instead of the middle 
 
line.style.transform = "rotate(" + (angle) + "deg)"; 
 

 
// Add the line to the SECOND image's parent element. 
 
// It's the 2nd image instead of 1st because of the order we did the math in calculating the angle 
 
document.getElementById("two").appendChild(line);

body, img { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
} 
 

 
#container { 
 
    position: relative; 
 
    background: #ddd; 
 
    width: 320px; 
 
    height: 240px; 
 
} 
 

 
.img-container { 
 
    position: absolute; 
 
}

<div id="container"> 
 
    <div id="one" class="img-container" style="left: 50px; top: 100px;" > 
 
    <img src="http://imgur.com/8B1rYNY.png" /> 
 
    </div> 
 
    <div id="two" class="img-container" style="left: 150px; top: 190px;" > 
 
    <img src="http://imgur.com/8w6LAV6.png" /> 
 
    </div> 
 
</div>

.

편집 : 이미지가 동일한 크기 인 경우 위의 방식대로 작동합니다. 크기가 다른 경우 이미지의 중심점을 계산하고 getBoundingClientRect()의 왼쪽 상단 모서리 대신 이미지를 사용합니다.

// Get the position of the first image 
var imgOneRect = document.getElementById("one").getBoundingClientRect(); 
var imgOnePosition = { 
    left: (imgOneRect.left + imgOneRect.right)/2, 
    top: (imgOneRect.top + imgOneRect.bottom)/2 
} 

// Get the position of the second image 
var imgTwoRect = document.getElementById("two").getBoundingClientRect(); 
var imgTwoPosition = { 
    left: (imgTwoRect.left + imgTwoRect.right)/2, 
    top: (imgTwoRect.top + imgTwoRect.bottom)/2 
} 

Answer 2

1. div 태그 : 배경 컬러, 폭, 높이, 변환 : 회전 (50deg) 잘 위치 등록
2. SVG 태그
3. PNG 이미지
4. 캔버스