html5 canvas画流程图

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <canvas id="myCanvas" width="1200" height="800" style="border: solid 1px;"></canvas>

        <script type="text/javascript" src="js/arrow.js"></script>

        <script type="text/javascript" src="js/step.js" ></script>

        <script type="text/javascript" src="js/flow.js"></script>

    </body>

</html>

//

//  arrow.js

//  <箭头对象>

//

//  Created by DurantSimpson on 2016-12-08.

//  Copyright 2016 DurantSimpson. All rights reserved.

// 

/**

 *

 * @param {Object} x1起始点横坐标

 * @param {Object} y1起始点纵坐标

 * @param {Object} x2结束点横坐标

 * @param {Object} y2结束点纵坐标

 */

function Arrow(x1, y1, x2, y2) {

    this.x1 = x1;

    this.y1 = y1;

    this.x2 = x2;

    this.y2 = y2;

    this.tmpX1 = null;

    this.tmpY1 = null;

    this.tmpX2 = null;

    this.tmpY2 = null;

    this.color = "black";

}

Arrow.prototype.setColor = function(color) {

    this.color=color;

}

/**

 *

 * @param {Object} x1起始点横坐标

 * @param {Object} y1起始点纵坐标

 * @param {Object} x2结束点横坐标

 * @param {Object} y2结束点纵坐标

 */

Arrow.prototype.setP = function(x1, y1, x2, y2) {

    this.x1 = x1;

    this.y1 = y1;

    this.x2 = x2;

    this.y2 = y2;

}

/**

 * 第一个拐点

 */

Arrow.prototype.setP1 = function(tmpX1,tmpY1) {

    this.tmpX1=tmpX1;

    this.tmpY1=tmpY1;

}

/**

 * 第二个拐点

 */

Arrow.prototype.setP2 = function(tmpX2,tmpY2) {

    this.tmpX2=tmpX2;

    this.tmpY2=tmpY2;

}

Arrow.prototype.drawBottomToTop = function(ctx) {

    if (this.x1 != this.x2) {

        this.setP1(this.x1,(this.y1+this.y2)/2);

        this.setP2(this.x2,(this.y1+this.y2)/2);

        this.draw(ctx);

    }else{

        this.draw(ctx);

    }

}

Arrow.prototype.drawLeftOrRightToTop = function(ctx) {

        this.setP1(this.x2,this.y1);

        this.draw(ctx);

}

Arrow.prototype.drawLeftToRightOrRightToLeft = function(ctx) {

    if (this.y1 != this.y2) {

        this.setP1((this.x1+this.x2)/2,this.y1);

        this.setP2((this.x1+this.x2)/2,this.y2);

        this.draw(ctx);

    }else{

        this.draw(ctx);

    }

}

Arrow.prototype.draw = function(ctx) {

    // arbitrary styling

    ctx.strokeStyle = this.color;

    ctx.fillStyle = this.color;

    // draw the line

    ctx.beginPath();

    ctx.moveTo(this.x1, this.y1);

    if(this.tmpX1 != null && this.tmpY1 != null && this.tmpX2 != null && this.tmpY2 != null) {

        ctx.lineTo(this.tmpX1, this.tmpY1);

        ctx.closePath();

        ctx.stroke();

        ctx.beginPath();

        ctx.moveTo(this.tmpX1, this.tmpY1)

        ctx.lineTo(this.tmpX2, this.tmpY2);

        ctx.closePath();

        ctx.stroke();

        ctx.beginPath();

        ctx.moveTo(this.tmpX2, this.tmpY2);

        ctx.lineTo(this.x2, this.y2);

        ctx.closePath();

        ctx.stroke();

        var endRadians = Math.atan((this.y2 - this.tmpY2) / (this.x2 - this.tmpX2));

        endRadians += ((this.x2 >= this.tmpX2) ? 90 : -90) * Math.PI / 180;

        this.drawArrowhead(ctx, this.x2, this.y2, endRadians);

    } else if(this.tmpX1 != null && this.tmpY1 != null && this.tmpX2 == null && this.tmpY2 == null) {

        ctx.lineTo(this.tmpX1, this.tmpY1);

        ctx.closePath();

        ctx.stroke();

        ctx.beginPath();

        ctx.moveTo(this.tmpX1, this.tmpY1)

        ctx.lineTo(this.x2, this.y2);

        ctx.closePath();

        ctx.stroke();

        var endRadians = Math.atan((this.y2 - this.tmpY1) / (this.x2 - this.tmpX1));

        endRadians += ((this.x2 >= this.tmpX1) ? 90 : -90) * Math.PI / 180;

        this.drawArrowhead(ctx, this.x2, this.y2, endRadians);

    }else if(this.tmpX1 == null && this.tmpY1 == null && this.tmpX2 == null && this.tmpY2 == null){

        ctx.lineTo(this.x2, this.y2);

        ctx.closePath();

        ctx.stroke();

        var endRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));

        endRadians += ((this.x2 >= this.x1) ? 90 : -90) * Math.PI / 180;

        this.drawArrowhead(ctx, this.x2, this.y2, endRadians);

    }

}

/**

 * 画箭头

 */

Arrow.prototype.drawArrowhead = function(ctx, x, y, radians) {

    ctx.save();

    ctx.beginPath();

    ctx.translate(x, y);

    ctx.rotate(radians);

    ctx.moveTo(0, 0);

    ctx.lineTo(5, 10);

    ctx.lineTo(-5, 10);

    ctx.closePath();

    ctx.restore();

    ctx.fill();

}

//

//  step.js

//  <流程图对象>

//

//  Created by DurantSimpson on 2016-12-08.

//  Copyright 2016 DurantSimpson. All rights reserved.

//

function drawRoundRect(x, y, w, h) {

    var r = h / 2;

    cxt.beginPath();

    cxt.moveTo(x + r, y);

    cxt.arcTo(x + w, y, x + w, y + h, r);

    cxt.arcTo(x + w, y + h, x, y + h, r);

    cxt.arcTo(x, y + h, x, y, r);

    cxt.arcTo(x, y, x + w, y, r);

    cxt.closePath();

    cxt.stroke();

}

function drawRhombus(x, y, l) {

    cxt.beginPath();

    cxt.moveTo(x, y + l);

    cxt.lineTo(x - l * 2, y);

    cxt.lineTo(x, y - l);

    cxt.lineTo(x + l * 2, y);

    cxt.closePath();

    cxt.stroke();

}

/**

 * 圆角矩形开始对象

 * @param {Object} x

 * @param {Object} y

 */

function Start(x, y) {

    this.h = 50;

    this.w = 2 * this.h;

    this.x = x;

    this.y = y;

    drawRoundRect(x - this.w / 2, y - this.h / 2, this.w, this.h);

}

/**

 * 矩形步骤对象

 * @param {Object} x

 * @param {Object} y

 */

function Step(x, y) {

    this.flag = "step";

    this.h = 50;

    this.w = 2 * this.h;

    this.x = x;

    this.y = y;

    cxt.strokeRect(x - this.w / 2, y - this.h / 2, this.w, this.h);

}

/**

 * 菱形条件对象

 * @param {Object} x

 * @param {Object} y

 */

function Condition(x, y) {

    this.flag = "condition";

    this.l = 30;

    this.x = x;

    this.y = y;

    drawRhombus(x, y, this.l);

}

Start.prototype.drawBottomToTop = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x, this.y + this.h / 2, obj.x, obj.y - obj.h / 2);

        arrow.drawBottomToTop(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x, this.y + this.h / 2, obj.x, obj.y - obj.l);

        arrow.drawBottomToTop(cxt);

    }

}

Step.prototype.drawBottomToTop = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x, this.y + this.h / 2, obj.x, obj.y - obj.h / 2);

        arrow.drawBottomToTop(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x, this.y + this.h / 2, obj.x, obj.y - obj.l);

        arrow.drawBottomToTop(cxt);

    }

}

Condition.prototype.drawBottomToTop = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x, this.y + this.l, obj.x, obj.y - obj.h / 2);

        arrow.drawBottomToTop(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x, this.y + this.l, obj.x, obj.y - obj.l);

        arrow.drawBottomToTop(cxt);

    }

}

Condition.prototype.drawRightToTop = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x + this.l * 2, this.y, obj.x, obj.y - obj.h / 2);

        arrow.drawLeftOrRightToTop(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x + this.l * 2, this.y, obj.x, obj.y - obj.l);

        arrow.drawLeftOrRightToTop(cxt);

    }

}

Condition.prototype.drawLeftToTop = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x - this.l * 2, this.y, obj.x, obj.y - obj.h / 2);

        arrow.drawLeftOrRightToTop(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x - this.l * 2, this.y, obj.x, obj.y - obj.l);

        arrow.drawLeftOrRightToTop(cxt);

    }

}

Condition.prototype.drawRightToLeft = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x + this.l * 2, this.y, obj.x - this.w / 2, obj.y);

        arrow.drawLeftToRightOrRightToLeft(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x + this.l * 2, this.y, obj.x - this.l * 2, obj.y);

        arrow.drawLeftToRightOrRightToLeft(cxt);

    }

}

Condition.prototype.drawLeftToRight = function(obj) {

    if(obj.flag == "step") {

        var arrow = new Arrow(this.x - this.l * 2, this.y, obj.x + this.w / 2, obj.y);

        arrow.drawLeftToRightOrRightToLeft(cxt);

    } else if(obj.flag == "condition") {

        var arrow = new Arrow(this.x - this.l * 2, this.y, obj.x + this.l * 2, obj.y);

        arrow.drawLeftToRightOrRightToLeft(cxt);

    }

}

//

//  flow.js

//  <主要逻辑>

//

//  Created by DurantSimpson on 2016-12-08.

//  Copyright 2016 DurantSimpson. All rights reserved.

//

var canvas = document.getElementById("myCanvas");

var cxt = canvas.getContext('2d');

var start = new Start(600,25);//新建开始对象

var step1 = new Step(600,105);//新建第一个步骤

start.drawBottomToTop(step1); //画箭头(从开始对象指向第一个步骤)

var condition1 = new Condition(300, 200);//新建第一个条件对象

var condition2 = new Condition(450, 200);

var condition3 = new Condition(600, 200);

var condition4 = new Condition(750, 200);

var condition5 = new Condition(900, 200);

step1.drawBottomToTop(condition1);//画箭头(从第一个步骤指向第一个条件)

step1.drawBottomToTop(condition2);

step1.drawBottomToTop(condition3);

step1.drawBottomToTop(condition4);

step1.drawBottomToTop(condition5);

var step2 = new Step(450,295);

var step3 = new Step(750,295);

condition1.drawBottomToTop(step2);

condition2.drawBottomToTop(step2);

condition3.drawBottomToTop(step2);

condition4.drawBottomToTop(step3);

condition5.drawBottomToTop(step3);

var condition6 = new Condition(300, 400);

var condition7 = new Condition(450, 400);

var condition8 = new Condition(750, 400);

var condition9 = new Condition(900, 400);

var condition10 = new Condition(450, 500);

var condition11 = new Condition(900, 500);

var condition12 = new Condition(450, 600);

var condition13 = new Condition(900, 600);

step2.drawBottomToTop(condition6);

step3.drawBottomToTop(condition9);

var step4 = new Step(300,725);

var step5 = new Step(450,725);

var step6 = new Step(600,725);

var step7 = new Step(750,725);

var step8 = new Step(900,725);

condition6.drawBottomToTop(step4);

condition6.drawRightToLeft(condition7);

condition7.drawRightToTop(step6);

condition7.drawBottomToTop(condition10);

condition8.drawBottomToTop(step7);

condition9.drawLeftToRight(condition8);

condition9.drawBottomToTop(condition11);

condition10.drawBottomToTop(condition12);

condition11.drawBottomToTop(condition13);

condition12.drawBottomToTop(step5);

condition13.drawBottomToTop(step8);

/*canvas.onclick = function(e) { //给canvas添加点击事件

    e = e || event; //获取事件对象

    //获取事件在canvas中发生的位置

    var x = e.clientX - canvas.offsetLeft;

    var y = e.clientY - canvas.offsetTop;

    //如果事件位置在矩形区域中

    alert('x:' + x + "y:" + y);

     if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){

         alert('clicked')

     }

}*/

html5 canvas画流程图的更多相关文章

canvas画流程图
用canvas画流程图: 需求:最后一个圆圈无直线遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
CSS3进度条和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
html5 canvas画饼
1. [图片] lxdpie.jpg 2. [文件] lqdpie.html ~ 801B 下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
html5 canvas画不出图像的原因
很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...
HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
html5 canvas 画hello ketty
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

Ruby多行字符串，begin/end语句、注释
#!/usr/bin/ruby #puts "Hello ,Ruby!"; print <<EOF #多行字符串以<<开头紧接着为结束字符串标识声明并 ...
DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
C# 如何用多个字符串来切分字符串并去除空格
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
Fiddler
Fiddler教程: 原文:http://kb.cnblogs.com/page/130367/
windows批处理语法
写批处理文件,除了了解基本语法外,你还需要熟悉常用的windows命令,那就先看看这篇文章:windows常用命令 #重要说明文件及目录路径:要使用反斜杠'\',不要使用正斜杠'/' 如:del d ...
Oracle 11g RAC停止和启动步骤
关闭前备份控制文件/参数文件: sqlplus / as sysdba alter database backup controlfile to '/home/oracle/control.ctl ...
高并发应用场景下的负载均衡与故障转移实践，AgileEAS.NET SOA 负载均衡介绍与实践
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
Excel word “由于本机的限制_该操作已被取消_请与管理员联系”的已生效解决办法 (转 )
正常解决方法: 1.打开开始菜单,在运行里输入regedit,回车 2.在注册表中,导航到HKEY_CURRENT_USER\Software\Classes\.html 项 3.在默认项上点右键选择 ...
Struts2漏洞利用实例
Struts2漏洞利用实例如果存在struts2漏洞的站,administrator权限,但是无法加管理组,内网,shell访问500. 1.struts2 漏洞原理:struts2是一个框架,他在 ...
自定义ActionBar完全覆盖系统的
//加载ActionBar的方法 @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this ...

html5 canvas画流程图

html5 canvas画流程图的更多相关文章

随机推荐

热门专题