Eco Notes: Simbol Flowchart JavaScript

Rabu, 21 Oktober 2015

Simbol Flowchart JavaScript

Kode fungsi JavaScript untuk simbol Flowchart

Silakan copy dan paste sendiri ke bagian body dari dokumen HTML. Atau salin dan buat ke dalam file js juga boleh. Untuk masalah syntax, silakan raba-raba sendiri deh (pengin buat tabelnya tapi keburu ngantuk).

<script type="text/javascript">
function drawFlow(n, darix, dariy, kex, key){
   //variables to be used when creating the arrow
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var headlen = 10;

var angle = Math.atan2(key-dariy,kex-darix);

//starting path of the arrow from the start square to the end square and drawing the stroke
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, key);
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();

//starting a new path from the head of the arrow to one of the sides of the point
   ctx.beginPath();
   ctx.moveTo(kex, key);
   ctx.lineTo(kex-headlen*Math.cos(angle-Math.PI/7),key-headlen*Math.sin(angle-Math.PI/7));

//path from the side point of the arrow, to the other side point
   ctx.lineTo(kex-headlen*Math.cos(angle+Math.PI/7),key-headlen*Math.sin(angle+Math.PI/7));

//path from the side point back to the tip of the arrow, and then again to the opposite side point
   ctx.lineTo(kex, key);
   ctx.lineTo(kex-headlen*Math.cos(angle-Math.PI/7),key-headlen*Math.sin(angle-Math.PI/7));

//draws the paths created above
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();
   ctx.fillStyle = "#000000";
   ctx.fill();
}

function drawDecision(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var stgx = (kex-darix)/2;
   var stgy = (key-dariy)/2;
   
   ctx.beginPath();
   ctx.moveTo(darix+stgx, dariy);
   ctx.lineTo(kex, dariy+stgy);
   ctx.lineTo(darix+stgx, key);
   ctx.lineTo(darix, dariy+stgy);
   ctx.closePath();
   
   ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();
   ctx.moveTo((kex-darix)/2, key);
}
function drawProcess(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, dariy);
   ctx.lineTo(kex, key);
   ctx.lineTo(darix, key);
   ctx.closePath();
   
   ctx.fillStyle = warnay;
   ctx.fill();

ctx.strokeStyle = warnax;
   ctx.lineWidth = 2; 
   ctx.stroke();
}

function drawTerminal(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var jar = (key - dariy)/2;
   
   ctx.moveTo(darix, dariy);
   ctx.beginPath();
   ctx.arc(darix+jar,key-jar,jar,0.5*(Math.PI),1.5*(Math.PI));
   ctx.lineTo(kex-jar, dariy);
   ctx.arc(kex-jar,key-jar,jar,1.5*(Math.PI),0.5*(Math.PI));
   ctx.closePath();

ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();

}

function drawData(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var angle = 15; // derajat kemiringan bro
   var jarak = Math.tan(angle*Math.PI/180)*(key - dariy);
   
   ctx.beginPath();
   ctx.moveTo(darix + jarak, dariy);
   ctx.lineTo(kex, dariy);
   ctx.lineTo(kex-jarak, key);
   ctx.lineTo(darix, key);
   ctx.closePath();

ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();

}

function drawConnector(n, darix, dariy, jar, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
//   var jar = (key - dariy)/2;
  
   ctx.moveTo(darix, dariy);
   ctx.beginPath();
   ctx.arc(darix+jar,dariy+jar,jar,0*(Math.PI),2*(Math.PI));
   ctx.closePath();

ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();

}
function drawSubroutine(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var jarak = 0.1*(kex-darix);
   
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, dariy);
   ctx.lineTo(kex, key);
   ctx.lineTo(darix, key);
   ctx.closePath();
   ctx.moveTo(darix+jarak, dariy);
   ctx.lineTo(darix+jarak, key);
   ctx.moveTo(kex-jarak, dariy);
   ctx.lineTo(kex-jarak, key);
   
   ctx.fillStyle = warnay;
   ctx.fill();

ctx.strokeStyle = warnax;
   ctx.lineWidth = 2; 
   ctx.stroke();
}
function drawDelay(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var jar = (key - dariy)/2;
   
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex-jar, dariy);
   ctx.arc(kex-jar,key-jar,jar,1.5*(Math.PI),0.5*(Math.PI));
   ctx.lineTo(darix, key);
   ctx.closePath();

ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();

}
function drawPrep(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var angle = 15; // derajat kemiringan bro
   var jarak = Math.tan(angle*Math.PI/180)*(key - dariy);
   var stgy = (key-dariy)/2;
   
   ctx.beginPath();
   ctx.moveTo(darix+jarak, dariy);
   ctx.lineTo(kex-jarak, dariy);
   ctx.lineTo(kex, key-stgy);
   ctx.lineTo(kex-jarak, key);
   ctx.lineTo(darix+jarak, key);
   ctx.lineTo(darix, key-stgy);
   ctx.closePath();

ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();

}

function drawTeks(n, darix, dariy, ukuran, teks, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   ctx.font = ukuran +" Arial";
   ctx.fillStyle = warnay;
   ctx.fillText(teks,darix,dariy);
   
}
function drawGaris(n, darix, dariy, kex, key){
   //variables to be used when creating the arrow
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");

//starting path of the arrow from the start square to the end square and drawing the stroke
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, key);
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();
}
</script>

Contoh penggunaan

Kode contoh dapat diintip sendiri pada Firefox dengan cara klik kanan > Inspect Element.

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)