มาดูตัวอย่างการใช้ Canvas วาด ER Diagram กันครับ
ถ้าดูในโค้ดด้านล่างนี้ จะสังเกตเห็นว่าส่วนของ //LEFT หรือตาราง Master และส่วนของ //RIGHT หรือตาราง Detail ทั้งสองส่วนนี้ จะทำงานซ้ำๆกัน
ซึ่งถ้านำไปใช้จริงก็จะเป็นการดึงฟิลด์ของตารางที่เกี่ยวข้องออกมาวนลูป เพื่อแสดงชื่อฟิลด์ในช่องแต่ละช่อง ตามจำนวนฟิลด์ที่มีในตารางแต่ละตาราง
ตัวอย่างโค้ดวาด ER Diagram
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-color : #eeeeee;
text-align : center;
}
canvas#myCanvas{
border: 1px solid #cccccc;
background-color : #ffffff;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1024" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function Line(y, x1, len){
var x2 = x1+len;
context.beginPath();
context.moveTo(x1, y);
context.lineTo(x2, y);
context.stroke();
}
function arrow_right( y, x1, len){
var tox = x1+len;
var fromx = x1;
var fromy = y;
var toy = y;
var headlen = 10; // length of head in pixels
var angle = Math.atan2(toy-fromy,tox-fromx);
context.beginPath();
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
context.stroke();
}
function arrow_down( x1, y1, len){
var fromx = x1;
var tox = x1;
var fromy = y1;
var toy = y1+len;
var headlen = 10; // length of head in pixels
var angle = Math.atan2(toy-fromy,tox-fromx);
context.beginPath();
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
context.stroke();
}
function Rectangle(x1, y1, w, h){
context.beginPath();
context.rect(x1, y1, w, h);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
var posX = 180;
var posY = 50;
var rectWidth = 200;
var rectHeight = 30;
var rectY = posY;
//LEFT
context.font = 'bold 12pt Calibri';
context.textAlign = 'center';
context.fillText('Master Table', posX + 100, rectY+20);
Rectangle(posX, rectY, rectWidth, rectHeight);
rectY += rectHeight;
Rectangle(posX, rectY, rectWidth, rectHeight);
rectY += rectHeight;
Rectangle(posX, rectY, rectWidth, rectHeight);
rectY += rectHeight;
Rectangle(posX, rectY, rectWidth, rectHeight);
rectY += rectHeight;
Rectangle(posX, rectY, rectWidth, rectHeight);
rectY += rectHeight;
Rectangle(posX, rectY, rectWidth, rectHeight);
//RIGHT
rectPosX = posX + posX + 120;
rect2Y = posY;
context.font = 'bold 12pt Calibri';
context.textAlign = 'center';
context.fillText('Detail Table', rectPosX + 100, rect2Y+20);
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight); rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
rect2Y += rectHeight;
Rectangle(rectPosX, rect2Y, rectWidth, rectHeight);
var lineX = posX + rectWidth;
var lineJoin = posY * 3;
Line(lineJoin, lineX, 50);
context.beginPath();
context.moveTo(lineX+50, 150);
context.lineTo(lineX+50, 100);
context.stroke();
arrow_right(100,lineX+50,50);
</script>
</body>
</html>
จากโค้ดตัวอย่างจะเห็นว่าการวาดเส้น มีเพียงแค่บางส่วนเท่านั้น ยังขาดการเขียนเส้นลูกศร หรือทิศทางอื่น ที่จะต้องดัดแปลงจากโค้ดเดิมที่มีให้เปลี่ยนทิศทางไปตามต้องการ
ซึ่งการนำไปใช้งานเราสามารถใช้ jsPDF ดาวน์โหลดรูปเป็นภาพหรือ PDF ออกมาก็ได้
https://github.com/MrRio/jsPDF
สำหรับการใช้งาน Canvas สามารถศึกษาเพิ่มเติมได้ที่
https://www.html5canvastutorials.com/tutorials/html5-canvas-lines/