Letzte Woche musste ich die Liste links von der Seite in den rechten Bereich ziehen und die Funktion des Beziehungsbaums zeichnen.
Nach dem Betrachten der Entwurfszeichnung besteht die erste Reaktion darin, eine Beziehungslinie mit HTML/266906.html "> Leinwand zu zeichnen.
Nachdem ich diese Funktion erhalten hatte, stellte ich fest, dass es ein sehr schwerwiegender Defekt für das Zeichnen mit Leinwand war. Das heißt, wenn es auf der linken Seite viele Beziehungen gibt, müssen Sie Hunderte und Tausende von ihnen zeichnen, und die weite Höhe der Leinwand wurde beim Schreiben des DOM deklariert. In vielen Fällen können Leinwand nicht verwendet werden.
Jedoch die Forschungsergebnisse immer noch aufzeichnen.
Das Folgende ist die Designzeichnung:
Der Effekt ist wie folgt:
Der HTML- und CSS -Code wird nicht eingefügt. JS verwendet hauptsächlich Drag und Leinwand.
Funktion startDag (ev) {ev.datatransfer.setData (text, ev.target.Innertext); $ ('. Main-Target'). DIV-Klasse = Main-Target> ' + Daten +' </div> '; GetElementById ('Canvasone'), 'begin'); '. Daten + '</div>';Das obige ist die Methode zum Ziehen und Ziehen.
Funktion DrawlineOne (Canvas, Flag) {var content = canvas.getContext ('2d'); Context.beginPath (); endx2, post.ndy2);} context.strokestyle = #333; }} */Function getCanvasonePosition () {var imglength = $ ('. ImgBox IMG'). 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: (15 + 60 * (Imglength-)), Endx = (Imglength == 0)? Imglength + 15; Var imgylength = ('. Img $ ('. Img Box img '). Länge; var endy = 15 + 60 *Imglength Return {beginx: 0, beginy: endy, endx: 155, endy: endy}}Die oben genannte Methode der Leinwandzeichnung ist nicht schwierig, hauptsächlich weil die Startkoordinaten der Analyselinie problematischer sind. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, dass jeder Vevb Wulin.com unterstützen wird.