JavaScript-将二维曲线图SVG的Path转为二维坐标数组


保留两位小数:

function pathToPoints(path) {
  const commands = path.split(/(?=[LMC])/);
  const points = [];
  for (const command of commands) {
    const [type, ...args] = command.split(/[\s,]+/);
    if (type === 'M' || type === 'L') {
      points.push([Math.round(+args[0] * 100) / 100, Math.round((+args[1]) * 100) / 100]);
    } else if (type === 'C') {
      points.push(
        [Math.round(+args[0] * 100) / 100, Math.round((+args[1]) * 100) / 100],
        [Math.round(+args[2] * 100) / 100, Math.round((+args[3]) * 100) / 100],
        [Math.round(+args[4] * 100) / 100, Math.round((+args[5]) * 100) / 100]
      );
    }
  }
  return points;
}

如果只关心C(三次贝塞尔曲线)的最终坐标:

function pathToPoints(path) {
  const commands = path.split(/(?=[LMC])/);
  const points = [];
  for (const command of commands) {
    const [type, ...args] = command.split(/[\s,]+/);
    if (type === 'M' || type === 'L') {
      points.push([Math.round(+args[0] * 100) / 100, Math.round((+args[1]) * 100) / 100]);
    } else if (type === 'C') {
      points.push([Math.round(+args[4] * 100) / 100, Math.round((+args[5]) * 100) / 100]);
    }
  }
  return points;
}

示例

var path = 'M 0.0,100.0 C 1.0,92.6 2.0,65.0 5.0,63.0 C 8.0,61.0 11.0,86.4 15.0,90.0 C 19.0,93.6 21.0,98.7 25.0,80.8 C 29.0,63.0 31.0,9.8 35.0,0.8 C 39.0,-8.3 41.0,22.4 45.0,35.7 C 49.0,49.1 51.0,59.3 55.0,67.5 C 59.0,75.7 61.0,74.4 65.0,76.6 C 69.0,78.8 71.0,78.1 75.0,78.6 C 79.0,79.1 81.0,81.2 85.0,79.1 C 89.0,76.9 91.0,72.1 95.0,68.0 C 99.0,63.8 101.0,69.0 105.0,58.3 C 109.0,47.6 111.0,26.1 115.0,14.6 C 119.0,3.1 121.0,-1.8 125.0,0.8 C 129.0,3.5 131.0,17.6 135.0,27.8 C 139.0,38.0 141.0,48.2 145.0,51.7 C 149.0,55.3 151.0,43.8 155.0,45.5 C 159.0,47.3 161.0,58.8 165.0,60.5 C 169.0,62.2 171.0,52.3 175.0,54.0 C 179.0,55.8 181.0,65.9 185.0,69.3 C 189.0,72.7 191.0,70.6 195.0,71.1 C 199.0,71.6 201.0,79.6 205.0,72.0 C 209.0,64.3 211.0,40.1 215.0,32.6 C 219.0,25.2 221.0,33.3 225.0,34.8 C 229.0,36.3 231.0,47.0 235.0,40.1 C 239.0,33.1 241.0,-3.2 245.0,0.0 C 249.0,3.2 251.0,40.5 255.0,56.2 C 259.0,71.9 261.0,74.5 265.0,78.5 C 269.0,82.5 271.0,77.5 275.0,76.2 C 279.0,74.9 281.0,71.2 285.0,72.0 C 289.0,72.8 291.0,79.0 295.0,80.0 C 299.0,81.0 301.0,78.2 305.0,77.0 C 309.0,75.8 311.0,76.4 315.0,74.2 C 319.0,72.0 321.0,71.3 325.0,66.1 C 329.0,60.9 331.0,47.5 335.0,48.0 C 339.0,48.6 341.0,67.4 345.0,68.8 C 349.0,70.2 351.0,58.4 355.0,55.2 C 359.0,51.9 361.0,55.7 365.0,52.7 C 369.0,49.8 371.0,41.7 375.0,40.4 C 379.0,39.2 381.0,43.5 385.0,46.5 C 389.0,49.5 391.0,52.4 395.0,55.4 C 399.0,58.4 401.0,58.5 405.0,61.5 C 409.0,64.4 411.0,69.4 415.0,70.1 C 419.0,70.9 421.0,66.7 425.0,65.2 C 429.0,63.7 431.0,63.2 435.0,62.6 C 439.0,62.1 441.0,63.1 445.0,62.4 C 449.0,61.7 451.0,62.0 455.0,59.3 C 459.0,56.6 461.0,47.2 465.0,48.8 C 469.0,50.3 471.0,62.9 475.0,67.2 C 479.0,71.5 481.0,67.9 485.0,70.3 C 489.0,72.8 491.0,80.1 495.0,79.5 C 499.0,79.0 501.0,72.6 505.0,67.5 C 509.0,62.4 511.0,54.4 515.0,54.1 C 519.0,53.8 521.0,66.8 525.0,66.0 C 529.0,65.2 531.0,51.0 535.0,50.1 C 539.0,49.2 541.0,58.9 545.0,61.4 C 549.0,64.0 551.0,61.2 555.0,62.9 C 559.0,64.7 561.0,70.7 565.0,70.2 C 569.0,69.7 571.0,63.5 575.0,60.5 C 579.0,57.5 581.0,55.9 585.0,55.3 C 589.0,54.8 591.0,53.8 595.0,57.9 C 599.0,62.0 601.0,72.3 605.0,75.7 C 609.0,79.1 611.0,75.4 615.0,74.9 C 619.0,74.4 621.0,71.7 625.0,73.2 C 629.0,74.6 631.0,80.1 635.0,82.1 C 639.0,84.1 641.0,85.7 645.0,83.3 C 649.0,80.9 651.0,75.2 655.0,70.1 C 659.0,65.1 661.0,58.9 665.0,58.0 C 669.0,57.0 671.0,63.6 675.0,65.4 C 679.0,67.3 681.0,64.9 685.0,67.1 C 689.0,69.3 691.0,76.1 695.0,76.5 C 699.0,76.9 701.0,69.8 705.0,69.1 C 709.0,68.4 711.0,74.7 715.0,72.9 C 719.0,71.1 721.0,62.9 725.0,60.2 C 729.0,57.5 731.0,57.6 735.0,59.5 C 739.0,61.5 741.0,66.4 745.0,69.9 C 749.0,73.3 751.0,76.5 755.0,76.7 C 759.0,76.9 761.0,70.0 765.0,70.7 C 769.0,71.4 771.0,85.2 775.0,80.1 C 779.0,75.0 781.0,50.7 785.0,45.2 C 789.0,39.8 791.0,47.4 795.0,52.7 C 799.0,58.1 801.0,66.0 805.0,72.1 C 809.0,78.2 811.0,80.6 815.0,83.1 C 819.0,85.7 821.0,85.4 825.0,84.9 C 829.0,84.3 831.0,82.5 835.0,80.4 C 839.0,78.3 841.0,74.7 845.0,74.4 C 849.0,74.1 851.0,78.0 855.0,78.9 C 859.0,79.8 861.0,82.0 865.0,78.8 C 869.0,75.7 871.0,66.3 875.0,63.4 C 879.0,60.4 881.0,62.9 885.0,64.1 C 889.0,65.4 891.0,74.2 895.0,69.6 C 899.0,65.1 901.0,48.6 905.0,41.5 C 909.0,34.5 911.0,27.5 915.0,34.6 C 919.0,41.6 921.0,65.7 925.0,76.8 C 929.0,87.9 931.0,87.4 935.0,90.0 C 939.0,92.6 941.0,90.0 945.0,90.0 C 949.0,90.0 951.0,90.0 955.0,90.0 C 959.0,90.0 961.0,90.0 965.0,90.0 C 969.0,90.0 971.0,90.0 975.0,90.0 C 979.0,90.0 981.0,91.3 985.0,90.0 C 989.0,88.7 992.0,84.7 995.0,83.4 C 998.0,82.1 999.0,80.1 1000.0,83.4 C 1001.0,86.7 1000.0,96.7 1000.0,100.0'
var points = pathToPoints(path)

文章作者: 钱不寒
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 钱不寒 !
  目录