Question

getTotalLength和getPointAtLength似乎忽略了转换。在此：

<path id="path"
      transform="scale(1 1)"
      d="M 137.077 222.345 C 124.162 222.345 120.887 258.264 120.887 265.519 C 120.887 289.603 115.13 315.169 129.522 325.962 C 148.995 340.568 167.219 344.292 180.251 347.549 C 210.399 355.086 228.43 359.24 246.091 360.502 C 281.021 362.997 302.891 362.903 322.724 361.581 C 357.33 359.274 374.138 351.966 391.803 347.549 C 409.773 343.057 427.54 326.205 432.818 313.01 C 441.201 292.051 458.843 282.426 464.119 266.598"
      stroke="black" fill="none" />

此代码

var p = document.getElementById('path')
var l = p.getTotalLength()
console.log(l)

打印493.8976745605469

在此：

<path id="path"
      transform="scale(2 2)"
      d="M 137.077 222.345 C 124.162 222.345 120.887 258.264 120.887 265.519 C 120.887 289.603 115.13 315.169 129.522 325.962 C 148.995 340.568 167.219 344.292 180.251 347.549 C 210.399 355.086 228.43 359.24 246.091 360.502 C 281.021 362.997 302.891 362.903 322.724 361.581 C 357.33 359.274 374.138 351.966 391.803 347.549 C 409.773 343.057 427.54 326.205 432.818 313.01 C 441.201 292.051 458.843 282.426 464.119 266.598"
      stroke="black" fill="none" />

完全相同的值。

如何获取getTotalLength和getPointAtLength根据转换进行计算？

Answer 1

对于.getTotalLength()，数学很简单。如果您使用统一的比例尺，则长度可以简单地乘以该数字；或更普遍地

transform = scale(sx, sy) =>
length' = length * √(sx² + sy²)

但是，如果您尝试沿着路径查找点，则必须使用 untransformed 值。如果.getTotalLength()的结果是400，并且路径均匀地缩放为2，则总长度可能是800，但是要找到沿路径90％的点，您仍然需要计算.getPointAtLength(360)。 / p>

要变换您在.getPointAtLength()中找到的点，可以像这样使用SVGMatrix：

var p = document.getElementById('path');
var svg = p.ownerSVGElement; // only <svg> elements have a method to init SVGMatrix

var matrix = svg.createSVGMatrix().scaleNonUniform(sx, sy); // or .scale(s) for uniform scale

var point = p.getPointAtLength(length).matrixTransform(matrix);

如何在缩放路径上使用getTotalLength和getPointAtLength？

1 个答案: