使用 javascript 在 SVG 中的大多边形内创建小多边形答案

【问题标题】：Create small polygons inside large polygons in SVG using javascript使用 javascript 在 SVG 中的大多边形内创建小多边形
【发布时间】：2017-11-14 04:08:53
【问题描述】：

我对 SVG 图形非常陌生。我正在尝试在 svg 矩形内创建多个 SVG 多边形。

我面临在大多边形内创建较小多边形的挑战。

我的多边形是多面的，而不仅仅是三角形和矩形。如何获得内部多边形的点，我有父多边形的点以及父子多边形之间的间距

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">
    
  <polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/>
</svg>

考虑上面的例子，我有一个 id 为 poly_depth1 的多边形，我想在这个多边形内创建另一个 10px 的多边形。我想使用纯 JavaScript 或 D3 创建这个子多边形。多边形应该保持相同的形状。

【问题讨论】：

“10px inside”是什么意思？这还不清楚。你试过什么？有很多关于 Stack Overflow 和网络上其他地方的教程，解释了如何在 Javascript 中创建 SVG 形状（使用 vanilla Javascript 或 D3 等库）。
"10px" inside 表示外部和内部多边形之间的差距。我用谷歌搜索了很多，并没有从网上得到任何帮助。这可能是纯几何问题。我需要帮助编写 javascript 函数，该函数将为我提供内部多边形的 x、y 点。像 getInnerPolyPoints(OuterPolyPoints,depth) {};深度是我想要我的内部多边形的内部多少。
对于任意多边形，这将是非常困难的。但是，如果你可以说它总是一个六边形，或者总是一个正多边形，那会简单很多。
多边形是任意的..形状和大小都不是固定的..但它会是规则的多边形，如 3 面、4 面、5 面等，而不是弯曲的。我试着写逻辑，但是失败的。我希望有人可以帮助我用 javascript 编写该逻辑，或者任何编程语言都可以，我会将其转换为 javascript。
嘿技术人员..请帮助...仍然没有找到我的问题的答案

标签： javascript css d3.js svg polygons

【解决方案1】：

这里有一些代码可以做你想做的（我相信）。

对于多边形中的每个点，它都会计算一个新点，该点距离多边形中心较远。

然后它使用调整后的点集附加一个新的多边形。

// A reference to the original polygon
var poly1 = document.getElementById("poly_depth1");

// Calculate the average of the x and y coordinates.
// So we have a point inside the polygon
var poly2points = getInsidePolygon(poly1, 10);

// Create a new polygon with the adjusted points
var poly2 = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
poly2.setAttribute("id", "poly_depth2");
poly2.setAttribute("points", poly2points.join(','))
poly1.ownerSVGElement.appendChild(poly2);



function getInsidePolygon(poly, distance)
{
  var points = poly.points;
  var centre = getCentrePoint(points);

  // For each polygon point, move towards the centre point by
  // 'distance' and return that point
  var result = []
  for (var i=0; i<points.numberOfItems; i++) {
    var pt = points.getItem(i);
    var adjustedPt = getPointAlongLine(pt.x, pt.y, centre.x, centre.y, distance);
    result.push(adjustedPt.x.toFixed(4));
    result.push(adjustedPt.y.toFixed(4));
  }

  return result;
}


function getCentrePoint(points)
{
  // Average all the X and Y points to get the polygon centre point
  var midX = 0, midY = 0;
  for (var i=0; i<points.numberOfItems; i++) {
    var pt = points.getItem(i);
    midX += pt.x;
    midY += pt.y;
  }
  return {
    x: midX / points.numberOfItems,
    y: midY / points.numberOfItems
  }
}


function getPointAlongLine(x1, y1, x2, y2, distance)
{
  // Return the point that is "distance" along the line from x1,y1 to x2,y2.
  var dx = x2 - x1;
  var dy = y2 - y1;
  var len = Math.sqrt(dx * dx + dy * dy);
  return {
    x: x1 + dx * (distance / len),
    y: y1 + dy * (distance / len)
  }
}

#poly_depth2 {
  fill: red;
  fill-opacity: 0.4;
}

<svg width="240" height="240" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">
    
  <polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/>
</svg>

【讨论】：

【解决方案2】：

points 属性定义多边形每个角的 x 和 y 坐标。如果您想要更小或更大的多边形，您需要添加或减去多边形的 x 和 y 坐标的距离。

<svg width="140" height="140" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/>
  <polygon id="poly_depth2" points="60,35 90,50 90,70 60,85 30,70 30,50" fill="red"/>
</svg>

【讨论】：

感谢您的回复。你的 "poly_depth2" 正好在 "poly_depth1" 里面。我的 depth1 多边形是动态的。我需要帮助编写 javascript 函数，该函数将为我提供内部多边形的 x、y 点。像 getInnerPolyPoints(OuterPolyPoints,depth) {}; depth 是我想要我的内部多边形的内部多少。
我可能无法为您编写 javascript 函数，但您可以尝试一些解决方法，方法是添加或减去多边形的 x 和 y 坐标的距离。