javascript - 使用 .getBBox() 方法在 JavaScript 中为 SVG 路径形状添加编号

Question

我正在尝试将数字放入自定义形状中。我正在使用 getBBox() 来查找形状的中心。它仅适用于某些形状，因为中心点可能不在空心形状内。

Codepen 上的演示: https://codepen.io/arindamx01/pen/KKyLNrj?editors=1010
这是我的 JavaScript 代码:

    let colorGroup = ['#700843', '#E95C87', '#AED9C5', '#FDFCFD', '#F8AF3F'];
    colorGroup.forEach( function(e, i) { 
    console.log(e, i);
    $(`path[data-color-group = "${e}"]`).each(function(){
        let pathBBox = $(this)[0].getBBox();
        console.log(pathBBox, $(this)[0])
        let getPathData = $(this).attr("data-index");

        var svgNS = "http://www.w3.org/2000/svg";
        var newText = document.createElementNS(svgNS,"text");
        newText.setAttributeNS(null,"x", pathBBox.x + pathBBox.width/2);     
        newText.setAttributeNS(null,"y", pathBBox.y + pathBBox.height/2);                    
        newText.setAttributeNS(null,"font-size","10");
        var textNode = document.createTextNode(i+1);
        newText.appendChild(textNode);
        document.getElementById("myIdInfo").appendChild(newText); 
    });
});

我尝试使用 getBBox() 方法，但它不适用于所有形状。

在上图中，数字 4 应位于空心 C 形状内。

Answer 1

每个形状都不一样，盒子的中心可能不在实际形状里面。对于那些空心形状，没有确切的中心。你只需要找到任何合适的点落在形状内。

考虑盒子的中心作为原点，我们可以尝试找到与 x 和 y 轴相交的点。并在两个交叉点之间选择一个点:
演示 codesandbox .加载需要一些时间。

    let sv = document.querySelector('svg');
    let colorGroup = ['#700843', '#E95C87', '#AED9C5', '#FDFCFD', '#F8AF3F'];
    colorGroup.forEach(function (e, i) {
      $(`path[data-color-group = "${e}"]`).each(function (ii, aa) {
        let path = $(this)[0]

        if (i == 3) {
          path.setAttribute('style', `fill: #cf0acf`);
        } else if (i == 0) {
          path.setAttribute('style', `fill: #a35a83`);
        } else {
          path.setAttribute('style', `fill: ${e}`);
        }

        //console.log(pathBBox, path);
        let getPathData = $(this).attr("data-index");

        point = getInsidePoint(path);


        var svgNS = "http://www.w3.org/2000/svg";
        var newText = document.createElementNS(svgNS, "text");
        newText.setAttributeNS(null, "x", point.x);
        newText.setAttributeNS(null, "y", point.y);
        newText.setAttributeNS(null, "font-size", "10");
        var textNode = document.createTextNode(i + 1);
        newText.appendChild(textNode);
        document.getElementById("myIdInfo").appendChild(newText);
      });
    });

    // figure out point insice the shape
    function getInsidePoint(path) {
      let pathBBox = path.getBBox();
      let point = sv.createSVGPoint();
      point.x = Math.floor(pathBBox.x + pathBBox.width / 2);
      point.y = Math.floor(pathBBox.y + pathBBox.height / 2);

      // if mid point is inside then return
      if (path.isPointInFill(point)) {
        return point;
      }

      let result = sv.createSVGPoint();
      let l = path.getTotalLength();
      let h = [];  // horizontal intersections
      let v = [];  // vertical intersections

      // find intersecting points along x and y axis
      for (let i = 0; i < l; i++) {
        let p = path.getPointAtLength(i);
        p.x = Math.floor(p.x)
        p.y = Math.floor(p.y);

        if (p.x == point.x) v.push(p);
        if (p.y == point.y) h.push(p);
      }

      // whichever axis has less intersecitions 
      // get center point of the intersection
      try {
        if (h.length < v.length) {
          result.y = point.y;
          // find out which point in between two intersection points falls inside
          for (let i = 0; i < h.length - 1; i++) {
            result.x = Math.abs(h[i + 1].x - h[i].x) / 2;
            if (result.x < 2) continue;
            result.x += Math.min(h[i + 1].x, h[i].x);
            if (path.isPointInFill(result)) {
              break;
            }
          }
        } else {
          result.x = point.x;
          for (let i = 0; i < v.length - 1; i++) {
            result.y = Math.abs(v[i + 1].y - v[i].y) / 2;
            if (result.y < 2) continue;
            result.y += Math.min(v[i + 1].y, v[i].y);
            if (path.isPointInFill(result)) {
              break;
            }
          }
        }
      } catch (e) {
        // ignore errors for dots and open shapes
      }

      return result;
    } 

它的外观如下:

注意，使用 getInsidePoint 函数来调整数字位置。这不是最有效的实现，引用 this回答更有效的实现方法。

---

可能的改进可能是:

• 为每个形状手动找出更好的点，并将它们放在路径元素中的 data-* 属性中:

<path data-label-x='10' data-label-y='40' ...>...</path>

并使用这些坐标。无需每次都在客户端计算。

• 如果图表是可缩放的，则标记相似的形状。并且只对一个形状进行计算，并为所有相似的形状使用相同的点，并考虑旋转。