Отображение контрольных точек Безье на атрибут d в SVG

Question

Я пытаюсь изменить путь в SVG, манипулируя его контрольными точками, перетаскивая соответствующие маркеры на экране.

Это означает, что я могу использовать координаты x / y 4-х маркеров каждого сегмента (т.е. кубическая кривая Безье) пути SVG в качестве входных данных.

Я бы хотел использовать их для изменения атрибута "d" пути.

Я могу получить доступ к атрибуту "d" как к массиву массивов, подобных этому:

[["M",637,17], ["C",731,81,752,139,711,178], ["C",631,252,623,347,623,347]]

или в его плоской версии, например:

["M",637,17,"C",731,81,752,139,711,178,"C",631,252,623,347,623,347]

Единственное, что я не могу понять, это то, что делает

function dIndex(segmentIndex, handleIndex) {
     // ?????
     return dAttributeArrayIndex
} 

тогда я могу сделать

function setdAttribute(segmentIndex, handleIndex, x, y) {
     // etc etc
}

, что должно работать следующим образом (если я не ошибаюсь, индекс только для координаты x, y будет x + 1):

0 => 1
1 => 4
2 => 6
3 => 8
4 => 11
5 => 13
6 => 15
7 => 18
8 => 20
9 => 22

Я сломал голову, пытаясь понять это в Excel.

Что здесь за функция отображения? Или вообще есть лучший подход, который я пропустил?

Answer 1

Таким образом, мы можем предположить, что есть один ход M, а остальные кубические Безье C?

Кроме того, вы используете две разные системы индексации в своем вопросе. Один с двумя параметрами (segmentIndex и handleIndex) и один с индексом. Я собираюсь предположить, что это первое, что вы хотите.

Также я предполагаю, что handleIndex - это 0, 1 или 2.

Если это так, ваша функция будет выглядеть так:

function dIndex(segmentIndex, handleIndex) {
  if (segmentIndex === 0) {
    // the Move command
    return 1;   // the index of X for the M(ove)
  } else {
    // a Curve command
    return 4 +                      // the index of the first X in the first C
          ((segmentIndex - 1) * 7)  // seven array entries per curve ('C' + six coords)
          + (handleIndex * 2)       // first X is +0; second is +2; third is +4
  }
}



console.log( dIndex(0,0) );   // M

console.log( dIndex(1,0) );
console.log( dIndex(1,1) );
console.log( dIndex(1,2) );

console.log( dIndex(2,0) );
console.log( dIndex(2,1) );
console.log( dIndex(2,2) );

console.log( dIndex(3,0) );
console.log( dIndex(3,1) );
console.log( dIndex(3,2) );