var paths = new Array();
var autonext = -1;
var draw = function(type, opts) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", type);
for (var k in opts) {
svg.setAttribute(k, opts[k]);
}
return svg;
};
var getCircleDestination = function(from, to) {
var tx = parseFloat(to.getAttribute("cx"));
var ty = parseFloat(to.getAttribute("cy"));
var fx = from.center.x;
var fy = from.center.y;
var w = fx - tx;
var h = fy - ty;
var z = Math.sqrt(w * w + h * h);
var r = parseFloat(to.getAttribute("r"));
var dz = z / r;
var dx = tx + w / dz;
var dy = ty + h / dz;
/* dx2,dy2・・・ここをより改良する必要があります */
var dx2 = tx + w / (dz * 1.2);
var dy2 = ty + h / (dz * 1.2);
var circle = draw("circle", {
"cx": dx,
"cy": dy,
"r": 3,
"fill": "red"
});
return {
"s": {
"x": dx2,
"y": dy2
},
"svg": circle
};
};
var nextline = function(){
var x = Math.random() * canvas.clientWidth/4;
var y = Math.random() * canvas.clientHeight;
if(Math.random() * 100 < 50){x+=canvas.clientWidth/4*3;}
var from = {
"center": {
"x": x,
"y": y
}
};
var svg = getCircleDestination(from, circle);
var c = svg.svg;
var stx = svg.s.x;
var sty = svg.s.y;
var ttx = svg.s.x + (Math.random() * 10 + 15) * (svg.s.x < x ? 1 : -1);
var tty = svg.s.y + (Math.random() * 10 + 15) * (svg.s.y < y ? 1 : -1);
var p = draw("path", {
"d": "M" + x + "," + y + " Q " + ttx + "," + tty + " " + stx + "," + sty + " " + c.getAttribute("cx") + "," + c.getAttribute("cy"),
"stroke": "black",
"fill": "none",
"marker-end": "url(#endpoint)"
});
canvas.appendChild(c);
canvas.appendChild(p);
paths.push({
"c": c,
"p": p
});
if (paths.length > 10) {
var t = paths.shift();
t.c.remove();
t.p.remove();
}
}
var canvas = draw("svg", {
"width": "400",
"height": "150",
"style": "background-color:#f0f0f0;border:1px solid black;"
});
var def = draw("defs", {});
var marker = draw("marker", {
"id": "endpoint",
"viewBox": "-50 0 50 50",
"refX": 0,
"refY": 25,
"markerUnits": "strokeWidth",
"markerWidth": 10,
"markerHeight": 10,
"orient": "auto"
});
var marker_path = draw("path", {
"d": "M -50 0 L 0 25 L -50 50 z"
});
var btn = document.createElement("button");
btn.style.display = "block";
btn.innerHTML = "Add Line";
canvas.appendChild(def);
canvas.appendChild(marker);
marker.appendChild(marker_path);
document.getElementById("canvas").appendChild(canvas);
document.getElementById("canvas").appendChild(btn);
var circle = draw("circle", {
"cx": 200,
"cy": 75,
"r": 10,
"fill": "white",
"stroke": "black",
"stroke-width": 1,
"opacity": 0.5
});
canvas.appendChild(circle);
btn.addEventListener("click", function() { nextline(); });
btn.addEventListener("mouseover",function(){if(autonext == -1){btn.innerHTML = 'Right Click to Interval';}else{btn.innerHTML = 'Right Click to Stop Interval';}});
btn.addEventListener("mouseout",function(){btn.innerHTML = 'Add Line';});
btn.addEventListener("contextmenu", function() {
if(autonext == -1){
autonext = setInterval(function(){nextline();},500);
}else{
clearTimeout(autonext);
autonext = -1;
}
return false;
});
<div id="canvas"></div>