Question

我试图通过拖动屏幕上的相应手柄来操纵其控制点来更改SVG中的路径。

这意味着我可以使用SVG路径的每个线段（即三次贝塞尔曲线）的4个手柄的x / y坐标作为输入。

我想用它们来改变路径的“ 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) );

将贝塞尔曲线控制点映射到SVG中的d属性

1 个答案: