Maison > Article > interface Web > Comment implémenter un diagramme de processus métier HTML en utilisant du javascript pur

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

PHPzoriginal: 2023-04-25 16:16:12767parcourir

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>

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

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

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

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

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!

JavaScript css bootstrap html 对象样式表 canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Ajax et JavaScript dans JSP pour obtenir des effets en cascadeArticle suivant：Comment utiliser Ajax et JavaScript dans JSP pour obtenir des effets en cascade

Articles Liés

Voir plus