JS에서 요소 또는 화살표를 그리는 라이브러리 "LeaderLine"
5365 단어 JavaScript
LeaderLine이란
화살표, 선 및 영역을 쉽게 그리려면 소스 소프트웨어를 엽니다.
https://anseki.github.io/leader-line/
사용법
1. 홈 페이지에서 폴더 다운로드
2. 다운로드한 폴더의'leader line.min.js'를 웹 페이지에 끼워넣기
test.html<script src="leader-line.min.js"></script>
3. 화살표나 선으로 연결하려는 요소를 LeaderLine의 구조자에게 전달
test.jsnew LeaderLine(
document.getElementById('要素1'),
document.getElementById('要素2')
);
일부 사용 예를 소개하다
1. 정상
test.jsnew LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
2. 크기, 모양 및 색상 수정
test.jsnew LeaderLine(element1, element2, {
startPlugColor: '#1a6be0',
endPlugColor: '#1efdaa',
gradient: true
});
new LeaderLine(element2, element3, {dash: {animation: true}});
new LeaderLine(element4, element5, {dropShadow: true});
new LeaderLine(element5, element6, {dash: true});
3. 화살표가 고정 조건에 끌린다
test.jsnew LeaderLine(LeaderLine.mouseHoverAnchor(startElement), endElement);
4. 영역을 그릴 수 있다
test.jsnew LeaderLine(startElement, LeaderLine.areaAnchor(endElement));
최후
또한 스크롤을 통해 요소의 위치를 변경할 수 있다
div 요소,button,ul,text,circle,,,뿐만 아니라 선도 연결할 수 있습니다.상세 정보여기.
사용하기 편해서 소개해드렸어요.
Reference
이 문제에 관하여(JS에서 요소 또는 화살표를 그리는 라이브러리 "LeaderLine"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RuRey0310/items/ba369b46d168363f6ee2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. 홈 페이지에서 폴더 다운로드
2. 다운로드한 폴더의'leader line.min.js'를 웹 페이지에 끼워넣기
test.html
<script src="leader-line.min.js"></script>
3. 화살표나 선으로 연결하려는 요소를 LeaderLine의 구조자에게 전달
test.js
new LeaderLine(
document.getElementById('要素1'),
document.getElementById('要素2')
);
일부 사용 예를 소개하다
1. 정상
test.jsnew LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
2. 크기, 모양 및 색상 수정
test.jsnew LeaderLine(element1, element2, {
startPlugColor: '#1a6be0',
endPlugColor: '#1efdaa',
gradient: true
});
new LeaderLine(element2, element3, {dash: {animation: true}});
new LeaderLine(element4, element5, {dropShadow: true});
new LeaderLine(element5, element6, {dash: true});
3. 화살표가 고정 조건에 끌린다
test.jsnew LeaderLine(LeaderLine.mouseHoverAnchor(startElement), endElement);
4. 영역을 그릴 수 있다
test.jsnew LeaderLine(startElement, LeaderLine.areaAnchor(endElement));
최후
또한 스크롤을 통해 요소의 위치를 변경할 수 있다
div 요소,button,ul,text,circle,,,뿐만 아니라 선도 연결할 수 있습니다.상세 정보여기.
사용하기 편해서 소개해드렸어요.
Reference
이 문제에 관하여(JS에서 요소 또는 화살표를 그리는 라이브러리 "LeaderLine"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RuRey0310/items/ba369b46d168363f6ee2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
new LeaderLine(element1, element2, {
startPlugColor: '#1a6be0',
endPlugColor: '#1efdaa',
gradient: true
});
new LeaderLine(element2, element3, {dash: {animation: true}});
new LeaderLine(element4, element5, {dropShadow: true});
new LeaderLine(element5, element6, {dash: true});
new LeaderLine(LeaderLine.mouseHoverAnchor(startElement), endElement);
new LeaderLine(startElement, LeaderLine.areaAnchor(endElement));
또한 스크롤을 통해 요소의 위치를 변경할 수 있다
div 요소,button,ul,text,circle,,,뿐만 아니라 선도 연결할 수 있습니다.상세 정보여기.
사용하기 편해서 소개해드렸어요.
Reference
이 문제에 관하여(JS에서 요소 또는 화살표를 그리는 라이브러리 "LeaderLine"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RuRey0310/items/ba369b46d168363f6ee2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
