Как вычислить контрольные точки кривой Безье, которые избегают объектов?

подход Безье

первоначально вопрос является широким - возможно, даже широким, поскольку существует множество различных сценариев, которые необходимо учитывать, чтобы сделать "одно решение, которое подходит для всех". Это целый проект сам по себе. Для этого я представлю основа на решение, которое можно развивать - это не полное решение (но близко к одному..). В конце я добавил несколько предложений по дополнениям.

в основные шаги для этого решения:

сгруппируйте заметки в две группы, левую и правую части.

контрольные точки затем основаны на наибольшем угле от первой (конечной) точки и расстоянии до любой другой заметки в этой группе и последней конечной точки до любой точки во второй группе.

полученные углы из двух групп затем удваиваются (максимум 90°) и используются в качестве основы для расчета контрольных точек (в основном вращение точки). Расстояние может быть дополнительно обрезано с помощью значения натяжения.

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

несколько снимков из процесс:

основной код в Примере разделен на два раздела, два цикла, которые анализируют каждую половину, чтобы найти максимальный угол, а также расстояние. Это может быть объединено в один цикл и иметь второй итератор для перехода справа на середину в дополнение к тому, который идет слева на середину, но для простоты и лучшего понимания того, что происходит, я разделил их на два цикла (и ввел ошибку во второй половине-просто знать. Оставлю это как упражнение):

var dist1 = 0,  // final distance and angles for the control points
    dist2 = 0,
    a1 = 0,
    a2 = 0;

// get min angle from the half first points
for(i = 2; i < len * 0.5 - 2; i += 2) {

    var dx = notes[i  ] - notes[0],      // diff between end point and
        dy = notes[i+1] - notes[1],      // current point.
        dist = Math.sqrt(dx*dx + dy*dy), // get distance
        a = Math.atan2(dy, dx);          // get angle

    if (a < a1) {                        // if less (neg) then update finals
        a1 = a;
        dist1 = dist;
    }
}

if (a1 < -0.5 * Math.PI) a1 = -0.5 * Math.PI;      // limit to 90 deg.

и то же самое со второй половиной, но здесь мы переворачиваем углы, поэтому их легче обрабатывать, сравнивая текущую точку с конечной точкой вместо конечной точки по сравнению с текущей точкой. После того, как петля сделана, мы переворачиваем ее на 180°:

// get min angle from the half last points
for(i = len * 0.5; i < len - 2; i += 2) {

    var dx = notes[len-2] - notes[i],
        dy = notes[len-1] - notes[i+1],
        dist = Math.sqrt(dx*dx + dy*dy),
        a = Math.atan2(dy, dx);

    if (a > a2) {
        a2 = a;
        if (dist2 < dist) dist2 = dist;            //bug here*
    }
}

a2 -= Math.PI;                                     // flip 180 deg.
if (a2 > -0.5 * Math.PI) a2 = -0.5 * Math.PI;      // limit to 90 deg.

(ошибка заключается в том, что самое длинное расстояние используется, даже если более короткая точка расстояния имеет больший угол - я позволю ему быть сейчас, как это подразумевается в качестве примера. Это может быть исправлено путем реверса итерации.).

отношение, которое я нашел, работает хорошо, это разница в углах между полом и точкой два раза:

var da1 = Math.abs(a1);                            // get angle diff
var da2 = a2 < 0 ? Math.PI + a2 : Math.abs(a2);

a1 -= da1*2;                                       // double the diff
a2 += da2*2;

теперь мы можем просто рассчитать контрольные точки и использовать значение напряжения для точной настройки результата:

var t = 0.8,                                       // tension
    cp1x = notes[0]     + dist1 * t * Math.cos(a1),
    cp1y = notes[1]     + dist1 * t * Math.sin(a1),
    cp2x = notes[len-2] + dist2 * t * Math.cos(a2),
    cp2y = notes[len-1] + dist2 * t * Math.sin(a2);

и вуаля:

ctx.moveTo(notes[0], notes[1]);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, notes[len-2], notes[len-1]);
ctx.stroke();

добавление эффекта сужения

создать кривую более визуально угождая сужать можно добавить просто путем делать следующее вместо этого:

вместо поглаживания пути после добавления первой кривой Безье отрегулируйте контрольные точки с небольшим смещением угла. Затем продолжите путь, добавив еще одну кривую Безье, идущую справа налево, и, наконец, заполните ее (fill() закроет путь неявно):

// first path from left to right
ctx.beginPath();
ctx.moveTo(notes[0], notes[1]);                    // start point
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, notes[len-2], notes[len-1]);

// taper going from right to left
var taper = 0.15;                                  // angle offset
cp1x = notes[0] + dist1*t*Math.cos(a1-taper);
cp1y = notes[1] + dist1*t*Math.sin(a1-taper);
cp2x = notes[len-2] + dist2*t*Math.cos(a2+taper);
cp2y = notes[len-1] + dist2*t*Math.sin(a2+taper);

// note the order of the control points
ctx.bezierCurveTo(cp2x, cp2y, cp1x, cp1y, notes[0], notes[1]);
ctx.fill();                                        // close and fill

конечный результат (с псевдо-нотами-натяжение = 0.7, заполнение = 10)

скрипка

предложения по улучшению:

• если расстояния обеих групп большие или углы крутые, их, вероятно, можно использовать как сумму для уменьшения напряжения (расстояния) или увеличения его (угла).
• фактор доминирования / площади может повлиять на расстояния. Доминирование, указывающее, где самые высокие части смещены (лежит ли он больше в левой или правой стороне, и влияет на напряжение для каждой стороны соответственно). Это может быть / потенциально достаточно само по себе, но должно быть протестировано.
• смещение угла конусности также должно иметь отношение к сумме расстояния. В некоторых случаях линии пересекаются и выглядят не очень хорошо. Сужение может быть заменено ручным подходом, анализирующим точки Безье (ручная реализация) и добавляющим расстояние между исходными точками и точками для возвращаемого пути в зависимости от массива позиция.

надеюсь, что это помогает!