Skip to content

davehandong / cflowchart

Go to a project
Commit feea54da by HanDongdong
Options

fix bug for previous commit.

parent d5e06524
Inline Side-by-side
Showing with 49 additions and 48 deletions
src/main/java/com/sinosoft/cflowchart/mapper/FlowChartMapper.xml
......@@ -6,11 +6,11 @@
<resultMap type="com.sinosoft.cflowchart.model.FlowChart" id="flowChartMapper">
<id column="id" property="id"/>
<result column="type" property="type"/>
<result column="positionX" property="positionX"/>
<result column="positionY" property="positionY"/>
<result column="position_x" property="positionX"/>
<result column="position_y" property="positionY"/>
<result column="text" property="text"/>
<result column="prevId" property="prevId"/>
<result column="nextId" property="nextId"/>
<result column="prev_id" property="prevId"/>
<result column="next_id" property="nextId"/>
<result column="color" property="color"/>
</resultMap>
......
src/main/webapp/assets/js/flowchart.js
......@@ -4,10 +4,15 @@ var cfchart = {
data: null,
node_width: 129,
node_height: 46,
init: function(arg){
imgPath: '',
init: function(arg, imgPath){
this.c = document.getElementById(arg);
this.ctx = this.c.getContext('2d');
this.ctx.font = '15px 宋体';
if(imgPath){
this.imgPath = imgPath;
}
this.ctx.clearRect(0,0,this.c.width,this.c.height);
},
draw: function(arg){
this.data = arg;
......@@ -16,7 +21,7 @@ var cfchart = {
try {
this.drawGraphics(item);
}catch(err){
// console.log(err);
console.log(err);
}
}
},
......@@ -24,19 +29,19 @@ var cfchart = {
if(obj.type == 'picture'){ // draw the node
var img = new Image();
img.onload = function(){
this.ctx.drawImage(img,obj.positionX,obj.positionY);
var text_posx = parseFloat(obj.positionX) + (this.node_width-obj.text.length*15)/2;
cfchart.ctx.drawImage(img,obj.positionX,obj.positionY);
var text_posx = parseFloat(obj.positionX) + (cfchart.node_width-obj.text.length*15)/2;
var text_posy = parseFloat(obj.positionY) + 29;
ctx.strokeText(obj.text, text_posx, text_posy);
cfchart.ctx.strokeText(obj.text, text_posx, text_posy);
}
if(obj.COLOR == 'red')
img.src = 'node_u.gif';
else if(obj.COLOR == 'green')
img.src = 'node_f.gif';
else if(obj.COLOR == 'blue')
img.src = 'node_c.gif';
if(obj.color == 'red')
img.src = this.imgPath+'node_u.gif';
else if(obj.color == 'green')
img.src = this.imgPath+'node_f.gif';
else if(obj.color == 'blue')
img.src = this.imgPath+'node_c.gif';
}else{ //draw the line
this.drawHandle(obj.ID);
this.drawHandle(obj.id);
}
},
drawHandle: function(lineId){
......@@ -48,9 +53,9 @@ var cfchart = {
if(gap_x == 0 && gap_y == 0){ //self loop
var img = new Image();
img.onload = function(){
ctx.drawImage(img,parseFloat(pic1.positionX)+55,parseFloat(pic1.positionY)+30);
this.ctx.drawImage(img,parseFloat(pic1.positionX)+55,parseFloat(pic1.positionY)+30);
}
img.src = 'loop.gif';
img.src = this.imgPath+'loop.gif';
}else{
var xDistance = (this.node_height/2)*gap_x/gap_y;
var yDistance = (this.node_width/2)*gap_y/gap_x;
......@@ -83,7 +88,7 @@ var cfchart = {
}
}
}
len = getLineLength(line1,line2,'x');
len = this.getLineLength(line1,line2,'x');
if(isNaN(len)){
len = gap_y - this.node_height;
}
......@@ -114,7 +119,7 @@ var cfchart = {
startY = startY - 5;
}
}
len = getLineLength(line1, line2, 'y');
len = this.getLineLength(line1, line2, 'y');
if(isNaN(len)){
len = gap_x - this.node_width;
}
......@@ -132,11 +137,11 @@ var cfchart = {
len = Math.abs(parseFloat(pic1.positionX)-parseFloat(pic2.positionX));
len = len - this.node_width - 21;
}
console.log(pic2.COLOR);
var arrow = 'line_u.gif';
if(pic2.COLOR != 'red' && pic1.COLOR != 'red')
arrow = 'line_c.gif';
drawLine(angle, len, startX, startY, arrow);
// console.log(pic2.color);
var arrow = this.imgPath+'line_u.gif';
if(pic2.color != 'red' && pic1.color != 'red')
arrow = this.imgPath+'line_c.gif';
this.drawLine(angle, len, startX, startY, arrow);
}
},
getAngle: function(line1, line2){
......@@ -145,14 +150,14 @@ var cfchart = {
},
getLineLength: function(line1, line2, point){
var len = 0;
var angle = getAngle(line1, line2);
var angle = this.getAngle(line1, line2);
if(point == 'x'){
var hypotenuse = line1/Math.sin(angle);
var _hypotenuse = node_height/2/line2*hypotenuse;
var _hypotenuse = this.node_height/2/line2*hypotenuse;
len = hypotenuse - _hypotenuse * 2;
}else{
var hypotenuse = line1/Math.sin(angle);
var _hypotenuse = node_width/2/line2*hypotenuse;
var _hypotenuse = this.node_width/2/line2*hypotenuse;
len = hypotenuse - _hypotenuse * 2;
}
return len;
......@@ -160,21 +165,21 @@ var cfchart = {
drawLine: function(angle,length,offsetx,offsety,arrow){
var arch = new Image();
arch.onload = function(){
ctx.save();
ctx.translate(offsetx,offsety);
ctx.rotate(angle);
ctx.drawImage(arch,31,0,15,17,length,-8,15,17);
ctx.lineWidth=4;
if(arrow =='line_c.gif'){
ctx.strokeStyle='rgb(255,50,50)';
cfchart.ctx.save();
cfchart.ctx.translate(offsetx,offsety);
cfchart.ctx.rotate(angle);
cfchart.ctx.drawImage(arch,31,0,15,17,length,-8,15,17);
cfchart.ctx.lineWidth=4;
if(arrow == this.imgPath+'line_c.gif'){
cfchart.ctx.strokeStyle='rgb(255,50,50)';
}else{
ctx.strokeStyle='rgb(70,70,70)';
cfchart.ctx.strokeStyle='rgb(70,70,70)';
}
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(length,0);
ctx.stroke();
ctx.restore();
cfchart.ctx.beginPath();
cfchart.ctx.moveTo(0,0);
cfchart.ctx.lineTo(length,0);
cfchart.ctx.stroke();
cfchart.ctx.restore();
}
arch.src = arrow;
}
......
src/main/webapp/index.jsp
......@@ -7,11 +7,7 @@
<title>This is a DEMO for flow chart show by canvas</title>
<style type="text/css">
body { text-align: center; }
.flowCanvas {
width: 70rem;
height: 40rem;
border: 1px solid red;
}
.flowCanvas { border: 1px solid red; }
.conditions-container { margin: 1.2rem; }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/jquery/jquery-3.2.1.js"></script>
......@@ -19,7 +15,7 @@
<script type="text/javascript">
var c, ctx;
$(document).ready(function(){
cfchart.init('flowCanvas');
cfchart.init('flowCanvas', '${pageContext.request.contextPath}/assets/images/');
});
function search(){
var flowId = document.getElementById('flowId').value;
......@@ -45,6 +41,6 @@
<input type="text" name="recordId" id="recordId" value="4028d1c96163b75b016168dc95270001">
<button onclick="search()">查询</button>
</div>
<canvas id="flowCanvas" class="flowCanvas"></canvas>
<canvas class="flowCanvas" id="flowCanvas" width="1200" height="650"></canvas>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment