순수 자바스크립트를 사용하여 HTML 비즈니스 프로세스 다이어그램을 구현하는 방법
- PHPz원래의
- 2023-04-25 16:16:12766검색
웹 개발 분야에서 비즈니스 프로세스 다이어그램은 사람들이 전체 비즈니스 프로세스를 보다 명확하게 이해할 수 있도록 하는 그래픽 도구입니다. 전통적인 비즈니스 프로세스 다이어그램은 일반적으로 도구 소프트웨어를 사용하여 그려지지만 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!