Use excanvas.js achieve Topology

June 9, 2011
recently looked excanvas.js, feeling is a good thing.
always wanted to use js to achieve topological features, just try. Use the latest version of the excanvas.js, also uses jquery and jquery ui to the latest version.
renderings are

four nodes can be dragged with the mouse , the connection between the line will follow the re-painting.
js code below
$. 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: one margin: 0});

if (styles) $ (el). css (styles);
if (parent) parent.appendChild (el);
return el; < br />
},
drawEllipse: function (paper, x, y, rx, ry, color, width, fill, shadow, image) {
var ctx = paper.ctx;
ctx.beginPath ();
var div = document.createElement (“
“; width: ” rx ” ; height: ” ry “; gt;”);
$ (paper.canvas). append (div);
ctx.element_ = div;
$ (div). draggable ({
stop: function (event, ui) {
$. jvChart.reDrawConnections (paper);
}
});
x = y = 0;
var hB = (rx / 2) *. 5522848,
vB = (ry / 2) * .5522848,
eX = x rx,
eY = y ry, < br />
mX = x rx / 2,
mY = y ry / 2;
ctx.moveTo (x, mY);
ctx.bezierCurveTo (x, mY – vB, mX – hB, y, mX, y);
ctx.bezierCurveTo (mX hB, y, eX, mY – vB , eX, mY);
ctx.bezierCurveTo (eX, mY vB, mX hB, eY, mX, eY);
ctx.bezierCurveTo (mX – hB , eY, x, mY vB, x, mY);
ctx.closePath ();
if (color