純粋なJavaScriptを使用してHTMLビジネスプロセス図を実装する方法-フロントエンドQ&A-php.cn

純粋なJavaScriptを使用してHTMLビジネスプロセス図を実装する方法

PHPz

リリース： 2023-04-25 16:54:34

オリジナル

822 人が閲覧しました

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 サイトの他の関連記事を参照してください。