I'm trying to draw a bezier curve surrounding an ellipse with a given margin :
I want to achieve this programmatically, so if I changes the ellipse size, the curve will follow it.
At the moment I've made this function :
function bezierPathTopRounded(ellipse, margin) {
var box = ellipse.paper.getBBox();
var leftX = box.x - margin;
var rightX = box.x + margin + box.width;
var y = box.y + box.height/2 - margin;
var p = "M "+ leftX + ", "+ y
+ " C " //could be relative too
+ ( box.x - margin + (box.width/15) ) + ", " + ( box.y + margin - (box.height/4.5) ) + " "
+ ( box.x + margin + box.width - (box.width/15) ) + ", " + ( box.y + margin - (box.height/4.5) ) + " "
+ rightX +", " + y;
return p;
}
But I can't figure out how to calculate this direction points values so that it will work with any ellipse :
- box.width/15
- box.height/4.5
There is a fiddle with this example.
I've read this stackoverflow question and I tried the same on my example, but still can't figure out a simple solution, it remains random...
Edit
Now I'm trying with an elliptical A
rc, the result is worser than with a Bezier Path :
There is the function I'm using. If I remove the margin it follows exactly my ellipse... Finally this is the matter is how may I follow the ellipse with a margin ?
function borderPath(ellipse, margin, flag) {
var flag = flag == undefined ? 1 : 0;
var box = ellipse.paper.getBBox();
var leftX = box.x - margin;
var rightX = box.x + margin + box.width;
var y = box.y + box.height/2;
y += (flag == 1) ? -margin : margin;
var rx = box.width/2 + margin;
var ry = box.height/2;
var p = "M "+ leftX + ", "+ y
+ " A "
+ rx + " " + ry
+ " 0 0 "+ flag +" "
+ rightX +", " + y;
return p;
}
See the updated fiddle here.
Really sorry for the awful colors, those are for example purpose.