지난주에 페이지 왼쪽의 목록을 오른쪽 영역으로 끌고 관계 트리의 기능을 그렸습니다.
디자인 도면을 살펴본 후 첫 번째 반응은 HTML/266906.html "> Canvas와의 관계 라인을 그리는 것입니다.
이 기능을 얻은 후, 나는 그것이 캔버스로 그리기에 매우 심각한 결함이라는 것을 알았습니다. 즉, 왼쪽에 많은 관계가 있다면 수백, 수천 개의 관계가 필요하며 DOM을 쓸 때 캔버스 캔버스의 넓은 높이가 선언되었습니다. 많은 경우 캔버스를 사용할 수 없습니다.
그러나 여전히 연구 결과를 기록하십시오.
다음은 디자인 그리기입니다.
효과는 다음과 같습니다.
HTML 및 CSS 코드는 붙여지지 않습니다. JS는 주로 드래그 및 캔버스를 사용합니다.
함수 startDrag (ev) {ev.datatransfer.setData (text, ev.target.innertext);} function alowdrop (ev) {ev.preventDefault ();} function op (ev.preventDefault (); $ ( '. mead-target') div class = + data + '</div>'; getElementByid ( '캔버손'), '시작'), 'end'); 'imgbox' 데이터 + '</div>';위는 드래그하고 드래그하는 방법입니다.
함수 drawLineOne (canvas, flag) {var content = canvas.getContext ( '2d'); context.beginpath (). endx2, posted.ndy2);} context.strokestyle = #333; 왼쪽 관계 줄 *@returns {{beginx : *, regtx : *, endy : *. }} */기능 getCanvasOnePosition () {imgbox img '(imglength == 0)? 15 : 15 : 15 : 15 : 15 : 15 : 15 : 15 : 15 : 15 : (15 + 60 * (imglength-)), endx = (imglength == 0)? imgrength + 15; var 위치 = {beginx : endx : endy : endy} {posity.endx2 = 155; var imglength = ( '. img $ ('. img box img '). 길이; var endy = 15 + 60 *imglength return {beginx : 0, beginy : endy, endx : 155, endy : endy}}위는 캔버스 드로잉 라인의 방법이 어렵지 않습니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 VEVB wulin.com을 지원하기를 바랍니다.