Question

我目前正在开发一个SVG“馅饼”，它允许用户在彩色轮子中概览网站的所有类别。

现在我可以在不同的形状上使用eventlistener绘制饼图。

  var svg = document.getElementById('categSVG');
  var startAngle = -89.999;
  var nbCateg = 6;
  var svgMiddleX = svg.width / 2;
  var svgMiddleY = svg.height / 2;
  var segmentWidth = 100;

  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    };
  }

  function describeArc(x, y, radius, startAngle, endAngle) {

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
      "M", start.x, start.y,
      "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ];

    return d.join(" ");
  }

  function pathGen(nSegment) {
    var newPath;

    for (var i = 1; i <= nSegment; i++) {
      //Adding path
      newPath = document.createElementNS('http://www.w3.org/2000/svg', "path");

      newPath.setAttribute("id", "arc" + i);
      newPath.setAttribute("stroke", '#' + (Math.random() * 0xFFFFFF << 0).toString(16));
      newPath.setAttribute("d", describeArc(150, 150, 100, startAngle, 270));
      newPath.setAttribute("stroke-width", segmentWidth);

      svg.appendChild(newPath);

      startAngle += 360 / nbCateg;
    }
  }

  function init() {
    pathGen(nbCateg);
    var elem;

    for (var i = 1; i <= nbCateg; i++) {
      document.getElementById("arc" + i).addEventListener("click", function() {
        console.log('I would redirect to ' + this.id); //will change
      });
    }
  }

  init();

svg {
  height: 1000px;
  width: 1000px;
}

path {
  fill: none;
}

<svg id="categSVG"></svg>

但是我找不到在饼图部分中间显示文本（在这种情况下为html ID）的方法。

这就是我的问题，如何计算X和Y坐标以在每个形状的中间放置文字？

注意零件数量可能会有所不同。

Here's my fiddle （我使用随机颜色进行测试）

谢谢。

Answer 1

经过多次尝试，我终于找到了解决方案：

首先，我包括了svg.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.js"></script>

之后，我在“svg.appendChild（newPath）”之后添加了这个：

    bbox = SVG.adopt(newPath).bbox();
    x=bbox.cx;
    y=bbox.cy;

    text.setAttributeNS(null,"x",""+x);
    text.setAttributeNS(null,"y",""+y);
    text.setAttributeNS(null,"font-size","30");

    svg.appendChild(text);

此解决方案使用BBOX计算路径实体的中心x和y，之后您可以轻松地对文本进行参数化（不要忘记附加节点来设置文本）。

希望它会对某人有所帮助。

SVG - 计算动态文本坐标

1 个答案: