ホームページ >ウェブフロントエンド >フロントエンドQ&A >純粋なJavaScriptを使用してHTMLビジネスプロセス図を実装する方法
純粋なJavaScriptを使用してHTMLビジネスプロセス図を実装する方法
- PHPzオリジナル
- 2023-04-25 16:16:12854ブラウズ
Web 開発の分野では、ビジネス プロセス図は、ビジネス プロセス全体をより明確に理解できるようにするグラフィカル ツールです。従来の業務プロセス図はツールソフトを使用して描画するのが一般的でしたが、JavaScriptで業務プロセス図を実装すると保守性や利便性の点で大きなメリットがあります。この記事では、純粋な JavaScript を使用して HTML ビジネス フローチャートを実装する方法を共有します。
- 準備作業
まずは本文とスタイルシートとなる空のhtmlファイルとcssファイルを用意する必要があります。この記事では Bootstrap フレームワークを使用していますが、これを使用したくない場合は、他の 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();
}
}
次に、ビジネス プロセス図を生成する関数を記述する必要があります。この関数では、まず新しい Canvas 要素を作成し、それを 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 Web ページの画像。
window.onload = function() {
generateWorkflow();
}
この JavaScript コードを実行すると、Web ページ上に完全なビジネス フローチャートが表示されます。シンプルな JavaScript コードを使用して、Web ページをより鮮やかで理解しやすいものにするフローチャートを実装しました。
概要
この記事では、純粋な JavaScript を使用して HTML ビジネス フローチャートを実装する方法を紹介します。 Canvas 要素を使用して四角形と矢印を描画し、JavaScript コードを通じてビジネス プロセス図を生成しました。従来の描画ツールと比較して、この方法は保守性が高く便利です。 JavaScript やその他のフロントエンド テクノロジの助けを借りて、Web 開発におけるさまざまな実用的な機能をより効率的に完了できます。
以上が純粋なJavaScriptを使用してHTMLビジネスプロセス図を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。