<!DOCTYPE html>
<html>
<head>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script src="lib/json2.js" type="text/javascript"></script>
<script src="lib/raphael.js" type="text/javascript"></script>
<script src="src/joint.js" type="text/javascript"></script>
<script src="src/joint.arrows.js" type="text/javascript"></script>
<script src="src/joint.dia.js" type="text/javascript"></script>
<script src="src/joint.dia.serializer.js" type="text/javascript"></script>
<script src="src/joint.dia.fsa.js" type="text/javascript"></script>
<script src="src/joint.dia.uml.js" type="text/javascript"></script>
<script src="src/joint.dia.pn.js" type="text/javascript"></script>
<script src="src/joint.dia.devs.js" type="text/javascript"></script>
<script src="src/joint.dia.cdm.js" type="text/javascript"></script>
<script src="src/joint.dia.erd.js" type="text/javascript"></script>
<script src="src/joint.dia.org.js" type="text/javascript"></script>
<title>Runner.</title>
<style type="text/css">
body {
background-color: #161c1c
}
#world {
background-color: white;
margin: 0 auto 0 auto;
width: 800px;
height: 1000px;
border: 3px solid gray;
border-radius: 30px;
}
#title {
position: fixed;
left: 10px;
top: 10px;
color: white;
font-size: 14px;
}
#description {
position: fixed;
left: 10px;
top: 45px;
color: white;
font-size: 12px;
width: 250px;
}
#source {
position: fixed;
left: 20px;
top: 37px;
color: white;
font-size: 12px;
}
</style>
<script type="text/javascript">
function gup(name){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
function init(){
var srcs = gup("unit").split(',');
for (var i = 0, l = srcs.length; i < l; i++){
var sel = document.createElement("script");
sel.type = "text/javascript";
sel.src = srcs[i] + ".js?" + new Date;
document.getElementById("source").href = srcs[i] + ".js";
document.getElementsByTagName("head").item(0).appendChild(sel);
}
}
function title(s) {
document.getElementById('title').innerHTML = s;
}
function description(s) {
document.getElementById('description').innerHTML = s;
}
function dimension(w, h) {
var world = document.getElementById('world');
world.style.width = w + 'px';
world.style.height = h + 'px';
}
</script>
</head>
<body onload="init()">
<div id="world"></div>
<h1 id="title"></h1>
<p id="description"></p>
<a id="source" href="">(source)</a>
</body>
<script type="text/javascript">
title('Finite State Machines');
description('Give light to your components state transitions.');
dimension(800, 400);
var fsa = Joint.dia.fsa;
Joint.paper("world", 800, 400);
var s1 = fsa.State.create({
position: {x: 120, y: 70},
label: "state 1",
attrs: {
stroke: "blue",
fill: "yellow"
},
});
var s2 = fsa.State.create({
position: {x: 250, y: 100},
label: "state 2"
});
var s3 = fsa.State.create({
position: {x: 150, y: 200},
label: "state 3"
});
var s4 = fsa.State.create({
position: {x: 350, y: 180},
label: "state 4"
});
var s5 = fsa.State.create({
position: {x: 180, y: 300},
label: "state 5"
});
var s6 = fsa.State.create({
position: {x: 300, y: 300},
label: "state 6"
});
var s0 = fsa.StartState.create({
position: {x: 20, y: 20}
});
var se = fsa.EndState.create({
position: {x: 350, y: 50}
});
var all = [s0, se, s1, s2, s3, s4, s5, s6];
s0.joint(s1, fsa.arrow).register(all);
s1.joint(s2, (fsa.arrow.label = "12", fsa.arrow)).register(all);
s1.joint(s3, (fsa.arrow.label = "23", fsa.arrow)).register(all);
s2.joint(se, (fsa.arrow.label = "34", fsa.arrow)).register(all);
s3.joint(s2, (fsa.arrow.label = "45", fsa.arrow)).register(all);
s3.joint(s5, (fsa.arrow.label = "e", fsa.arrow)).register(all);
s5.joint(s4, (fsa.arrow.label = "f", fsa.arrow)).register(all);
s4.joint(s6, (fsa.arrow.label = "g", fsa.arrow)).register(all);
s6.joint(s2, (fsa.arrow.label = "h", fsa.arrow)).register(all);
fsa.arrow.label = null; // empty label
</script>
</html>
类似UML可拖拽图形插件JointJS
4星 · 超过85%的资源 需积分: 31 88 浏览量
2013-07-11
15:20:34
上传
评论
收藏 78KB RAR 举报 
jointJS.rar （15个子文件） 
jointJS 
Runner.jsp 6KB src joint.dia.pn.js 5KB joint.dia.serializer.js 6KB joint.dia.erd.js 5KB joint.dia.devs.js 6KB joint.dia.fsa.js 5KB joint.dia.uml.js 13KB joint.js 73KB joint.dia.cdm.js 9KB joint.dia.js 30KB joint.dia.org.js 3KB joint.arrows.js 8KB
Runner.html 5KB lib raphael.js 141KB json2.js 17KB
- 1
- 2
- 3
前往页