HTML5 verwendet Canvas, um ein sekundäres Baumstrukturdiagramm zu zeichnen

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispiel der Verwendung von Canvas zum Zeichnen eines sekundären Baumstrukturdiagramms in HTML5 vorgestellt. Es ist sehr praktisch. Freunde, die es benötigen, können darauf zurückgreifen.

Letzte Woche musste ich es erstellen Eine Seite links Die Funktion besteht darin, den Inhalt der Seitenliste in den rechten Bereich zu ziehen und ihn in einen Beziehungsbaum zu zeichnen.

Nachdem ich mir die Entwurfszeichnung angesehen hatte, war meine erste Reaktion, die Leinwand zum Zeichnen von Beziehungslinien zu verwenden.

Nachdem ich diese Funktion beherrschte, stellte ich fest, dass die Verwendung von Leinwand zum Zeichnen einen schwerwiegenden Fehler aufweist. Das heißt, wenn auf der linken Seite besonders viele Beziehungen vorhanden sind und Hunderte oder Tausende davon gezeichnet werden müssen, wurden beim Schreiben des Doms die Breite und Höhe der Leinwand angegeben. Bei vielen Beziehungen kann Canvas nicht verwendet werden.

Aber notieren Sie trotzdem die Forschungsergebnisse.

Das Folgende ist die Konstruktionszeichnung:

Der Effekt ist wie folgt:

html , CSS-Code Ich werde es nicht mehr posten. js verwendet hauptsächlich Drag & Drop und Canvas-Zeichnung.

function startDrag(ev) {
    ev.dataTransfer.setData("Text",ev.target.innerText);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function decideDrop(ev) {
    ev.preventDefault();
    var length = $('.main-target').length;
    if(length == 0){
        dropToMain(ev);
    }else {
        dropToRelate(ev);
    }
}

function dropToMain(ev) {
    var data=ev.dataTransfer.getData("Text");
    var _html = &#39;<p class="main-target">&#39; + data + &#39;</p>&#39;;
    $(&#39;.main-target-wrap&#39;).width(&#39;auto&#39;).append(_html);
}

function dropToRelate(ev) {
    //画关系线
    drawLineOne(document.getElementById(&#39;canvasOne&#39;), &#39;begin&#39;);
    drawLineOne(document.getElementById(&#39;canvasTwo&#39;), &#39;end&#39;);

    //插入图片 以及图片初始化点击事件
    var _img = $(&#39;<img  src="/static/imghwm/default1.png"  data-src="inner.png"  class="lazy"   alt="HTML5 verwendet Canvas, um ein sekundäres Baumstrukturdiagramm zu zeichnen" >&#39;);
    $(&#39;.imgBox&#39;).append(_img);
    _img.click(showRelationBox);
    //写入数据
    var data = ev.dataTransfer.getData(&#39;Text&#39;);
    var _html = &#39;<p class="item-text">&#39; + data + &#39;</p>&#39;;
    $(&#39;.relation-text-box&#39;).append(_html);
}

Das Obige ist die Drag-and-Drop-Methode. Ich habe die Drag-and-Drop-Methode auch geschrieben, als ich mir das Tutorial für Anfänger angesehen habe.

function drawLineOne(canvas, flag) {
    var context = canvas.getContext('2d');
    var position = {};
    if(flag == "begin"){
        position = getCanvasOnePosition();
    }else {
        position = getCanvasTwoPosition();
    }
    context.beginPath();
    context.moveTo(position.beginX, position.beginY);
    context.lineTo(position.endX, position.endY);
    if(position.endX2 && position.endY2){
        context.lineTo(position.endX2, position.endY2);
    }
    context.strokeStyle = "#333";
    context.stroke();
}

/**
 * 左侧关系线
 * @returns {{beginX: *, beginY: *, endX: *, endY: *}}
 */
function getCanvasOnePosition() {
    var imgLength = $('.imgBox img').length;
    var beginX = (imgLength == 0) ? 0 : 77,
        beginY = (imgLength == 0) ? 15 : (15 + 60 * (imgLength-1)),
        endX = (imgLength == 0) ? 155 : 77,
        endY = 60*imgLength + 15;
    var position = {beginX: beginX, beginY: beginY, endX: endX, endY: endY};
    if(imgLength > 0){
        position.endX2 = 155;
        position.endY2 = endY;
    }
    return position;
}

function getCanvasTwoPosition() {
    var imgLength = $('.imgBox img').length;
    var endY = 15 + 60*imgLength
    return {beginX: 0, beginY: endY, endX: 155, endY: endY}
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie Canvas, um die Methode des Baidu Tieba-Clients zum Laden von Bällen zu imitieren

Canvas zeichnet verschiedene grundlegende Grafiken

html5 verwendet html2canvas, um Browser-Screenshots zu implementieren

Das obige ist der detaillierte Inhalt vonHTML5 verwendet Canvas, um ein sekundäres Baumstrukturdiagramm zu zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!