如何从 svg 中的所有点知道路径的 m 或 M 点？（使用 raphael.js）

Posted 2023-03-28

【中文标题】如何从 svg 中的所有点知道路径的 m 或 M 点？（使用 raphael.js）

【英文标题】：How to know the m or M point of path from all of points in svg?(use raphael.js)

【发布时间】：2022-01-19 14:15:45

【问题描述】：

我有一张这样的 svg 图片，路径中有 M 和 m。我使用 raphael.js 来计算。我可以通过调用 Raphael.getTotalLength(path) 来得到所有的点，但是我怎么知道从哪一点是 m 后面的路径。 想知道svg的内边框的所有绝对坐标点，这样就可以得到类似下面的数据格式[[外边框的点数],[内边框的点数]]。

这就是我实现它的方式。我可以得到所有的点，但是我无法区分哪些是内框的点，哪些是外框的点。

import Raphael from 'raphael';    

function getPoints(path) 
    let points = [];
    for (let i = 0; i < Raphael.getTotalLength(path); i += step_point) 
        const point = Raphael.getPointAtLength(path, i);
        points.push(point);
    

这是svg内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <path
    d="M72.8525 8.0439c-.405 0-.816.022-1.222.064-4.973.523-8.939 4.112-10.048 8.833-.73-.028-1.453-.043-2.162-.043-5.453 0-10.307.814-14.464 2.423-1.988-3.703-5.849-6.071-10.173-6.071-.973 0-1.949.124-2.899.37-2.994.773-5.508 2.667-7.078 5.331-1.571 2.664-2.01 5.781-1.236 8.775.772 2.986 2.693 5.506 5.301 7.052-1.056 2.419-1.535 4.533-1.814 6.02-.623 3.314-2.519 13.398 5.355 20.728 3.209 2.988 6.672 4.84 10.937 5.8-3.558 4.888-7.226 11.138-8.02 16.945-.349 2.543-.027 4.749.956 6.576l-.149.355c-.034.081-.062.165-.085.25-.315 1.166-.025 2.398.778 3.295.672.754 1.639 1.187 2.649 1.187.044 0 .088-.001.131-.002.27.406.626.758 1.053 1.029.518.33 1.109.519 1.719.55l-1.044 4.167c-.571 2.283.813 4.636 3.086 5.245l10.106 2.708c.372.1.753.15 1.132.15 1.299 0 2.521-.582 3.351-1.595.825-1.008 1.151-2.32.894-3.6-.013-.064-.007-.13.016-.189l1.1-2.829 3.729 6.22c.78 1.3 2.206 2.109 3.723 2.109.759 0 1.509-.202 2.168-.582l9.061-5.232c1.308-.756 2.119-2.108 2.167-3.619.03-.959-.249-1.873-.779-2.627.6-.052 1.175-.255 1.679-.595.42-.283.766-.644 1.024-1.058h.035c1.047 0 2.037-.459 2.713-1.259.778-.92 1.035-2.16.687-3.318-.025-.084-.056-.166-.092-.246l-.158-.35c.933-1.854 1.194-4.068.777-6.6-1.181-7.17-6.763-14.845-10.84-19.646 1.556-.529 3.061-1.122 4.547-1.793 6.708-3.027 9.062-8.913 9.395-11.913.346-3.113-.969-9.08-2.01-12.015-1.056-2.977-3.244-8.332-6.599-12.674 1.647-2.29 2.406-5.105 2.106-7.957-.621-5.911-5.566-10.369-11.503-10.369m0 2c4.84 0 8.997 3.657 9.514 8.578.312 2.97-.769 5.764-2.716 7.735 4.039 4.59 6.48 11.006 7.313 13.355 1.049 2.957 2.192 8.566 1.908 11.126-.285 2.56-2.435 7.696-8.23 10.311-2.229 1.006-4.658 1.897-7.363 2.639.216.171.429.348.617.556 3.231 3.599 10.589 12.513 11.888 20.392.453 2.753-.065 4.727-1.052 6.153l.583 1.294c.149.498.04 1.049-.299 1.451-.296.349-.728.55-1.186.55-.367 0-.722-.13-1.002-.367-.127-.107-.234-.231-.32-.372l-.182-.406c-.053.03-.108.056-.161.085l.17 1.142c.01.521-.245 1.023-.682 1.318-.258.174-.558.266-.867.266-.518 0-.999-.256-1.288-.685-.093-.138-.163-.287-.208-.447l-.078-.525s0 .001-.001.001c-.092.021-.184.022-.277.035-.125.259-.314.488-.566.645-.247.154-.531.235-.82.235-.22 0-.427-.055-.621-.14l1.058 2.404c.18.409.472.758.845 1.006 1.444.961 1.377 3.104-.126 3.973l-9.061 5.23c-.368.213-.77.315-1.168.315-.795 0-1.57-.407-2.008-1.137l-4.403-7.347c-.752-.015-1.524-.056-2.306-.11l-1.698 4.368c-.163.417-.202.87-.114 1.309.3 1.49-.864 2.801-2.284 2.801-.201 0-.407-.026-.614-.082l-10.106-2.708c-1.234-.33-1.974-1.589-1.664-2.827l1.907-7.612c-.062-.027-.127-.044-.185-.077-.256-.151-.451-.374-.584-.631-.092-.01-.185-.009-.278-.027 0 0-.001 0-.001-.001l-.065.532c-.04.159-.105.309-.193.448-.287.45-.777.72-1.312.72-.294 0-.582-.084-.832-.243-.444-.283-.713-.777-.717-1.298l.139-1.147c-.054-.027-.11-.052-.163-.081l-.174.415c-.082.142-.184.268-.307.377-.285.254-.652.395-1.034.395-.441 0-.864-.19-1.158-.519-.35-.392-.474-.939-.339-1.441l.548-1.311c-1.026-1.397-1.598-3.356-1.219-6.121.917-6.699 6.151-14.247 9.637-18.644-4.885-.547-9.142-2.083-13.173-5.836-6.746-6.28-5.521-14.805-4.752-18.894.384-2.041 1.039-4.558 2.526-7.33-2.881-1.035-5.218-3.424-6.041-6.612-1.324-5.122 1.756-10.347 6.877-11.67.802-.207 1.607-.306 2.399-.306 4.097 0 7.844 2.654 9.119 6.698 5.236-2.473 11.057-3.05 15.518-3.05 1.264 0 2.419.047 3.42.109 0 0 .169.006.449.024.281-4.587 3.828-8.437 8.55-8.934.34-.035.678-.053 1.013-.053"
    fill="#F00" stroke="#000" />
</svg>

非常期待您的回答，谢谢！

【问题讨论】：

这可能是一个愚蠢的建议，因为它听起来有点明显，所以你可能还没有这样做 - 但是你为什么不把路径分成两条路径 - 内部和外？在路径描述的中间有一个“m”，用于标记笔从外部路径跳转到内部路径绘制的位置。

【参考方案1】：

正如我在其他地方提到的。您可以在 M 上拆分。如果由于某种原因这没有意义（正如您提到的多个“m”），因为您说“在 m 之后”，那么您需要修改您的问题以更准确地了解拆分的位置，如果这是更普遍的问题的一部分。

所以我们可以在“m”上拆分字符串

var match = new RegExp("(^[^m]*)(.*)", "").exec(path);

并获取第一个路径部分的最后一点...

var point = Raphael.getPointAtLength(match[1], p.getTotalLength(match[1]));

然后将最终点添加到第一个路径...

var p2 = r.path("M" + point.x + "," + point.y + match[2]).attr('stroke','blue')

我已经修改了 getPoints()...

function getPoints(path) 
    let points = [];
    let step_point = 10;
    for (let i = 0; i < path.getTotalLength(); i += step_point) 
        const point = path.getPointAtLength(i);
        points.push(point);
    
    return points;

并获取点集...

console.log(getPoints(p1));
console.log(getPoints(p2));

jsfiddle 为外部/内部显示不同的颜色，并在控制台中转储两组点。

【讨论】：

哇，你的想法太棒了！这确实可以解决m的绝对位置问题。非常感谢！