How to implement html business process diagram using pure javascript-Front-end Q&A-php.cn

How to implement html business process diagram using pure javascript

PHPz

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

Original

823 people have browsed it

In the field of web development, business process diagram is a graphical tool that allows people to understand the entire business process more clearly. Traditional business process diagrams are usually drawn using tool software, but implementing business process diagrams through JavaScript has great advantages in maintainability and convenience. This article will share how to use pure javascript to implement an html business flow chart.

Preparation work

First you need to prepare a blank html file and a css file as the body and style sheet. The Bootstrap framework is used in this article. If you don’t want to use it, you can use other css frameworks or directly handwrite css styles.

<!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>

Copy after login

Writing javascript code

The most commonly used graphics in business process diagrams are rectangles and arrows. We need to first create a rectangle and arrow JavaScript object. In the rectangle object, we need to store the coordinates, width, height, color and text of the 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);
    }
}

Copy after login

In the arrow object, we need to store the starting point, end point, line color and arrow shape of the arrow.

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

Copy after login

Next, we need to write the function that generates the business process diagram. In this function, we need to first create a new canvas element and insert it into the html page. Next, we need to generate rectangles and arrows and store them in an array for subsequent redrawing of the flowchart.

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

Copy after login

Running results

After completing the above steps, we only need to call the function that generates the business flow chart in the initialization function to display the business process in the html web page picture.

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

Copy after login

When we run this javascript code, we can see the complete business flow chart on the web page. Through simple javascript code, we implemented a flow chart to make the web page more vivid and easy to understand.

Summary

This article introduces how to use pure javascript to implement an html business flow chart. We used the canvas element to draw rectangles and arrows, and generated the business process diagram through javascript code. Compared with traditional drawing tools, this method is more maintainable and convenient. With the help of JavaScript and other front-end technologies, we can complete various practical functions in web development more efficiently.

The above is the detailed content of How to implement html business process diagram using pure javascript. For more information, please follow other related articles on the PHP Chinese website!