Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk melaksanakan gambarajah proses perniagaan html menggunakan javascript tulen
Bagaimana untuk melaksanakan gambarajah proses perniagaan html menggunakan javascript tulen
- PHPzasal
- 2023-04-25 16:16:12846semak imbas
Dalam bidang pembangunan web, rajah proses perniagaan ialah alat rajah yang membolehkan orang ramai memahami keseluruhan proses perniagaan dengan lebih jelas. Gambar rajah proses perniagaan tradisional biasanya dilukis menggunakan perisian alat, tetapi melaksanakan gambar rajah proses perniagaan melalui JavaScript mempunyai kelebihan besar dalam kebolehselenggaraan dan kemudahan. Artikel ini akan berkongsi cara menggunakan javascript tulen untuk melaksanakan carta aliran perniagaan html.
- Kerja penyediaan
Mula-mula anda perlu menyediakan fail html kosong dan fail css sebagai badan dan helaian gaya. Rangka kerja Bootstrap digunakan dalam artikel ini Jika anda tidak mahu menggunakannya, anda boleh menggunakan rangka kerja css lain atau terus menulis gaya 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>
- Tulis kod javascript
Grafik yang paling biasa digunakan dalam rajah proses perniagaan ialah segi empat tepat dan anak panah. Kita perlu membuat objek JavaScript segi empat tepat dan anak panah dahulu. Dalam objek segi empat tepat, kita perlu menyimpan koordinat, lebar, tinggi, warna dan teks segi empat tepat.
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);
}
}
Dalam objek anak panah, kita perlu menyimpan titik permulaan, titik akhir, warna garisan dan bentuk anak panah.
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();
}
}
Seterusnya, kita perlu menulis fungsi yang menjana gambar rajah proses perniagaan. Dalam fungsi ini, kita perlu terlebih dahulu mencipta elemen kanvas baharu dan memasukkannya ke dalam halaman html. Seterusnya, kita perlu menjana segi empat tepat dan anak panah dan menyimpannya dalam tatasusunan untuk lukisan semula carta alir seterusnya.
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'));
}
}
- Hasil berjalan
Selepas melengkapkan langkah di atas, kita hanya perlu memanggil fungsi yang menjana carta aliran perniagaan dalam fungsi permulaan untuk memaparkannya dalam halaman web html Gambar rajah proses perniagaan.
window.onload = function() {
generateWorkflow();
}
Apabila kami menjalankan kod javascript ini, kami dapat melihat carta aliran perniagaan yang lengkap di halaman web. Melalui kod javascript yang mudah, kami melaksanakan carta alir untuk menjadikan halaman web lebih jelas dan mudah difahami.
Ringkasan
Artikel ini memperkenalkan cara menggunakan javascript tulen untuk melaksanakan carta aliran perniagaan html. Kami menggunakan elemen kanvas untuk melukis segi empat tepat dan anak panah, dan menghasilkan gambar rajah proses perniagaan melalui kod javascript. Berbanding dengan alat lukisan tradisional, kaedah ini lebih mudah diselenggara dan mudah. Dengan bantuan JavaScript dan teknologi hadapan yang lain, kami boleh melengkapkan pelbagai fungsi praktikal dalam pembangunan web dengan lebih cekap.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan gambarajah proses perniagaan html menggunakan javascript tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!