|
|
/**
|
|
|
* 流程图绘制方法集
|
|
|
* 作者：刘广文
|
|
|
* 邮箱：liugw@imut.edu.cn
|
|
|
* 版本：20230813
|
|
|
* 功能：基于canvas实现流程图的绘制
|
|
|
*/
|
|
|
var tool = 2;
|
|
|
var current = -1;
|
|
|
var flag=false;
|
|
|
var mouseX= 0;
|
|
|
var mouseY= 0;
|
|
|
var mouseX1= 0;
|
|
|
var mouseY1= 0;
|
|
|
var aryPoint = [];
|
|
|
var aryObject = [];
|
|
|
|
|
|
//加载工具
|
|
|
function loadTools(target){
|
|
|
target.innerHTML = "<div id=\"arrow2\" onclick=\"clickTool(this, 1);\" title=\"绘制变换流\">开始</div>"
|
|
|
+ "<div id=\"process\" onclick=\"clickTool(this, 2);\" title=\"绘制模块\">模块</div>"
|
|
|
+ "<div id=\"arrow\" onclick=\"clickTool(this, 3);\" title=\"绘制直线连接箭头\"></div>"
|
|
|
+ "<div id=\"arrow1\" onclick=\"clickTool(this, 4);\" title=\"绘制折线连接箭头\"></div>"
|
|
|
+ "<div id=\"link1\" onclick=\"clickTool(this, 5);\" title=\"绘制直线\"></div>"
|
|
|
+ "<div id=\"link2\" onclick=\"clickTool(this, 6);\" title=\"绘制折线\"></div>";
|
|
|
}
|
|
|
//鼠标抬起响应动作
|
|
|
function myMouseUp(e, page){
|
|
|
flag=false;
|
|
|
pushTool(tool, mouseX, mouseY, mouseX1, mouseY1, text.value, color.value, bcolor.value, size.value);
|
|
|
updateTools(cxt);
|
|
|
}
|
|
|
//鼠标移动响应动作
|
|
|
function myMouseMove(e, page){
|
|
|
mouseX1= e.pageX-page.offsetLeft;
|
|
|
mouseY1= e.pageY-page.offsetTop;
|
|
|
if(flag){
|
|
|
var aryPoint1 = [];
|
|
|
var i = 0;
|
|
|
while(i < aryPoint.length){
|
|
|
aryPoint1.push(aryPoint[i]);
|
|
|
i ++;
|
|
|
}
|
|
|
updateTools(cxt);
|
|
|
aryPoint = [];
|
|
|
i = 0;
|
|
|
while(i < aryPoint1.length){
|
|
|
aryPoint.push(aryPoint1[i]);
|
|
|
i ++;
|
|
|
}
|
|
|
if (tool == 4 || tool == 6){
|
|
|
var s = aryPoint[aryPoint.length - 1];
|
|
|
ary = s.split(",");
|
|
|
var x = parseFloat(ary[0]), y = parseFloat(ary[1]);
|
|
|
if (Math.abs(x - mouseX1) > 10 || Math.abs(y - mouseY1) > 10)
|
|
|
aryPoint.push(mouseX1 + "," + mouseY1);
|
|
|
}
|
|
|
drawTool(cxt, tool, mouseX, mouseY, mouseX1, mouseY1, color.value, bcolor.value, size.value);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//鼠标按下响应动作
|
|
|
function myMouseDown(e, page)
|
|
|
{
|
|
|
mouseX= e.pageX-page.offsetLeft;
|
|
|
mouseY= e.pageY-page.offsetTop;
|
|
|
aryPoint = [];
|
|
|
aryPoint.push(mouseX + "," + mouseY);
|
|
|
flag=true;
|
|
|
}
|
|
|
//保存
|
|
|
function save(){
|
|
|
var ary = [];
|
|
|
var i = 0;
|
|
|
while(i <= current){
|
|
|
ary.push(aryObject[i]);
|
|
|
i ++;
|
|
|
}
|
|
|
aryObject = ary;
|
|
|
updateButton();
|
|
|
const fileName = 'scdiagram.txt';
|
|
|
var str = '';
|
|
|
i = 0;
|
|
|
while(i < aryObject.length){
|
|
|
if (i == 0)
|
|
|
str = aryObject[i]
|
|
|
else{
|
|
|
str += "\r\n"
|
|
|
str += aryObject[i]
|
|
|
}
|
|
|
i ++;
|
|
|
}
|
|
|
const content = str
|
|
|
const blob = new Blob([content], {type: 'application/text'});
|
|
|
// 构造一个blob对象来处理数据
|
|
|
// 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
|
|
|
// IE10以上支持blob但是依然不支持download
|
|
|
if ('download' in document.createElement('a'))
|
|
|
{
|
|
|
// 支持a标签download的浏览器
|
|
|
const link = document.createElement('a')
|
|
|
// 创建a标签
|
|
|
link.download = fileName
|
|
|
// a标签添加属性
|
|
|
link.style.display = 'none'
|
|
|
link.href = URL.createObjectURL(blob)
|
|
|
document.body.appendChild(link)
|
|
|
link.click()
|
|
|
// 执行下载
|
|
|
URL.revokeObjectURL(link.href)
|
|
|
// 释放url
|
|
|
document.body.removeChild(link)
|
|
|
// 释放标签
|
|
|
} else {
|
|
|
// 其他浏览器
|
|
|
navigator.msSaveBlob(blob, fileName)
|
|
|
}
|
|
|
}
|
|
|
//撤销
|
|
|
function undo(){
|
|
|
if (current >= 0)
|
|
|
{
|
|
|
current --;
|
|
|
updateTools();
|
|
|
}
|
|
|
updateButton();
|
|
|
}
|
|
|
//刷新按钮状态
|
|
|
function updateButton(){
|
|
|
var undo = document.getElementById("undo");
|
|
|
var redo = document.getElementById("redo");
|
|
|
var save = document.getElementById("save");
|
|
|
if (current >= 0)
|
|
|
{
|
|
|
save.disabled = false;
|
|
|
undo.disabled = false;
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
undo.disabled = true;
|
|
|
save.disabled = true;
|
|
|
}
|
|
|
if (current < aryObject.length - 1)
|
|
|
{
|
|
|
redo.disabled = false;
|
|
|
}
|
|
|
else {
|
|
|
redo.disabled = true;
|
|
|
}
|
|
|
}
|
|
|
//重做
|
|
|
function redo(){
|
|
|
if (current < aryObject.length - 1)
|
|
|
{
|
|
|
current ++;
|
|
|
updateTools();
|
|
|
}
|
|
|
updateButton();
|
|
|
}
|
|
|
|
|
|
//选择工具
|
|
|
function clickTool(o, tag){
|
|
|
tool = tag;
|
|
|
for(var i = 0; i < tools.children.length; i ++){
|
|
|
tools.children[i].style.border = '1px solid black';
|
|
|
}
|
|
|
o.style.border = '2px solid red';
|
|
|
text.hidden = true;
|
|
|
text.value = "";
|
|
|
if (tag == 1)
|
|
|
{
|
|
|
text.hidden = false;
|
|
|
text.value = "变换流名称";
|
|
|
}
|
|
|
if (tag == 2)
|
|
|
{
|
|
|
text.hidden = false;
|
|
|
text.value = "模块名称";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//绘制所有工具
|
|
|
function updateTools(context){
|
|
|
canvas.width = canvas.width;
|
|
|
var i = 0;
|
|
|
while (i <= current){
|
|
|
var ary = aryObject[i].split('|');
|
|
|
var type = parseInt(ary[0]);
|
|
|
var ary1 = ary[1].split(',');
|
|
|
var x1 = parseFloat(ary1[0]);
|
|
|
var y1 = parseFloat (ary1[1]);
|
|
|
var x2 = parseFloat(ary1[2]);
|
|
|
var y2 = parseFloat(ary1[3]);
|
|
|
var size = parseFloat(ary[5]);
|
|
|
var color = ary[3];
|
|
|
var bcolor = ary[4];
|
|
|
if(type == 4 || type == 6){
|
|
|
x2 = parseFloat(ary1[ary1.length - 2]);
|
|
|
y2 = parseFloat(ary1[ary1.length - 1]);
|
|
|
aryPoint = [];
|
|
|
var j = 0;
|
|
|
while(j < ary1.length){
|
|
|
var x = parseFloat(ary1[j]), y = parseFloat(ary1[j + 1]);
|
|
|
aryPoint.push(x + "," + y);
|
|
|
j += 2;
|
|
|
}
|
|
|
}
|
|
|
drawTool(cxt, type, x1, y1, x2, y2, color, bcolor, size);
|
|
|
drawText(cxt, type, x1, y1, x2, y2, ary[2], color);
|
|
|
i ++;
|
|
|
}
|
|
|
}
|
|
|
//保存当前的绘制
|
|
|
function pushTool(type, x1, y1, x2, y2, text, color, bcolor, size){
|
|
|
var ary = [];
|
|
|
var i = 0;
|
|
|
while(i <= current){
|
|
|
ary.push(aryObject[i]);
|
|
|
i ++;
|
|
|
}
|
|
|
aryObject = ary;
|
|
|
var s = type + '|' + x1 + ',' + y1 + ',' + x2 + ',' + y2 + '|' + text + '|' + color + '|' + bcolor + '|' + size;
|
|
|
if(type == 4 || type == 6){
|
|
|
s = type + '|';
|
|
|
i = 0;
|
|
|
while(i < aryPoint.length){
|
|
|
if (i > 0)
|
|
|
s += ",";
|
|
|
s += aryPoint[i];
|
|
|
i ++;
|
|
|
}
|
|
|
s = s + '|' + text + '|' + color + '|' + bcolor + '|' + size;
|
|
|
}
|
|
|
aryObject.push(s);
|
|
|
current ++;
|
|
|
updateButton();
|
|
|
}
|
|
|
//绘制文本
|
|
|
function drawText(context, type, x1, y1, x2, y2, text, color){
|
|
|
if (text == "" || context == null || type < 1) return;
|
|
|
switch(type){
|
|
|
case 2:{
|
|
|
//绘制模块
|
|
|
//计算宽高
|
|
|
var l = x1, t = y1;
|
|
|
var w = x2 - x1, h = y2 - y1;
|
|
|
if (w < 0)
|
|
|
{
|
|
|
l = x2;
|
|
|
w = x1 - x2;
|
|
|
}
|
|
|
if (h < 0){
|
|
|
t = y2;
|
|
|
h = y1 - y2;
|
|
|
}
|
|
|
context.font = "10pt SimSun";
|
|
|
//updateFont(context, w, h, text, 100);
|
|
|
var w1 = getFontWidth(context, text);
|
|
|
var h1 = getFontHeight(context, text);
|
|
|
context.fillStyle = color;
|
|
|
context.fillText(text, l + (w - w1) / 2, t + h1 / 4 + h / 2);
|
|
|
break;
|
|
|
}
|
|
|
case 1: {
|
|
|
//绘制箭头
|
|
|
//计算文字大小
|
|
|
context.font = "10pt SimSun";
|
|
|
var w = getFontWidth(context, text);
|
|
|
var h = getFontHeight(context, text);
|
|
|
//获得输出坐标
|
|
|
var x = (x2 + x1) / 2;
|
|
|
var y = (y2 + y1) / 2;
|
|
|
context.fillStyle = color;
|
|
|
context.fillText(text, x, y);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
//绘制当前工具
|
|
|
function drawTool(context, type, x1, y1, x2, y2, color, bcolor, size){
|
|
|
if (context == null || type < 1) return;
|
|
|
switch(type){
|
|
|
case 1:{
|
|
|
//绘制变换流
|
|
|
//计算箭头方向
|
|
|
var ll = 10, ss = 30;
|
|
|
var a = Math.atan2((y2 - y1), (x2 - x1));
|
|
|
var x3 = x2 - ll * Math.cos(a + ss * Math.PI/180);
|
|
|
var y3 = y2 - ll * Math.sin(a + ss * Math.PI/180);
|
|
|
var x4 = x2 - ll * Math.cos(a - ss * Math.PI/180);
|
|
|
var y4 = y2 - ll * Math.sin(a - ss * Math.PI/180);
|
|
|
context.strokeStyle = color;
|
|
|
context.lineWidth = size;
|
|
|
context.beginPath();
|
|
|
context.moveTo(x1, y1);
|
|
|
context.lineTo(x2, y2);
|
|
|
context.lineTo(x3, y3);
|
|
|
context.moveTo(x2, y2);
|
|
|
context.lineTo(x4, y4)
|
|
|
context.closePath();
|
|
|
context.stroke();
|
|
|
context.beginPath();
|
|
|
context.arc(x1, y1, 5, 0, 360);
|
|
|
context.closePath();
|
|
|
context.fillStyle = bcolor;
|
|
|
context.fill();
|
|
|
context.stroke();
|
|
|
break;
|
|
|
}
|
|
|
case 2:{
|
|
|
//绘制处理框
|
|
|
//计算宽高
|
|
|
var l = x1, t = y1;
|
|
|
var w = x2 - x1, h = y2 - y1;
|
|
|
if (w < 0)
|
|
|
{
|
|
|
l = x2;
|
|
|
w = x1 - x2;
|
|
|
}
|
|
|
if (h < 0){
|
|
|
t = y2;
|
|
|
h = y1 - y2;
|
|
|
}
|
|
|
context.strokeStyle = color;
|
|
|
context.lineWidth = size;
|
|
|
context.beginPath();
|
|
|
context.moveTo(l, t);
|
|
|
context.lineTo(l + w, t);
|
|
|
context.lineTo(l + w, t + h);
|
|
|
context.lineTo(l, t + h);
|
|
|
context.lineTo(l, t);
|
|
|
context.closePath();
|
|
|
context.fillStyle = bcolor;
|
|
|
context.fill();
|
|
|
context.stroke();
|
|
|
break;
|
|
|
}
|
|
|
case 3:{
|
|
|
//绘制连接箭头
|
|
|
//计算箭头方向
|
|
|
var ll = 10, ss = 30;
|
|
|
var a = Math.atan2((y2 - y1), (x2 - x1));
|
|
|
var x3 = x2 - ll * Math.cos(a + ss * Math.PI/180);
|
|
|
var y3 = y2 - ll * Math.sin(a + ss * Math.PI/180);
|
|
|
var x4 = x2 - ll * Math.cos(a - ss * Math.PI/180);
|
|
|
var y4 = y2 - ll * Math.sin(a - ss * Math.PI/180);
|
|
|
context.strokeStyle = color;
|
|
|
context.lineWidth = size;
|
|
|
context.beginPath();
|
|
|
context.moveTo(x1, y1);
|
|
|
context.lineTo(x2, y2);
|
|
|
context.lineTo(x3, y3);
|
|
|
context.moveTo(x2, y2);
|
|
|
context.lineTo(x4, y4)
|
|
|
context.closePath();
|
|
|
context.stroke();
|
|
|
break;
|
|
|
}
|
|
|
case 4:{
|
|
|
//绘制折线连接箭头
|
|
|
if (aryPoint.length < 3)
|
|
|
break;
|
|
|
var ary = aryPoint[aryPoint.length - 2].split(',');
|
|
|
var px1 = parseFloat(ary[0]), py1 = parseFloat(ary[1]);
|
|
|
ary = aryPoint[aryPoint.length - 1].split(',');
|
|
|
var px2 = parseFloat(ary[0]), py2 = parseFloat(ary[1]);
|
|
|
if (Math.abs(px2 - px1) > Math.abs(py2 - py1))
|
|
|
py1 = py2;
|
|
|
else px1 = px2;
|
|
|
//计算箭头方向
|
|
|
var ll = 10, ss = 30;
|
|
|
var a = Math.atan2((py2 - py1), (px2 - px1));
|
|
|
var x3 = px2 - ll * Math.cos(a + ss * Math.PI/180);
|
|
|
var y3 = py2 - ll * Math.sin(a + ss * Math.PI/180);
|
|
|
var x4 = px2 - ll * Math.cos(a - ss * Math.PI/180);
|
|
|
var y4 = py2 - ll * Math.sin(a - ss * Math.PI/180);
|
|
|
context.strokeStyle = color;
|
|
|
context.lineWidth = size;
|
|
|
context.beginPath();
|
|
|
context.lineTo(px2, py2);
|
|
|
context.lineTo(x3, y3);
|
|
|
context.moveTo(px2, py2);
|
|
|
context.lineTo(x4, y4)
|
|
|
context.moveTo(px2, py2);
|
|
|
context.lineTo(px1, py1);
|
|
|
var i = aryPoint.length - 3;
|
|
|
while(i >= 0){
|
|
|
ary = aryPoint[i].split(',');
|
|
|
px2 = parseFloat(ary[0]), py2 = parseFloat(ary[1]);
|
|
|
if (Math.abs(px2 - px1) > Math.abs(py2 - py1))
|
|
|
py2 = py1;
|
|
|
else px2 = px1;
|
|
|
context.moveTo(px1, py1);
|
|
|
context.lineTo(px2, py2);
|
|
|
px1 = px2;
|
|
|
py1 = py2;
|
|
|
i --;
|
|
|
}
|
|
|
context.closePath();
|
|
|
context.stroke();
|
|
|
break;
|
|
|
}
|
|
|
case 5:{
|
|
|
//绘制直线
|
|
|
context.strokeStyle = color;
|
|
|
context.lineWidth = size;
|
|
|
context.moveTo(x1, y1);
|
|
|
context.lineTo(x2, y2);
|
|
|
context.stroke();
|
|
|
}
|
|
|
case 6:{
|
|
|
//绘制折线
|
|
|
if (aryPoint.length < 3)
|
|
|
break;
|
|
|
var ary = aryPoint[aryPoint.length - 2].split(',');
|
|
|
var px1 = parseFloat(ary[0]), py1 = parseFloat(ary[1]);
|
|
|
ary = aryPoint[aryPoint.length - 1].split(',');
|
|
|
var px2 = parseFloat(ary[0]), py2 = parseFloat(ary[1]);
|
|
|
if (Math.abs(px2 - px1) > Math.abs(py2 - py1))
|
|
|
py1 = py2;
|
|
|
else px1 = px2;
|
|
|
context.strokeStyle = color;
|
|
|
context.lineWidth = size;
|
|
|
context.moveTo(px2, py2);
|
|
|
context.lineTo(px1, py1);
|
|
|
var i = aryPoint.length - 3;
|
|
|
while(i >= 0){
|
|
|
ary = aryPoint[i].split(',');
|
|
|
px2 = parseFloat(ary[0]), py2 = parseFloat(ary[1]);
|
|
|
if (Math.abs(px2 - px1) > Math.abs(py2 - py1))
|
|
|
py2 = py1;
|
|
|
else px2 = px1;
|
|
|
context.moveTo(px1, py1);
|
|
|
context.lineTo(px2, py2);
|
|
|
px1 = px2;
|
|
|
py1 = py2;
|
|
|
i --;
|
|
|
}
|
|
|
context.stroke();
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//计算当前字体下的文本宽度
|
|
|
function getFontWidth(context, txt) {
|
|
|
const metrics = context.measureText(txt);
|
|
|
const actual = Math.abs(metrics.actualBoundingBoxLeft ?? 0) + Math.abs(metrics.actualBoundingBoxRight ?? 0);
|
|
|
const width = Math.max(metrics.width, actual);
|
|
|
return width;
|
|
|
}
|
|
|
//计算当前字体下的文本高度
|
|
|
function getFontHeight(context, txt) {
|
|
|
const metrics = context.measureText(txt);
|
|
|
const fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
|
|
|
//所有字在这个字体下的高度
|
|
|
//const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
|
|
|
return fontHeight;
|
|
|
}
|
|
|
//自动调整字体大小
|
|
|
function updateFont(context, w, h, text, size){
|
|
|
context.font = size + "pt SimSun";
|
|
|
w1 = getFontWidth(context, text) * 2;
|
|
|
h1 = getFontHeight(context, text) * 2;
|
|
|
var s = size;
|
|
|
while (w1 > w || h1 > h){
|
|
|
s = s - 1;
|
|
|
context.font = s + "pt SimSun";
|
|
|
w1 = getFontWidth(context, text) * 2;
|
|
|
h1 = getFontHeight(context, text) * 2;
|
|
|
}
|
|
|
return s;
|
|
|
} |
