这周，抽空重构了拓扑程序的脚本。结构化强了，也方便继续扩展了。
还是使用了最新的excanvas.js的最新版和jquery1.4.2。不再使用jquery ui。
除了原来的拖拽功能，还增加了改变大小的功能（先只实现了row-resize功能），以后再实现其他功能。 下来，准备实现element的动态增加、删除功能，和label功能。
JS代码如下：
var jvConstants = {
ELEMENT_ID_PREFIX : 'jvElement_',
ELEMENT_ID_COUNT : 0,
DEFAULT_VALID_COLOR:'#00FF00',
DEFAULT_INVALID_COLOR:'#FF0000',
HIGHLIGHT_STROKEWIDTH:3,
CURSOR_MOVABLE_ELEMENT:'move',
CURSOR_MOVABLE_EDGE:'move',
CURSOR_CONNECT:'pointer',
VALID_COLOR:'#00FF00',
INVALID_COLOR:'#FF0000',
STYLE_STROKECOLOR:'strokeColor',
STYLE_STROKEWIDTH:'strokeWidth',
SHAPE_RECTANGLE:'rectangle',
SHAPE_ELLIPSE:'ellipse',
ELEMENT_TYPE_EDGE:'edge',
BACKGROUND_COLOR:'background-color',
ACTION_MOVE : 'move',
END_POINT_LEFTTOP : 'lt',
END_POINT_LEFTMIDDLE : 'lm',
END_POINT_LEFTBOTTOM : 'lb',
END_POINT_MIDDLETOP : 'mt',
END_POINT_MIDDLEBOTTOM : 'mb',
END_POINT_RIGHTTOP : 'rt',
END_POINT_RIGHTMIDDLE : 'rm',
END_POINT_RIGHTBOTTOM : 'rb'
};
function getMouseButton(eventObject) {
var buttons = {
'left':false,
'middle':false,
'right':false
};
if(eventObject.toString && eventObject.toString().indexOf('MouseEvent') != -1) {
switch(eventObject.button) {
case 0: buttons.left = true; break;
case 1: buttons.middle = true; break;
case 2: buttons.right = true; break;
default: break;
}
} else if(eventObject.button) {
switch(eventObject.button) {
case 1: buttons.left = true; break;
case 2: buttons.right = true; break;
case 3:
buttons.left = true;
buttons.right = true;
break;
case 4: buttons.middle = true; break;
case 5:
buttons.left = true;
buttons.middle = true;
break;
case 6:
buttons.middle = true;
buttons.right = true;
break;
case 7:
buttons.left = true;
buttons.middle = true;
buttons.right = true;
break;
default: break;
}
} else {
return false;
}
return buttons;
};
function jsMap(){
this.clear();
};
jsMap.prototype.map=null;
jsMap.prototype.clear=function(){
this.map = {};
};
jsMap.prototype.get=function(key){
var id=mxObjectIdentity.get(key);
return this.map[id];
};
jsMap.prototype.put=function(key,value){
var id=mxObjectIdentity.get(key);
var previous=this.map[id];
this.map[id]=value;
return previous;
};
jsMap.prototype.remove=function(key){
var id=mxObjectIdentity.get(key);
var previous=this.map[id];
delete this.map[id];
return previous;
};
jsMap.prototype.getKeys=function(){
var result=[];
for(key in this.map){
result.push(key);
}
return result;
};
jsMap.prototype.getValues=function(){
var result=[];
for(key in this.map){
result.push(this.map[key]);
}
return result;
};
function jvPoint(x,y){
this.x = (x!=null)?x:0;
this.y = (y!=null)?y:0;
};
jvPoint.prototype.x=null;
jvPoint.prototype.y=null;
jvPoint.prototype.equals=function(obj){
return obj.x==this.x&&obj.y==this.y;
};
function jvEndPoint(x, y, type, cursor){
jvPoint.call(this, x, y);
this.type = type;
this.cursor = cursor;
};
jvEndPoint.prototype=new jvPoint();
jvEndPoint.prototype.constructor=jvEndPoint;
function jvRectangle(x, y, width, height){
jvPoint.call(this, x, y);
this.width = (width != null) ? width : 0;
this.height = (height != null) ? height : 0;
};
jvRectangle.prototype=new jvPoint();
jvRectangle.prototype.constructor=jvRectangle;
jvRectangle.prototype.width=null;
jvRectangle.prototype.height=null;
jvRectangle.prototype.getCenterX=function(){
return this.x+this.width/2;
};
jvRectangle.prototype.getCenterY=function(){
return this.y+this.height/2;
};
jvRectangle.prototype.getPoint=function(){
return new jvPoint(this.x,this.y);
};
jvRectangle.prototype.equals=function(obj){
return obj.x==this.x&&obj.y==this.y&&obj.width==this.width&&obj.height==this.height;
};
jvRectangle.prototype.grow=function(amount){
this.x-=amount;
this.y-=amount;
this.width+=2*amount;
this.height+=2*amount;
};
function jvStylesheet(){
this.styles = [];
this.putDefaultElementStyle(this.createDefaultElementStyle());
this.putDefaultEdgeStyle(this.createDefaultEdgeStyle());
return this;
};
jvStylesheet.prototype.createDefaultElementStyle = function(){
var style=new Object();
style[jvConstants.STYLE_SHAPE]=jvConstants.SHAPE_RECTANGLE;
style[jvConstants.STYLE_FILLCOLOR]='#C3D9FF';
style[jvConstants.STYLE_STROKECOLOR]='#6482B9';
style[jvConstants.STYLE_FONTCOLOR]='#774400';
style[jvConstants.STYLE_STROKEWIDTH] = 2;
return style;
};
jvStylesheet.prototype.createDefaultEdgeStyle = function(){
var style=new Object();
style[jvConstants.STYLE_SHAPE]=jvConstants.SHAPE_CONNECTOR;
style[jvConstants.STYLE_STROKECOLOR]='#6482B9';
style[jvConstants.STYLE_FONTCOLOR]='#446299';
style[jvConstants.STYLE_STROKEWIDTH] = 2;
return style;
};
jvStylesheet.prototype.putDefaultElementStyle=function(style){
this.putCellStyle('defaultElement',style);
};
jvStylesheet.prototype.putDefaultEdgeStyle=function(style){
this.putCellStyle('defaultEdge',style);
};
jvStylesheet.prototype.getDefaultElementStyle=function(){
return this.styles['defaultElement'];
};
jvStylesheet.prototype.getDefaultEdgeStyle=function(){
return this.styles['defaultEdge'];
};
jvStylesheet.prototype.putCellStyle=function(name,style){
this.styles[name] = style;
};
function jvState(x, y, width, height, action){
jvRectangle.call(this, x, y, width, height);
this.action = action;
}
jvState.prototype =new jvRectangle();
jvState.prototype.constructor = jvState;
jvState.prototype.changed = false;
function jvElement(canvas, type, x, y, width, height){
jvRectangle.call(this, x, y, width, height);
this.canvas = canvas;
this.type = type;
};
jvElement.prototype =new jvRectangle();
jvElement.prototype.constructor = jvElement;
jvElement.prototype.id = null;
jvElement.prototype.shape = null;
jvElement.prototype.frame = null;
jvElement.prototype.endPoints = null;
jvElement.prototype.source = null;
jvElement.prototype.target = null;
jvElement.prototype.edges = null;
jvElement.prototype.edge=false;
jvElement.prototype.lastState=null;
jvElement.prototype.edge=false;
jvElement.prototype.areaCoords = [];
jvElement.prototype.area = null;
jvElement.prototype.isEdge=function(){
return this.edge;
};
jvElement.prototype.setStyle = function(styles, style){
var d = styles.getDefaultElementStyle();
jQuery.extend(this.style, d, style);
};
jvElement.prototype.create = function(){
this.id = $.jvChart.getElementID();
this.container = this.canvas.parentElement;
if (this.type == jvConstants.ELEMENT_TYPE_EDGE){
this.style = $.jvChart.getStylesheet().getDefaultEdgeStyle();
this.edge = true;
}else{
this.edges = [];
this.style = $.jvChart.getStylesheet().getDefaultElementStyle();
this.style[jvConstants.BACKGROUND_COLOR] = $(this.container).css(jvConstants.BACKGROUND_COLOR);
}
this.draw();
this.createArea();
this.bindMouseEvents();
};
jvElement.prototype.move = function(e){
if (this.height < 0){
var t = this.y + this.height;
this.y += this.height;
this.height = Math.abs(this.height);
this.state.y = this.y;
this.state.height = this.height;
this.startY = e.clientY;
if (this.state.action == jvConstants.END_POINT_MIDDLEBOTTOM){
this.state.action = jvConstants.END_POINT_MIDDLETOP;
}else if (this.state.action == jvConstants.END_POINT_MIDDLETOP){
this.state.action = jvConstants.END_POINT_MIDDLEBOTTOM;
}
}
this.updateFrame();
};
jvElement.prototype.updateFrame = function(){
$(this.frame).css('left', this.x).css('top', this.y)
.css('width', this.width).css('height', this.height);
};
jvElement.prototype.updateEndPoints = function(){
var c = this.container;
if (this.endPoints){
$(this.endPoints).remove();
this.endPoints = null;
}
if (this.isEdge()){
}else{
var xr = this.x + this.width,
xm = Math.round(this.x + this.width /2),
yr = this.y + this.height,
ym = Math.round(this.y + this.height /2);
var e = [];
e.push(new jvEndPoint(this.x, this.y, jvConstants.END_POINT_LEFTTOP, 'nw-resize'));
e.push(new jvEndPoint(xm, this.y, jvConstants.END_POINT_MIDDLETOP, 'row-resize'));
e.push(new jvEndPoint(xr, this.y, jvConstants.END_POINT_RIGHTTOP, 'ne-resize'));
e.push(new jvEndPoint(this.x, ym, jvConstants.END_POINT_LEFTMIDDLE, 'col-resize'));
e.push(new jvEndPoint(xr, ym, jvConstants.END_POINT_RIGHTMIDDLE, 'col-resize'));
e.push(new jvEndPoint(this.x, yr, jvConstants.END_POINT_LEFTBOTTOM, 'sw-resize'));
e.push(new jvEndPoint(xm, yr, jvConstants.END_POINT_MIDDLEBOTTOM, 'row-resize'));
e.push(new jvEndPoint(xr, yr, jvConstants.END_POINT_RIGHTBOTTOM, 'se-resize'));
var ep = this.endPoints = [];
$(e).each(function(i){
var l = this.x - 3;
var t = this.y - 3;
ep.push($.jvChart.createElement('div', {
action:this.type}, {position: 'absolute', 'z-index':1,
'background-color':'lime',
left:l, top:t, width: '7px', height: '7px', overflow:'hidden', cursor:this.cursor}, c));
});
var $e = this;
$(ep).each(function(i){
$(this).mousedown(function (e) {
return $e.select(e, $(this).attr('action'));
}).mouseup(function (e) {
return $e.mouseup();
});
});
}
};
jvElement.prototype.reDraw = function(){
if (this.shape){
$(this.shape).remove();
}
this.draw(this);
this.updateFrame();
this.updateEndPoints();
this.bindMouseEvents();
this.state = null;
if (!this.isEdge()){
$(this.edges).each(function(i){
this.reDraw();
});
}
};
jvElement.prototype.createArea = function(){
};
jvElement.prototype.createFrame = function(){
if (this.frame != null){return;}
var c = this.container;
if (c.selectedElement){
c.selectedElement.removeFrame();
}
this.frame = $.jvChart.createElement('div', {
id: c.id + '-frame'
}, {position: 'absolute', 'z-index':-1, border:'dotted 2 lime',
left:this.x, top:this.y, width: this.width, height: this.height}, c);
$(this.frame).mouseup(function (e) {
return true;
});
this.updateEndPoints();
};
jvElement.prototype.removeFrame = function(){
$(this.frame).remove();
this.frame = null;
$(this.endPoints).remove();
this.endPoints = null;
this.state = null;
};
jvElement.prototype.buildArea = function(){
var str = "<area shape=poly style='cursor:move; ' coords=";
var length = $(this.areaCoords).length;
$(this.areaCoords).each(function(i){
str += this.x + ',' + this.y;
if (i != length - 1){
str += ',';
}
});
str +='>';
var area = document.createElement(str);
this.container.imagemap.appendChild(area);
this.area = area;
};
jvElement.prototype.select = function(e, action){
if (this.container.selectedElement){
if (this.container.selectedElement.id != this.id){
this.container.selectedElement.unselect();
}
}
this.createFrame();
this.state = new jvState(this.x, this.y, this.width, this.height, action);
this.startX = e.clientX;
this.startY = e.clientY;
this.container.selectedElement = this;
document.onselectstart=new Function ("return false");
return false;
};
jvElement.prototype.unselect = function(){
this.removeFrame();
};
jvElement.prototype.mouseup = function(){
if (this.state && !this.state.changed){
this.state.action = null;
return false;
}
return true;
};
jvElement.prototype.bindMouseEvents = function(){
if (this.idEdge){return;}
var $e = this;
$(this.shape).css({cursor:'move'}).mousedown(function (e) {
return $e.select(e, jvConstants.ACTION_MOVE);
}).mouseup(function (e) {
return $e.mouseup();
});
};
function jvEllipseElement(canvas, x, y, width, height){
jvElement.call(this, canvas, jvConstants.SHAPE_ELLIPSE, x, y, width, height);
this.create();
return this;
};
jvEllipseElement.prototype = new jvElement();
jvEllipseElement.prototype.constructor = jvEllipseElement;
jvEllipseElement.prototype.draw = function(){
var ctx = this.canvas.getContext('2d');
ctx.beginPath();
var hB = (this.width / 2) * .5522848,
vB = (this.height / 2) * .5522848,
eX = this.x + this.width,
eY = this.y + this.height,
mX = this.x + this.width / 2,
mY = this.y + this.height / 2;
ctx.moveTo(this.x, mY);
ctx.bezierCurveTo(this.x, mY - vB, mX - hB, this.y, mX, this.y);
ctx.bezierCurveTo(mX + hB, this.y, eX, mY - vB, eX, mY);
ctx.bezierCurveTo(eX, mY + vB, mX + hB, eY, mX, eY);
ctx.bezierCurveTo(mX - hB, eY, this.x, mY + vB, this.x, mY);
ctx.closePath();
ctx.strokeStyle = this.style[jvConstants.STYLE_STROKECOLOR];
ctx.lineWidth = this.style[jvConstants.STYLE_STROKEWIDTH];
ctx.fillStyle = this.style[jvConstants.BACKGROUND_COLOR];
ctx.fill();
ctx.stroke();
this.shape = [];
var shapes = this.canvas.getElementsByTagName("shape");
this.shape.push(shapes[shapes.length - 2]);
this.shape.push(shapes[shapes.length - 1]);
};
jvEllipseElement.prototype.createArea = function(){
if (!this.imagemap){return;}
if (this.area){
$(this.area).remove();
this.areaCoords = [];
}
var a = 0.5 * Math.sqrt(this.height * this.height + this.width * this.width),
b = 0.5 * this.height,
e = Math.sqrt(1.0 - b * b / a / a),
ox = 0.5 * (this.x + this.width),
oy = 0.5 * (this.y + this.height),
phi = 0,
sinphi = Math.sin(phi),
cosphi = Math.cos(phi);
for (var i=0;i< 360; i+=15){
var sita = Math.PI / 180.0 * i ,
cn = Math.cos(sita),
sn = Math.sin(sita),
r = b / Math.sqrt( 1.0 - e * e * cn * cn),
tx = r * cn ,
ty = r * sn,
xx = tx * cosphi - ty * sinphi,
yy = ty * cosphi + tx * sinphi;
this.areaCoords.push(new jvPoint(Math.round(xx + ox), Math.round(yy + oy)));
}
this.buildArea();
};
function jvRectangleElement(canvas, x, y, width, height, radius){
jvElement.call(this, canvas, jvConstants.SHAPE_RECTANGLE, x, y, width, height);
this.radius = radius;
this.create();
return this;
};
jvRectangleElement.prototype = new jvElement();
jvRectangleElement.prototype.constructor = jvRectangleElement;
jvRectangleElement.prototype.draw = function(){
var ctx = this.canvas.getContext('2d');
ctx.beginPath();
if (!this.radius) {
ctx.rect(this.x, this.y, this.width, this.height);
} else {
ctx.moveTo(this.x, this.y + this.radius);
ctx.lineTo(this.x, this.y + this.height - this.radius);
ctx.quadraticCurveTo(this.x, this.y + this.height, this.x + this.radius, this.y + this.height);
ctx.lineTo(this.x + this.width - this.radius, this.y + this.height);
ctx.quadraticCurveTo(this.x + this.width, this.y + this.height, this.x + this.width, this.y + this.height - this.radius);
ctx.lineTo(this.x + this.width, this.y + this.radius);
ctx.quadraticCurveTo(this.x + this.width, this.y , this.x + this.width - this.radius, this.y);
ctx.lineTo(this.x + this.radius, this.y);
ctx.quadraticCurveTo(this.x , this.y, this.x, this.y + this.radius);
}
ctx.closePath();
ctx.strokeStyle = this.style[jvConstants.STYLE_STROKECOLOR];
ctx.lineWidth = this.style[jvConstants.STYLE_STROKEWIDTH];
ctx.fillStyle = this.style[jvConstants.BACKGROUND_COLOR];
ctx.fill();
ctx.stroke();
this.shape = [];
var shapes = this.canvas.getElementsByTagName("shape");
this.shape.push(shapes[shapes.length - 2]);
this.shape.push(shapes[shapes.length - 1]);
};
function jvEdgeElement(canvas, source, target){
jvElement.call(this, canvas, jvConstants.ELEMENT_TYPE_EDGE);
this.source = source;
this.target = target;
this.edge = true;
this.create();
return this;
};
jvEdgeElement.prototype = new jvElement();
jvEdgeElement.prototype.constructor = jvEdgeElement;
jvEdgeElement.prototype.draw = function(){
var ctx = this.canvas.getContext('2d');
var p = [{x: this.source.x + this.source.width / 2, y: this.source.y - 1},
{x: this.source.x + this.source.width / 2, y: this.source.y + this.source.height + 1},
{x: this.source.x - 1, y: this.source.y + this.source.height / 2},
{x: this.source.x + this.source.width + 1, y: this.source.y + this.source.height / 2},
{x: this.target.x + this.target.width / 2, y: this.target.y - 1},
{x: this.target.x + this.target.width / 2, y: this.target.y + this.target.height + 1},
{x: this.target.x - 1, y: this.target.y + this.target.height / 2},
{x: this.target.x + this.target.width + 1, y: this.target.y + this.target.height / 2}];
var d = {}, dis = [];
for (var i = 0; i < 4; i++) {
for (var j = 4; j < 8; j++) {
var dx = Math.abs(p[i].x - p[j].x),
dy = Math.abs(p[i].y - p[j].y);
if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
dis.push(dx + dy);
d[dis[dis.length - 1]] = [i, j];
}
}
}
if (dis.length == 0) {
var res = [0, 4];
} else {
var res = d[Math.min.apply(Math, dis)];
}
var x1 = p[res[0]].x,
y1 = p[res[0]].y,
x4 = p[res[1]].x,
y4 = p[res[1]].y/*,
dx = Math.max(Math.abs(x1 - x4) / 2, 10),
dy = Math.max(Math.abs(y1 - y4) / 2, 10),
x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3)*/;
this.x = x1;
this.y = y1;
this.width = x4;
this.height = y4;
ctx.beginPath();
ctx.strokeStyle = this.style[jvConstants.STYLE_STROKECOLOR];
ctx.lineWidth = this.style[jvConstants.STYLE_STROKEWIDTH];
ctx.moveTo(x1, y1);
ctx.lineTo(x4, y4);
ctx.closePath();
ctx.stroke();
this.shape = [];
var shapes = this.canvas.getElementsByTagName("shape");
this.shape.push(shapes[shapes.length - 1]);
};
$.jvChart = $.jvChart || {};
$.extend($.jvChart,{
createElement : function(tag, attribs, styles, parent, nopad) {
var el = document.createElement(tag);
if (attribs) $(el).attr(attribs);
if (nopad) $(el).css({padding: 0, border: 'none', margin: 0});
if (styles) $(el).css(styles);
if (parent) $(parent).append(el);
return el;
},
createCanvas : function(div){
var cvs = $.jvChart.createElement('canvas', {
id: div.id + '-canvas',
width: $(div).width(),
height: $(div).height()
}, {position: 'absolute'}, div);
if ($.browser.msie) {
G_vmlCanvasManager.initElement(cvs);
cvs = document.getElementById(cvs.id);
}
return cvs;
},
createSelect : function(div){
var sd = $.jvChart.createElement('div', {
id: div.id + '-select',
left : 0,
top : 0,
width: 1,
height: 1
}, {position: 'absolute'}, div);
return sd;
},
getElementID : function(){
return jvConstants.ELEMENT_ID_PREFIX + jvConstants.ELEMENT_ID_COUNT ++;
},
dragMove: function(div, e) {
if(div.selectedElement) {
var element = div.selectedElement;
var x = e.clientX - element.startX;
var y = e.clientY - element.startY;
element.x = element.state.x + x;
element.y = element.state.y + y;
element.state.changed = true;
element.move(e);
}
},
bottomResize : function(div, e) {
if(div.selectedElement) {
var element = div.selectedElement;
var y = e.clientY - element.startY;
element.height = element.state.height + y;
element.state.changed = true;
element.move(e);
}
},
topResize : function(div, e) {
if(div.selectedElement) {
var element = div.selectedElement;
var y = e.clientY - element.startY;
element.y = element.state.y + y;
element.height = element.state.height - y;
element.state.changed = true;
element.move(e);
}
},
reDrawConnections : function (paper){
paper.edgePaper.ctx.clearRect(0, 0, paper.width, paper.height);
$(paper.edgePaper.edges).each(function(i){
$.jvChart.drawConnection(paper.edgePaper, document.getElementById(paper.edgePaper.edges[i][0]), document.getElementById(paper.edgePaper.edges[i][1]), 'rgb(0,0,0)', 2);
});
},
reDrawElements : function (paper){
$('.ui-draggable', $(paper.canvas)).remove();
$(paper.elements).each(function(i){
var e = paper.elements[i];
if (e.type == 'ellipse'){
$.jvChart.drawEllipse(paper, e.id, e.x, e.y, e.rx, e.ry, e.color, e.width);
}else if(e.type == 'rectangle'){
$.jvChart.drawRect(paper, e.id, e.x, e.y, e.w, e.h, e.r, e.color, e.width);
}
});
}
});
(function($) {
$.fn.jvChart = function() {
$.extend($.jvChart,{getCvsId : function(){ return getCvsId();}});
$.extend($.jvChart,{getStylesheet : function(){ return new jvStylesheet();}});
return this.each( function() {
this.elements = [];
this.canvas = $.jvChart.createCanvas(this);
this.selectedElement = false;
//createImageMap(this);
$(this).css({overflow:'hidden', position:'relative'});
$(this).mousemove(function (e) {
var element = this.selectedElement;
if(element && element.state ){
var action = element.state.action;
if (action == jvConstants.ACTION_MOVE){
$.jvChart.dragMove(this, e);
}else if (action == jvConstants.END_POINT_MIDDLEBOTTOM){
$.jvChart.bottomResize(this, e);
}else if (action == jvConstants.END_POINT_MIDDLETOP){
$.jvChart.topResize(this, e);
}
}
return false;
}).mouseup(function (e) {
var element = this.selectedElement;
if (element){
if (element.state && element.state.changed){
element.reDraw();
}else{
element.removeFrame();
this.selectedElement = false;
document.onselectstart=new Function ("return true");
}
return false;
}
return true;
});
var $d = this;
});
};
$.fn.extend({
circle : function (x, y, r, color, width, fill, shadow, image) {
return $.jvChart.drawCircle($(this).attr('paper'), x || 0, y || 0, r || 0, color, width, fill, shadow, image);
},
insertEllipse : function (x, y, rx, ry) {
var element = new jvEllipseElement($(this).attr('canvas'), x, y, rx, ry);
$(this).attr('elements').push(element);
return element;
},
insertRectangle : function (x, y, w, h, r) {
var element = new jvRectangleElement($(this).attr('canvas'), x, y, w, h, r);
$(this).attr('elements').push(element);
return element;
},
insertEdge : function(source, target){
var element = new jvEdgeElement($(this).attr('canvas'), source, target);
source.edges.push(element);
target.edges.push(element);
//$(this).attr('elements').push(element);
return element;
},
reDrawCanvas : function(){
var elements = $(this).attr('elements');
$(elements).each( function(i) {
this.reDraw();
this.unselect();
});
}
});
})(jQuery);
调用的代码如下：
$(document).ready(function(){
$("#container").jvChart(300, 200);
var v1 = $("#container").insertEllipse(10, 120, 80, 40);
var v2 = $("#container").insertRectangle(100, 20, 80, 40, 10);
var v4 = $("#container").insertEllipse(200, 100, 50, 50);
var v3 = $("#container").insertRectangle(190, 180, 60, 40, 2);
$("#container").insertEdge(v1, v2);
$("#container").insertEdge(v2, v3);
$("#container").insertEdge(v2, v4);/**/
});
1461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
