Comment implémenter un diagramme de processus métier HTML en utilisant du javascript pur-Questions et réponses frontales-php.cn

Comment implémenter un diagramme de processus métier HTML en utilisant du javascript pur

PHPz

Libérer： 2023-04-25 16:54:34

original

846 Les gens l'ont consulté

Dans le domaine du développement Web, le diagramme de processus métier est un outil graphique qui permet aux gens de comprendre plus clairement l'ensemble du processus métier. Les diagrammes de processus métier traditionnels sont généralement dessinés à l'aide d'un logiciel-outil, mais la mise en œuvre de diagrammes de processus métier via JavaScript présente de grands avantages en termes de maintenabilité et de commodité. Cet article expliquera comment utiliser du javascript pur pour implémenter un organigramme commercial HTML.

Préparation

Vous devez d'abord préparer un fichier html vierge et un fichier css comme corps et feuille de style. Le framework Bootstrap est utilisé dans cet article. Si vous ne souhaitez pas l'utiliser, vous pouvez utiliser d'autres frameworks CSS ou écrire directement des styles 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>

Copier après la connexion

Écrivez du code javascript

Les graphiques les plus couramment utilisés dans les diagrammes de processus métier sont les rectangles et les flèches. Nous devons d’abord créer un objet JavaScript rectangle et flèche. Dans l'objet rectangle, nous devons stocker les coordonnées, la largeur, la hauteur, la couleur et le texte du rectangle.

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);
    }
}

Copier après la connexion

Dans l'objet flèche, nous devons stocker le point de départ, le point final, la couleur de la ligne et la forme de la flèche.

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();
    }
}

Copier après la connexion

Ensuite, nous devons écrire la fonction qui génère le diagramme de processus métier. Dans cette fonction, nous devons d'abord créer un nouvel élément canevas et l'insérer dans la page html. Ensuite, nous devons générer des rectangles et des flèches et les stocker dans un tableau pour redessiner ultérieurement l'organigramme.

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'));
    }
}

Copier après la connexion

Résultats d'exécution

Après avoir terminé les étapes ci-dessus, il nous suffit d'appeler la fonction qui génère l'organigramme métier dans la fonction d'initialisation pour afficher l'organigramme métier dans la page Web html.

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

Copier après la connexion

Lorsque nous exécutons ce code javascript, nous pouvons voir l'organigramme commercial complet sur la page Web. Grâce à un simple code javascript, nous avons implémenté un organigramme pour rendre la page Web plus vivante et plus facile à comprendre.

Résumé

Cet article explique comment utiliser le javascript pur pour implémenter un organigramme métier HTML. Nous avons utilisé l'élément canvas pour dessiner des rectangles et des flèches, et généré le diagramme de processus métier via du code javascript. Par rapport aux outils de dessin traditionnels, cette méthode est plus facile à gérer et plus pratique. Avec l'aide de JavaScript et d'autres technologies frontales, nous pouvons remplir plus efficacement diverses fonctions pratiques du développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!