Bagaimana untuk melaksanakan gambarajah proses perniagaan html menggunakan javascript tulen-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan gambarajah proses perniagaan html menggunakan javascript tulen

PHPz

Lepaskan： 2023-04-25 16:54:34

asal

823 orang telah melayarinya

Dalam bidang pembangunan web, rajah proses perniagaan ialah alat rajah yang membolehkan orang ramai memahami keseluruhan proses perniagaan dengan lebih jelas. Gambar rajah proses perniagaan tradisional biasanya dilukis menggunakan perisian alat, tetapi melaksanakan gambar rajah proses perniagaan melalui JavaScript mempunyai kelebihan besar dalam kebolehselenggaraan dan kemudahan. Artikel ini akan berkongsi cara menggunakan javascript tulen untuk melaksanakan carta aliran perniagaan html.

Kerja penyediaan

Mula-mula anda perlu menyediakan fail html kosong dan fail css sebagai badan dan helaian gaya. Rangka kerja Bootstrap digunakan dalam artikel ini Jika anda tidak mahu menggunakannya, anda boleh menggunakan rangka kerja css lain atau terus menulis gaya css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯javascript实现html业务流程图</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="workflow"></div>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Tulis kod javascript

Grafik yang paling biasa digunakan dalam rajah proses perniagaan ialah segi empat tepat dan anak panah. Kita perlu membuat objek JavaScript segi empat tepat dan anak panah dahulu. Dalam objek segi empat tepat, kita perlu menyimpan koordinat, lebar, tinggi, warna dan teks segi empat tepat.

function Rectangle(x, y, width, height, color, text) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.text = text;
    this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = "#ffffff";
        ctx.font = "14px Arial";
        ctx.fillText(this.text, this.x + 10, this.y + 20);
    }
}

Salin selepas log masuk

Dalam objek anak panah, kita perlu menyimpan titik permulaan, titik akhir, warna garisan dan bentuk anak panah.

function Arrow(fromX, fromY, toX, toY, color) {
    this.fromX = fromX;
    this.fromY = fromY;
    this.toX = toX;
    this.toY = toY;
    this.color = color;
    this.draw = function() {
        var headlen = 10;
        var angle = Math.atan2(this.toY - this.fromY, this.toX - this.fromX);
        ctx.beginPath();
        ctx.moveTo(this.fromX, this.fromY);
        ctx.lineTo(this.toX, this.toY);
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 2;
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(this.toX, this.toY);
        ctx.lineTo(this.toX - headlen * Math.cos(angle - Math.PI / 6), this.toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(this.toX - headlen * Math.cos(angle + Math.PI / 6), this.toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

Salin selepas log masuk

Seterusnya, kita perlu menulis fungsi yang menjana gambar rajah proses perniagaan. Dalam fungsi ini, kita perlu terlebih dahulu mencipta elemen kanvas baharu dan memasukkannya ke dalam halaman html. Seterusnya, kita perlu menjana segi empat tepat dan anak panah dan menyimpannya dalam tatasusunan untuk lukisan semula carta alir seterusnya.

function generateWorkflow() {
    var canvas = document.createElement('canvas');
    canvas.id = "workflow-canvas";
    canvas.width = 800;
    canvas.height = 600;
    document.getElementById('workflow').appendChild(canvas);

    var rect1 = new Rectangle(80, 50, 120, 50, "#007bff", "发起申请");
    var rect2 = new Rectangle(400, 50, 120, 50, "#ffc107", "待审核");
    var rect3 = new Rectangle(80, 200, 120, 50, "#28a745", "审核通过");
    var rect4 = new Rectangle(400, 200, 120, 50, "#dc3545", "审核拒绝");

    var arrow1 = new Arrow(200, 75, 400, 75, "#007bff");
    var arrow2 = new Arrow(520, 75, 680, 75, "#ffc107");
    var arrow3 = new Arrow(200, 225, 400, 225, "#28a745");
    var arrow4 = new Arrow(520, 225, 680, 225, "#dc3545");

    var rects = [rect1, rect2, rect3, rect4];
    var arrows = [arrow1, arrow2, arrow3, arrow4];

    for (var i = 0; i < rects.length; i++) {
        rects[i].draw(canvas.getContext('2d'));
    }

    for (var i = 0; i < arrows.length; i++) {
        arrows[i].draw(canvas.getContext('2d'));
    }
}

Salin selepas log masuk

Hasil berjalan

Selepas melengkapkan langkah di atas, kita hanya perlu memanggil fungsi yang menjana carta aliran perniagaan dalam fungsi permulaan untuk memaparkannya dalam halaman web html Gambar rajah proses perniagaan.

window.onload = function() {
    generateWorkflow();
}

Salin selepas log masuk

Apabila kami menjalankan kod javascript ini, kami dapat melihat carta aliran perniagaan yang lengkap di halaman web. Melalui kod javascript yang mudah, kami melaksanakan carta alir untuk menjadikan halaman web lebih jelas dan mudah difahami.

Ringkasan

Artikel ini memperkenalkan cara menggunakan javascript tulen untuk melaksanakan carta aliran perniagaan html. Kami menggunakan elemen kanvas untuk melukis segi empat tepat dan anak panah, dan menghasilkan gambar rajah proses perniagaan melalui kod javascript. Berbanding dengan alat lukisan tradisional, kaedah ini lebih mudah diselenggara dan mudah. Dengan bantuan JavaScript dan teknologi hadapan yang lain, kami boleh melengkapkan pelbagai fungsi praktikal dalam pembangunan web dengan lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan gambarajah proses perniagaan html menggunakan javascript tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!