순수 자바스크립트를 사용하여 HTML 비즈니스 프로세스 다이어그램을 구현하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

순수 자바스크립트를 사용하여 HTML 비즈니스 프로세스 다이어그램을 구현하는 방법

PHPz

Apr 25, 2023 pm 04:16 PM

웹 개발 분야에서 비즈니스 프로세스 다이어그램은 사람들이 전체 비즈니스 프로세스를 보다 명확하게 이해할 수 있도록 하는 그래픽 도구입니다. 전통적인 비즈니스 프로세스 다이어그램은 일반적으로 도구 소프트웨어를 사용하여 그려지지만 JavaScript를 통해 비즈니스 프로세스 다이어그램을 구현하면 유지 관리성과 편의성에 큰 이점이 있습니다. 이 기사에서는 순수 자바스크립트를 사용하여 HTML 비즈니스 흐름도를 구현하는 방법을 공유합니다.

준비

먼저 빈 HTML 파일과 본문 및 스타일 시트로 사용할 CSS 파일을 준비해야 합니다. 이 글에서는 부트스트랩 프레임워크를 사용합니다. 이를 사용하지 않으려면 다른 CSS 프레임워크를 사용하거나 직접 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>

로그인 후 복사

Javascript 코드 작성

비즈니스 프로세스 다이어그램에서 가장 일반적으로 사용되는 그래픽은 직사각형과 화살표입니다. 먼저 직사각형과 화살표 JavaScript 개체를 만들어야 합니다. 직사각형 객체에는 직사각형의 좌표, 너비, 높이, 색상 및 텍스트를 저장해야 합니다.

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

로그인 후 복사

화살표 객체에는 화살표의 시작점, 끝점, 선 색상, 화살표 모양을 저장해야 합니다.

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

로그인 후 복사

다음으로 비즈니스 프로세스 다이어그램을 생성하는 함수를 작성해야 합니다. 이 함수에서는 먼저 새 캔버스 요소를 생성하고 이를 HTML 페이지에 삽입해야 합니다. 다음으로, 나중에 순서도를 다시 그릴 수 있도록 직사각형과 화살표를 생성하고 배열에 저장해야 합니다.

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

로그인 후 복사

실행 결과

위 단계를 완료한 후 초기화 함수에서 비즈니스 흐름도를 생성하는 함수만 호출하면 비즈니스 흐름도를 html 웹페이지에 표시할 수 있습니다.

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

로그인 후 복사

이 자바스크립트 코드를 실행하면 웹페이지에서 전체 비즈니스 흐름도를 볼 수 있습니다. 간단한 자바스크립트 코드를 통해 웹페이지를 더욱 생생하고 이해하기 쉽게 만드는 흐름도를 구현했습니다.

요약

이 글에서는 순수 자바스크립트를 사용하여 HTML 비즈니스 흐름도를 구현하는 방법을 소개합니다. 캔버스 요소를 사용하여 직사각형과 화살표를 그리고 자바스크립트 코드를 통해 비즈니스 프로세스 다이어그램을 생성했습니다. 기존 그리기 도구에 비해 이 방법은 유지 관리가 더 쉽고 편리합니다. JavaScript 및 기타 프런트 엔드 기술의 도움으로 웹 개발의 다양한 실용적인 기능을 보다 효율적으로 완료할 수 있습니다.

위 내용은 순수 자바스크립트를 사용하여 HTML 비즈니스 프로세스 다이어그램을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.