Minggu lalu, saya perlu menyeret daftar di sebelah kiri halaman ke area kanan dan menggambar fungsi pohon hubungan.
Setelah melihat gambar desain, reaksi pertama adalah menggambar garis hubungan dengan html/266906.html "> kanvas.
Setelah mendapatkan fungsi ini, saya menemukan bahwa itu adalah cacat yang sangat serius untuk menggambar dengan kanvas. Yaitu, jika ada banyak hubungan di sisi kiri, Anda perlu menggambar ratusan dan ribuan dari mereka, dan ketinggian yang luas dari kanvas kanvas telah dinyatakan saat menulis DOM. Dalam banyak kasus, kanvas tidak dapat digunakan.
Tetapi masih mencatat hasil penelitian.
Berikut ini adalah gambar desain:
Efeknya adalah sebagai berikut:
Kode HTML dan CSS tidak akan ditempelkan. JS terutama menggunakan drag dan kanvas.
Fungsi StartDrag (EV) {EV.DataTransfer.setData (Text, EV.Target.InnerText);} Fungsi Alowdrop (EV) {EV.PreventDefault ();} Fungsi OP (EV) {EV.PreventDefault (); $ ('. Target utama'). Div class = Main-target> ' + Data +' </Div> '; GetElementByID ('Canvasone'), 'Begin'); 'Imgbox'). data + '</div>';Di atas adalah metode menyeret dan menyeret.
Function DrawlineOne (Canvas, Flag) {var content = canvas.getContext ('2d'); Context.beginpath (); endx2, diposting.ndy2);} context.strokestyle = #333; }}/Function getCanvasOnposisi () {var imglength = $ ('. Imgbox img'). 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: (15 + 60 * (imglength-)), endx = (imglength == 0)? ImGlength + 15; Var imglength = ('. Img $ ('. Img box img '). Panjang; var endy = 15 + 60 *imglength return {beginx: 0, Beginy: endy, endx: 155, endy: endy}}Di atas adalah metode garis gambar kanvas. Saya berharap ini akan membantu untuk pembelajaran semua orang, dan saya berharap semua orang akan mendukung VEVB wulin.com.