Рисунок часть эллипса программно с Безье или эллиптической траектории - SVG и Raphaël.js

Question

Я пытаюсь нарисовать кривую Безье окружающей эллипс с заданным запасом:

I хочу добиться этого программно, поэтому, если я изменю размер эллипса, кривая последует за ним.

На данный момент я сделал эту функцию:

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; 
} 

Но я не могу понять, как вычислить это направление значений точек так, что он будет работать с любым эллипсом:

• box.width/15
• box.height/4,5

Существует fiddle with this example.

Я прочитал это stackoverflow question и я попробовал то же самое на моем примере, но до сих пор не могу понять, простое решение, оно остается случайным ...

Редактировать

Теперь я м, пытаясь с эллиптическим A гсом, результат worser чем с путем Безье:

Существует функцию я использую. Если я удаляю поле, он точно соответствует моему эллипсу ... Наконец, это вопрос, как я могу следовать за эллипсом с запасом?

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; 
} 

См. updated fiddle here.

Действительно извините за ужасные цвета, это, например, цель.

Answer 1

Мне удалось создать эллипсовую дугу в соответствии с эллипсом и его краем. Чем я просто скрываю часть, которую я не хочу с прямоугольником.

Вот функция:

function borderPath(ellipse, flag) { 
    var flag = flag == undefined ? 1 : flag; 

    var box = ellipse.paper.getBBox(); 

    var leftX = box.x; 

    var rightX = box.x + box.width; 

    var y = box.y + box.height/2; 

    var rx = box.width/2; 
    var ry = box.height/2; 

    var p = "M "+ leftX + ", "+ y 
    + " A " 
    + rx + " " + ry 
    + " 0 0 "+ flag +" " 
    + rightX +", " + y; 

    return p; 
} 

Answer 2

Если вы хотите сделать это с помощью кривых Безье, вам придется решить, как «неправильно» вы хотите, чтобы он выглядел. Кривые Безье не могут представлять круговые (а также удлиненные, эллиптические) кривые, они могут только стать очень близкими, точно так же, как многоугольник, с большей точностью, используя меньшее количество секций.

я описываю как круг приближения и кривой компенсируя с помощью кривых Безье в моей грунтовке на кривых Безье, http://pomax.github.io/bezierinfo/#circles_cubic и http://pomax.github.io/bezierinfo/#offsetting соответственно, но если вы кодирование это с нуля особенно компенсирующим будет излишним, если вам это нужно только для чего вы описываете в своем примере.

Вместо этого я рекомендовал бы запустить Inkscape или Illustrator, включив наложение сетки и нарисовать кривую безье вокруг вашего эллипса. Сделайте это хорошо, затем проверьте, что такое координаты, и используйте это как достаточно надежную информацию для реализации в вашей программе холста. Вы, вероятно, не нуждаетесь в математически жесткой правильности, если люди не идут «это выглядит неправильно», вы должны быть в порядке.

Answer 3

Использование кривых Безье для рисования эллиптического пути может вызвать головные боли. Как вы сказали в комментарии, вы используете дугу пути, которая хорошо работает с RaphaelJS.

Документацию обо всех значениях, которые она ожидает, особенно флаги, можно найти по адресу http://www.svgbasics.com/arcs.html.