<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web画线</title>
<style type="text/css">
* {
font-size: 12px;
}
#workspace {
width: 600px;
padding-top: 50px;
margin: 0 auto;
}
#canvas,#toolbar {
float: left;
}
#canvas {
height: 400px;
width: 400px;
position: relative;
border: 1px blue solid;
}
#canvas div {
white-space: nowrap;
}
#toolbar {
height: 400px;
width: 196px;
border: 1px green solid;
}
#toolbar div {
cursor: move;
margin: 0 0;
width: 3em;
}
.clear {
clear: both;
}
.handle {
cursor: move;
}
#mark {
position: absolute;
top: 0;
left: 0;
background-color: transparent;
}
#canvas div.vertex {
position: absolute;
background: #ffffff;
cursor: move;
width: 55px;
height: 55px;
z-index: 2;
border: 1px black solid;
}
#canvas div.end {
border: 1px red solid;
}
#canvas div.active {
border: 1px red solid;
}
div.arrow {
position: absolute;
line-height: 0;
z-index: 1;
cursor: pointer;
}
</style>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="graph.js"></script>
<script type="text/javascript">
document.observe("dom:loaded",function(){
var icons = $$('#toolbar div');
icons.each(function(icon){
new Draggable(icon,{revert: true, ghosting: true,
reverteffect: function(element, top_offset, left_offset) {
element.setStyle({left:0,top:0});
}
});
});
model = new GraphModel();
view = new GraphView();
controller = new GraphController(model,view);
controller.addVertex("k",10,10).addVertex("p",80,70).addVertex("u",200,100);
});
</script>
</head>
<body>
<div id="workspace">
<div>
<input id="unilateral" type="button" value="单向连线" />
<!--input id="bilateral" type="button" value="双向连线" /-->
</div>
<div id="canvas">
<canvas id="main" width="400" height="400"></canvas>
<canvas id="mark" width="400" height="400"></canvas>
</div>
<div id="toolbar">
<div id="a">图标一</div>
<div id="b">图标二</div>
<div id="c">图标三</div>
<div id="d">图标四</div>
<div id="e">图标五</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
评论0
最新资源