先週、ページの左側にあるリストを右の領域にドラッグし、関係ツリーの機能を描く必要がありました。
デザインの図面を見た後、最初の反応は、HTML/266906.html "> canvasとの関係ラインを描画することです。
この機能を取得した後、私はそれがキャンバスを描くための非常に深刻な欠陥であることを発見しました。つまり、左側に多くの関係がある場合は、数百と数千を引き付ける必要があり、Canvas Canvasの広い高さがDOMを書くときに宣言されています。多くの場合、キャンバスを使用できません。
しかし、それでも研究結果を記録してください。
以下はデザイン図面です。
効果は次のとおりです。
HTMLおよびCSSコードは貼り付けられません。 JSは主にドラッグとキャンバスを使用します。
関数startdrag（ev）{ev.datatransfer.setdata（text、ev.target.innertext）;} function alowdrop（ev）{ev.preventdefault（）;} function op（ev）{ev.preventdefault（）; $（ '。メインターゲット'） div class = main-targe> ' +' </div> '。 getelementbyid（ 'canvasone'）、 'o'）、 'end'）; 'IMGBox）データ + '</div>';上記は、ドラッグとドラッグの方法です。
関数drawlineone（canvas、flag）{var content = canvas.getContext（ '2d'）; context.beginpath.moveto（posed.beginy.beginy）; endx2、posits.ndy2）;} context.Strokestyle =＃333;}/** *左の関係 *{beginx： *、beginy： *、endy： * * } *getcanvasoneposition（）{'。imgboxbeging'）。 15：15：15：15：15：15：15：15：15：15：（15 + 60 *（imglength-））、endx =（imglength == 0）？ imglength + 15; var imglength =（ '。img$（'。imgbox img'）。長さ; var endy = 15 + 60 *imglength return {beginx：0、beginy：endy、endx：155、endy：endy}}}}上記は、主に分析ラインの開始座標がより厄介であるため、Canvasの図面の方法です。私はそれがすべての人の学習に役立つことを願っています、そして、私は誰もがVEVB Wulin.comをサポートすることを願っています。