生成JavaScript中的正多边形，其中底边始终在底部。

huangapple
go评论94阅读模式
英文:

Generate regular polygon in Javascript with base side always at the bottom

问题

这里有一种方法可以生成具有 X 边的正多边形，但基准（第一条边）始终应该水平位于底部。我找到了一些生成器，例如 https://codepen.io/winkerVSbecks/pen/wrZQQm，但它不会在底部生成基准边，并且还有一些“奇怪”的填充在视图框内，我无法去掉它（多边形不会使用 svg 视图框的全宽度和高度，而是在边缘留有空白）。

英文:

Is here a way how to generate regular polygon with X sides, but the base (first) side should be always horizontal at the bottom. I've found any of generators, e.g. https://codepen.io/winkerVSbecks/pen/wrZQQm, but it does not generate the base side at the bottom and more, it has some "wierd" padding inside the viewbox I could not get rid of (the polygon does not use the full width and height of svg viewbox, but it has spaces at edges).

答案1

得分: 2

根据代码，多边形生成器似乎在右侧边上生成“平坦”的一侧。因此，在绘制多边形时，只需将所有角度顺时针旋转90度（也就是 0.5 * Math.PI 弧度）：

  1. function polygon([cx, cy], sideCount, radius) {
  2.   return pts(sideCount, radius)
  3.     .map(({ r, theta }) => {
  4.       // 注意：将 theta 更新为加上顺时针90度的旋转
  5.       return [
  6.         cx + r * Math.cos(theta + Math.PI * 0.5),
  7.         cy + r * Math.sin(theta + Math.PI * 0.5)
  8.       ];
  9.     })
  10.     .join(" ");
  11. }

查看 forked CodePen 这里：https://codepen.io/terrymun/pen/LYJQMda

英文:

Based on the code, the polygon generator seems to be generating the "flat" side on the right edge. So it is just a matter of rotating all angles by 90deg clockwise (aka 0.5 * Math.PI radians) when drawing the polygon:

  1. function polygon([cx, cy], sideCount, radius) {
  2.   return pts(sideCount, radius)
  3.     .map(({ r, theta }) => {
  4.       // NOTE: Update theta to add 90deg clockwise rotation
  5.       return [
  6.         cx + r * Math.cos(theta + Math.PI * 0.5),
  7.         cy + r * Math.sin(theta + Math.PI * 0.5)
  8.       ];
  9.     })
  10.     .join(" ");
  11. }

See forked CodePen here: https://codepen.io/terrymun/pen/LYJQMda

答案2

得分: 2

你可以将所有的代码转换为本机JavaScript Web组件（JSWC）：

  1. <svg-polygon sides="8" fill="red"></svg-polygon>
  2. <svg-polygon sides="9" fill="yellow"></svg-polygon>
  3. <svg-polygon sides="10" fill="blue"></svg-polygon>

生成JavaScript中的正多边形，其中底边始终在底部。

  1. customElements.define("svg-polygon", class extends HTMLElement {
  2.   connectedCallback() {
  3.     var radians = (deg) => (Math.PI * deg) / 180;
  4.     var sides   = +this.getAttribute("sides") || 8;
  5.     var radius  = +this.getAttribute("radius") || 200;
  6.     var vb      = 2*radius + (this.getAttribute("padding") || 50);
  7.     var points  = Array(sides).fill(radians(90-((180-(360/sides))/2)))
  8.          .map((offset,idx) => [
  9.             vb/2 + radius*Math.cos(offset+radians((360/sides)*idx) + Math.PI/2),
  10.             vb/2 + radius*Math.sin(offset+radians((360/sides)*idx) + Math.PI/2)
  11.          ]);
  12.     this.innerHTML = `<svg viewBox="0 0 ${vb} ${vb}">` +
  13.       `<polygon points="${points.join(" ")}" fill="${this.getAttribute("fill")}"/>` +
  14.       `</svg>`;
  15.   }
  16. })
  1. svg { width:180px; background:pink }
  1. <svg-polygon sides="8" fill="red"></svg-polygon>
  2. <svg-polygon sides="9" fill="yellow"></svg-polygon>
  3. <svg-polygon sides="10" fill="blue"></svg-polygon>
英文:

You can reduce all that code to a native JavaScript Web Component (JSWC):

  1. &lt;svg-polygon sides=&quot;8&quot;  fill=&quot;red&quot;&gt;&lt;/svg-polygon&gt;
  2. &lt;svg-polygon sides=&quot;9&quot;  fill=&quot;yellow&quot;&gt;&lt;/svg-polygon&gt;
  3. &lt;svg-polygon sides=&quot;10&quot; fill=&quot;blue&quot;&gt;&lt;/svg-polygon&gt;

生成JavaScript中的正多边形，其中底边始终在底部。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. customElements.define(&quot;svg-polygon&quot;, class extends HTMLElement {
  2.   connectedCallback() {
  3.     var radians = (deg) =&gt; (Math.PI * deg) / 180;
  4.     var sides   = +this.getAttribute(&quot;sides&quot;) || 8;
  5.     var radius  = +this.getAttribute(&quot;radius&quot;) || 200;
  6.     var vb      = 2*radius + (this.getAttribute(&quot;padding&quot;) || 50);
  7.     var points  = Array(sides).fill(radians(90-((180-(360/sides))/2)))
  8.          .map((offset,idx) =&gt; [
  9.             vb/2 + radius*Math.cos(offset+radians((360/sides)*idx) + Math.PI/2),
  10.             vb/2 + radius*Math.sin(offset+radians((360/sides)*idx) + Math.PI/2)
  11.          ]);
  12.     this.innerHTML = `&lt;svg viewBox=&quot;0 0 ${vb} ${vb}&quot;&gt;` +
  13.       `&lt;polygon points=&quot;${points.join(&quot; &quot;)}&quot; fill=&quot;${this.getAttribute(&quot;fill&quot;)}&quot;/&gt;` +
  14.       `&lt;/svg&gt;`;
  15.   }
  16. })

<!-- language: lang-css -->

  1. svg { width:180px; background:pink }

<!-- language: lang-html -->

  1. &lt;svg-polygon sides=&quot;8&quot; fill=&quot;red&quot;&gt;&lt;/svg-polygon&gt;
  2. &lt;svg-polygon sides=&quot;9&quot; fill=&quot;yellow&quot;&gt;&lt;/svg-polygon&gt;
  3. &lt;svg-polygon sides=&quot;10&quot; fill=&quot;blue&quot;&gt;&lt;/svg-polygon&gt;

<!-- end snippet -->

答案3

得分: 1

Varun Vachhar的codepen "SVG多边形生成器"已经包含了一个用于调整起始角度的参数。要更改offsetDeg（在pts(sideCount, radius)中）的值，可以这样做：

  1. let offsetDeg = (180 - angle) / 2;

生成器根据当前半径值计算多边形顶点。因此，所有顶点都位于一个圆上。但viewBox不会自动根据渲染的多边形调整宽度和高度。

要实现裁剪多边形SVG，可以采取以下两种方法：

  • 在渲染多边形后通过getBBox()重新计算viewBox
  • 或者通过查找x和y的极值来重新计算多边形坐标以找到适当的偏移量

示例1：通过调整viewBox来裁剪

  1. // 在渲染多边形后，通过以下代码调整viewBox
  2. let bb = polygonEl.getBBox();
  3. svgEl.setAttribute('viewBox', `${bb.x} ${bb.y} ${bb.width} ${bb.height}`);

示例2：通过重新计算多边形坐标来裁剪

  1. // 计算多边形坐标后，通过以下代码找到x和y的极值
  2. let xVals = polyPoints.map(pt => pt[0]);
  3. let yVals = polyPoints.map(pt => pt[1]);
  4. let left = Math.min(...xVals);
  5. let right = Math.max(...xVals);
  6. let top = Math.min(...yVals);
  7. let bottom = Math.max(...yVals);
  8. let width = right - left;
  9. let height = bottom - top;

此外，上述示例还将多边形点转换为路径数据字符串。通常，SVG <path> 元素提供了更简洁的表示法，因为它们还支持相对命令并可以组合成复合路径。要将<polygon>元素轻松转换为等效的<path>，只需在points属性前添加"M"，并追加"z"命令字母：

  1. <polygon points="244.949 386.37 141.421 386.37 51.764 334.607 0 244.949 0 141.421 51.764 51.764 141.421 0 244.949 0 334.607 51.764 386.37 141.421 386.37 244.949 334.607 334.607"/>

等同于：

  1. <path d="M 244.949 386.37 141.421 386.37 51.764 334.607 0 244.949 0 141.421 51.764 51.764 141.421 0 244.949 0 334.607 51.764 386.37 141.421 386.37 244.949 334.607 334.607 z"/>

偏移值通过循环遍历点数组来计算，如下所示：

  1. // 找到x和y的极值以裁剪和调整多边形和viewBox
  2. let xVals = polyPoints.map(pt => pt[0]);
  3. let yVals = polyPoints.map(pt => pt[1]);
  4. let left = Math.min(...xVals);
  5. let right = Math.max(...xVals);
  6. let top = Math.min(...yVals);
  7. let bottom = Math.max(...yVals);
  8. let width = right - left;
  9. let height = bottom - top;
英文:

Varun Vachhar's codepen "SVG Polygon Generator"
already includes a parameter to adjust the starting angle.
Change the offsetDeg (in pts(sideCount, radius)) value like so:

let offsetDeg = (180 - angle) / 2;

The generator calculates polygon vertices according to the current radius value. So all vertices will be on a circle. But the viewBox won't automatically adjust width and height according to the rendered polygon.

To achieve a cropped polygon svg you can either:

  • recalculate the viewBox via getBBox() after rendering the polygon
  • or recalculate the polygon coordinates by finding x and y extrema to find appropriate offsets

Example 1: crop via viewBox adjustment

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. const sideCountEl = document.querySelector(&#39;#js-side-count&#39;);
  2. const radiusEl = document.querySelector(&#39;#js-radius&#39;);
  3. const cxEl = document.querySelector(&#39;#js-cx&#39;);
  4. const cyEl = document.querySelector(&#39;#js-cy&#39;);
  5. const generateEl = document.querySelector(&#39;#js-generate&#39;);
  6. const polygonEl = document.querySelector(&#39;#js-polygon&#39;);
  7. const resultEl = document.querySelector(&#39;#js-result&#39;);
  8. const svgEl = document.querySelector(&#39;#jsSvg&#39;);
  10. function pts(sideCount, radius) {
  11.   const angle = 360 / sideCount;
  12.   const vertexIndices = range(sideCount);
  13.   let offsetDeg = (180 - angle) / 2;
  14.   const offset = degreesToRadians(offsetDeg);
  16.   return vertexIndices.map(index =&gt; {
  17.     return {
  18.       theta: offset + degreesToRadians(angle * index),
  19.       r: radius
  20.     };
  22.   });
  23. }
  25. function range(count) {
  26.   return Array.from(Array(count).keys());
  27. }
  29. function degreesToRadians(angleInDegrees) {
  30.   return Math.PI * angleInDegrees / 180;
  31. }
  34. function polygon([cx, cy], sideCount, radius) {
  35.   return pts(sideCount, radius).
  36.   map(({
  37.     r,
  38.     theta
  39.   }) =&gt; [
  40.     cx + r * Math.cos(theta),
  41.     cy + r * Math.sin(theta)
  42.   ]);
  44. }
  46. function generatePolygon() {
  47.   const sideCount = +sideCountEl.value;
  48.   const radius = +radiusEl.value;
  49.   const s = 2 * radius;
  51.   let polyPoints = polygon(
    展开收缩
    , sideCount, radius);
  52.   polygonEl.setAttribute(&#39;points&#39;, polyPoints.flat().join(&#39; &#39;));
  54.   // crop by - adjust viewBox to current bbox
  55.   let bb = polygonEl.getBBox();
  56.   svgEl.setAttribute(&#39;viewBox&#39;, `${bb.x} ${bb.y} ${bb.width} ${bb.height}`);
  58.   // show output
  59.   resultEl.value = new XMLSerializer().serializeToString(jsSvg);
  61. }
  63. window.onload = generatePolygon;
  65. // Listen to changes in &lt;input /&gt;
  66. let inputs = document.querySelectorAll(&#39;input&#39;);
  67. inputs.forEach(input =&gt; {
  68.   input.addEventListener(&#39;input&#39;, e =&gt; generatePolygon());
  69. });
  71. // convert to relative path data
  72. function polyPointsToPathRelative(polyPoints, precision) {
  73.   let pointsRel = [];
  74.   let offXrel = 0;
  75.   let offYrel = 0;
  77.   polyPoints.forEach(pt =&gt; {
  78.     let [x, y] = [pt[0] - offXrel, pt[1] - offYrel];
  79.     pointsRel.push(x, y)
  80.     offXrel += x;
  81.     offYrel += y;
  82.   });
  84.   // round
  85.   pointsRel = pointsRel.map(val =&gt; {
  86.     return +val.toFixed(precision)
  87.   });
  88.   let M = pointsRel.splice(0, 2);
  89.   let pathData = &#39;M&#39; + M.join(&#39; &#39;) + &#39;l&#39; + pointsRel.join(&#39; &#39;) + &#39;z&#39;;
  91.   return pathData;
  93. }

<!-- language: lang-css -->

  1. body {
  2.   margin: 0;
  3.   font-family: sans-serif;
  4. }
  6. input,
  7. textarea {
  8.   font-family: inherit;
  9.   font-size: 100%;
  10.   line-height: 1.15;
  11.   margin: 0;
  12. }
  14. body,
  15. div,
  16. fieldset,
  17. form,
  18. input[type=number],
  19. legend,
  20. main,
  21. textarea {
  22.   box-sizing: border-box;
  23. }
  25. .ba {
  26.   border-style: solid;
  27.   border-width: 1px;
  28. }
  30. .bb {
  31.   border-bottom-style: solid;
  32.   border-bottom-width: 1px;
  33. }
  35. .b--dark-gray {
  36.   border-color: #333;
  37. }
  39. .b--transparent {
  40.   border-color: transparent;
  41. }
  43. .bw2 {
  44.   border-width: .25rem;
  45. }
  47. .db {
  48.   display: block;
  49. }
  51. .flex {
  52.   display: -webkit-box;
  53.   display: -ms-flexbox;
  54.   display: flex;
  55. }
  57. .min-vh-100 {
  58.   min-height: 100vh;
  59. }
  61. .tracked {
  62.   letter-spacing: .1em;
  63. }
  65. .mw7 {
  66.   max-width: 48rem;
  67. }
  69. .w-100 {
  70.   width: 100%;
  71. }
  73. .pa0 {
  74.   padding: 0;
  75. }
  77. .pa2 {
  78.   padding: .5rem;
  79. }
  81. .pa3 {
  82.   padding: 1rem;
  83. }
  85. .pa4 {
  86.   padding: 2rem;
  87. }
  89. .pv2 {
  90.   padding-top: .5rem;
  91.   padding-bottom: .5rem;
  92. }
  94. .ph0 {
  95.   padding-left: 0;
  96.   padding-right: 0;
  97. }
  99. .mb0 {
  100.   margin-bottom: 0;
  101. }
  103. .mb2 {
  104.   margin-bottom: .5rem;
  105. }
  107. .mb4 {
  108.   margin-bottom: 2rem;
  109. }
  111. .mt5 {
  112.   margin-top: 4rem;
  113. }
  115. .mv4 {
  116.   margin-top: 2rem;
  117.   margin-bottom: 2rem;
  118. }
  120. .mh0 {
  121.   margin-left: 0;
  122.   margin-right: 0;
  123. }
  125. .ttu {
  126.   text-transform: uppercase;
  127. }
  129. .f5 {
  130.   font-size: 1rem;
  131. }
  133. .measure-wide {
  134.   max-width: 34em;
  135. }
  137. .center {
  138.   margin-right: auto;
  139.   margin-left: auto;
  140. }
  142. .flex-row-ns {
  143.   -webkit-box-orient: horizontal;
  144.   -webkit-box-direction: normal;
  145.   -ms-flex-direction: row;
  146.   flex-direction: row;
  147. }
  149. .mr4-ns {
  150.   margin-right: 2rem;
  151. }
  153. .mb0-ns {
  154.   margin-bottom: 0;
  155. }
  157. legend,
  158. label {
  159.   text-transform: uppercase;
  160.   font-weight: 700;
  161. }
  163. pre {
  164.   overflow-wrap: break-word;
  165. }
  167. svg {
  168.   overflow: visible !important;
  169.   border: 1px solid #ccc;
  170. }
  172. textarea {
  173.   display: block;
  174.   width: 100%;
  175.   min-height: 20em;
  176.   white-space: pre-wrap !important;
  177.   white-space: pre-line !important;
  178. }

<!-- language: lang-html -->

  1. &lt;main class=&quot;pa4 dark-gray mw7 center sans-serif min-vh-100 flex flex-column flex-row-ns &quot;&gt;
  2.   &lt;form class=&quot;measure-wide mr4-ns mb4 mb0-ns f5&quot;&gt;
  3.     &lt;fieldset class=&quot;ba b--transparent pa0 mh0&quot;&gt;
  5.       &lt;legend class=&quot;f5 b ph0 mh0 ttu tracked bb bw2 pv2 db w-100&quot;&gt;
  6.         Polygon Generator
  7.       &lt;/legend&gt;
  9.       &lt;div class=&quot;mt5 mb4&quot;&gt;
  10.         &lt;label class=&quot;f5 ttu tracked db b mb2&quot; for=&quot;js-side-count&quot;&gt;
  11.           Number of Sides
  12.         &lt;/label&gt;
  13.         &lt;input class=&quot;b pa2 input-reset ba bw2 bg-white b--dark-gray w-100&quot; type=&quot;number&quot; id=&quot;js-side-count&quot; min=&quot;3&quot; value=&quot;8&quot;&gt;
  14.       &lt;/div&gt;
  15.       &lt;div class=&quot;mv4&quot;&gt;
  16.         &lt;label class=&quot;f5 ttu tracked db b mb2&quot; for=&quot;js-radius&quot;&gt;
  17.           Radius
  18.         &lt;/label&gt;
  19.         &lt;input class=&quot;b pa2 input-reset ba bw2 bg-white b--dark-gray w-100&quot; type=&quot;number&quot; id=&quot;js-radius&quot; value=&quot;200&quot;&gt;
  20.       &lt;/div&gt;
  21.     &lt;/fieldset&gt;
  22.   &lt;/form&gt;
  24.   &lt;div class=&quot;flex-auto flex items-center justify-center w-100&quot;&gt;
  25.     &lt;div class=&quot;w-100&quot;&gt;
  26.       &lt;svg class=&quot;w-100 white debug-grid mb4 db&quot; viewBox=&quot;0 0 800 800&quot; stroke=&quot;#111&quot; fill=&quot;none&quot; stroke-width=&quot;4&quot; id=&quot;jsSvg&quot;&gt;
  27.         &lt;polygon id=&quot;js-polygon&quot; points=&quot;&quot; /&gt;
  28.       &lt;/svg&gt;
  29.       &lt;textarea id=&quot;js-result&quot; class=&quot;code pa3 bg-near-white mb0 overflow-scroll&quot;&gt;&lt;/textarea&gt;
  30.     &lt;/div&gt;
  31.   &lt;/div&gt;
  32. &lt;/main&gt;

<!-- end snippet -->

Example 2: crop by recalculating polygon coordinates

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. const sideCountEl = document.querySelector(&#39;#js-side-count&#39;);
  2. const radiusEl = document.querySelector(&#39;#js-radius&#39;);
  3. const generateEl = document.querySelector(&#39;#js-generate&#39;);
  4. const polygonEl = document.querySelector(&#39;#js-polygon&#39;);
  5. const resultEl = document.querySelector(&#39;#js-result&#39;);
  6. const svgEl = document.querySelector(&#39;#jsSvg&#39;);
  8. function pts(sideCount, radius) {
  9.   const angle = 360 / sideCount;
  10.   const vertexIndices = range(sideCount);
  11.   let offsetDeg = (180 - angle) / 2;
  12.   const offset = degreesToRadians(offsetDeg);
  14.   return vertexIndices.map(index =&gt; {
  15.     return {
  16.       theta: offset + degreesToRadians(angle * index),
  17.       r: radius
  18.     };
  20.   });
  21. }
  23. function range(count) {
  24.   return Array.from(Array(count).keys());
  25. }
  27. function degreesToRadians(angleInDegrees) {
  28.   return Math.PI * angleInDegrees / 180;
  29. }
  32. function polygon([cx, cy], sideCount, radius) {
  33.   return pts(sideCount, radius).
  34.   map(({
  35.     r,
  36.     theta
  37.   }) =&gt; [
  38.     cx + r * Math.cos(theta),
  39.     cy + r * Math.sin(theta)
  40.   ]);
  42. }
  44. function generatePolygon() {
  45.   const sideCount = +sideCountEl.value;
  46.   const radius = +radiusEl.value;
  47.   const s = 2 * radius;
  49.   // calculate polygont points
  50.   let polyPoints = polygon(
    展开收缩
    , sideCount, radius);
  52.   /**
  53.    * find x and y extrema
  54.    * to crop and pan polygon and viewBox
  55.    */
  56.   let xVals = polyPoints.map(pt =&gt; {
  57.     return pt[0]
  58.   });
  59.   let yVals = polyPoints.map(pt =&gt; {
  60.     return pt[1]
  61.   });
  63.   let left = Math.min(...xVals);
  64.   let right = Math.max(...xVals);
  65.   let top = Math.min(...yVals);
  66.   let bottom = Math.max(...yVals);
  67.   let width = right - left;
  68.   let height = bottom - top;
  70.   // round coordinates
  71.   let precision = +inputPrecision.value;
  73.   // calculate cropped polygon
  74.   polyPoints = polyPoints.map(pt =&gt; {
  75.     return [+(pt[0] - left).toFixed(precision), +(pt[1] - top).toFixed(precision)];
  76.   });
  78.   // create relative path
  79.   let pathData = polyPointsToPathRelative(polyPoints, precision)
  82.   // shift points - adjust viewBox
  83.   svgEl.setAttribute(&#39;viewBox&#39;, `0 0 ${+width.toFixed(precision)} ${+height.toFixed(precision)}`);
  84.   polygonEl.setAttribute(&#39;d&#39;, pathData);
  86.   let output = new XMLSerializer().serializeToString(jsSvg).
  87.   replace(/\s{2,}/g, &quot; &quot;).
  88.   replaceAll(&#39;&gt; &lt;&#39;, &#39;&gt;&lt;&#39;).
  89.   replaceAll(&#39;&lt;&#39;, &#39;\n&lt;&#39;);
  91.   //console.log(output);
  92.   resultEl.value = output;
  94. }
  96. window.onload = generatePolygon;
  98. // Listen to changes in &lt;input /&gt;
  99. let inputs = document.querySelectorAll(&#39;input&#39;);
  100. inputs.forEach(input =&gt; {
  101.   input.addEventListener(&#39;input&#39;, e =&gt; generatePolygon());
  102. });
  104. // convert to relative path data
  105. function polyPointsToPathRelative(polyPoints, precision) {
  106.   let pointsRel = [];
  107.   let offXrel = 0;
  108.   let offYrel = 0;
  110.   polyPoints.forEach(pt =&gt; {
  111.     let [x, y] = [pt[0] - offXrel, pt[1] - offYrel];
  112.     pointsRel.push(x, y)
  113.     offXrel += x;
  114.     offYrel += y;
  115.   });
  117.   // round
  118.   pointsRel = pointsRel.map(val =&gt; {
  119.     return +val.toFixed(precision)
  120.   });
  121.   let M = pointsRel.splice(0, 2);
  122.   let pathData = &#39;M&#39; + M.join(&#39; &#39;) + &#39;l&#39; + pointsRel.join(&#39; &#39;) + &#39;z&#39;;
  124.   return pathData;
  126. }

<!-- language: lang-css -->

  1. body {
  2.   margin: 0;
  3.   font-family: sans-serif;
  4. }
  6. input,
  7. textarea {
  8.   font-family: inherit;
  9.   font-size: 100%;
  10.   line-height: 1.15;
  11.   margin: 0;
  12. }
  14. body,
  15. div,
  16. fieldset,
  17. form,
  18. input[type=number],
  19. legend,
  20. main,
  21. textarea {
  22.   box-sizing: border-box;
  23. }
  25. .ba {
  26.   border-style: solid;
  27.   border-width: 1px;
  28. }
  30. .bb {
  31.   border-bottom-style: solid;
  32.   border-bottom-width: 1px;
  33. }
  35. .b--dark-gray {
  36.   border-color: #333;
  37. }
  39. .b--transparent {
  40.   border-color: transparent;
  41. }
  43. .bw2 {
  44.   border-width: .25rem;
  45. }
  47. .db {
  48.   display: block;
  49. }
  51. .flex {
  52.   display: -webkit-box;
  53.   display: -ms-flexbox;
  54.   display: flex;
  55. }
  57. .min-vh-100 {
  58.   min-height: 100vh;
  59. }
  61. .tracked {
  62.   letter-spacing: .1em;
  63. }
  65. .mw7 {
  66.   max-width: 48rem;
  67. }
  69. .w-100 {
  70.   width: 100%;
  71. }
  73. .pa0 {
  74.   padding: 0;
  75. }
  77. .pa2 {
  78.   padding: .5rem;
  79. }
  81. .pa3 {
  82.   padding: 1rem;
  83. }
  85. .pa4 {
  86.   padding: 2rem;
  87. }
  89. .pv2 {
  90.   padding-top: .5rem;
  91.   padding-bottom: .5rem;
  92. }
  94. .ph0 {
  95.   padding-left: 0;
  96.   padding-right: 0;
  97. }
  99. .mb0 {
  100.   margin-bottom: 0;
  101. }
  103. .mb2 {
  104.   margin-bottom: .5rem;
  105. }
  107. .mb4 {
  108.   margin-bottom: 2rem;
  109. }
  111. .mt5 {
  112.   margin-top: 4rem;
  113. }
  115. .mv4 {
  116.   margin-top: 2rem;
  117.   margin-bottom: 2rem;
  118. }
  120. .mh0 {
  121.   margin-left: 0;
  122.   margin-right: 0;
  123. }
  125. .ttu {
  126.   text-transform: uppercase;
  127. }
  129. .f5 {
  130.   font-size: 1rem;
  131. }
  133. .measure-wide {
  134.   max-width: 34em;
  135. }
  137. .center {
  138.   margin-right: auto;
  139.   margin-left: auto;
  140. }
  142. .flex-row-ns {
  143.   -webkit-box-orient: horizontal;
  144.   -webkit-box-direction: normal;
  145.   -ms-flex-direction: row;
  146.   flex-direction: row;
  147. }
  149. .mr4-ns {
  150.   margin-right: 2rem;
  151. }
  153. .mb0-ns {
  154.   margin-bottom: 0;
  155. }
  157. legend,
  158. label {
  159.   text-transform: uppercase;
  160.   font-weight: 700;
  161. }
  163. pre {
  164.   overflow-wrap: break-word;
  165. }
  167. svg {
  168.   overflow: visible !important;
  169.   border: 1px solid #ccc;
  170. }
  172. textarea {
  173.   display: block;
  174.   width: 100%;
  175.   min-height: 20em;
  176.   white-space: pre-wrap !important;
  177.   white-space: pre-line !important;
  178. }

<!-- language: lang-html -->

  1. &lt;main class=&quot;pa4 dark-gray mw7 center sans-serif min-vh-100 flex flex-column flex-row-ns &quot;&gt;
  2.   &lt;form class=&quot;measure-wide mr4-ns mb4 mb0-ns f5&quot;&gt;
  3.     &lt;fieldset class=&quot;ba b--transparent pa0 mh0&quot;&gt;
  4.       &lt;legend class=&quot;f5 b ph0 mh0 ttu tracked bb bw2 pv2 db w-100&quot;&gt;
  5.         Polygon Generator
  6.       &lt;/legend&gt;
  7.       &lt;div class=&quot;mt5 mb4&quot;&gt;
  8.         &lt;label class=&quot;f5 ttu tracked db b mb2&quot; for=&quot;js-side-count&quot;&gt;
  9.           Number of Sides
  10.         &lt;/label&gt;
  11.         &lt;input class=&quot;b pa2 input-reset ba bw2 bg-white b--dark-gray w-100&quot; type=&quot;number&quot; id=&quot;js-side-count&quot; min=&quot;3&quot; value=&quot;8&quot;&gt;
  12.       &lt;/div&gt;
  13.       &lt;div class=&quot;mv4&quot;&gt;
  14.         &lt;label class=&quot;f5 ttu tracked db b mb2&quot; for=&quot;js-radius&quot;&gt;
  15.           Radius
  16.         &lt;/label&gt;
  17.         &lt;input class=&quot;b pa2 input-reset ba bw2 bg-white b--dark-gray w-100&quot; type=&quot;number&quot; id=&quot;js-radius&quot; value=&quot;200&quot;&gt;
  18.       &lt;/div&gt;
  19.       &lt;div class=&quot;mv4&quot;&gt;
  20.         &lt;label class=&quot;f5 ttu tracked db b mb2&quot; for=&quot;js-radius&quot;&gt;
  21.           precision
  22.         &lt;/label&gt;
  23.         &lt;input class=&quot;b pa2 input-reset ba bw2 bg-white b--dark-gray w-100&quot; type=&quot;number&quot; id=&quot;inputPrecision&quot; value=&quot;2&quot;&gt;
  24.       &lt;/div&gt;
  25.     &lt;/fieldset&gt;
  26.   &lt;/form&gt;
  28.   &lt;div class=&quot;flex-auto flex items-center justify-center w-100&quot;&gt;
  29.     &lt;div class=&quot;w-100&quot;&gt;
  30.       &lt;svg viewBox=&quot;0 0 800 800&quot; id=&quot;jsSvg&quot;&gt;
  31.         &lt;path id=&quot;js-polygon&quot; d=&quot;&quot; /&gt;
  32.       &lt;/svg&gt;
  34.       &lt;textarea id=&quot;js-result&quot; class=&quot;code pa3 bg-near-white mb0 overflow-scroll&quot;&gt;&lt;/textarea&gt;
  35.     &lt;/div&gt;
  36.   &lt;/div&gt;
  37. &lt;/main&gt;

<!-- end snippet -->

The above example also converts polygon points to a path data string.

Usually, svg &lt;path&gt; elements offer a more concise notation – as they also support relative commands and can also be combined as compound paths.

You can easily convert a &lt;polygon&gt; element to a &lt;path&gt; equivalent by simply prepending a "M" and appending a "z" command letter to the points attribute.

  1. &lt;polygon points=&quot;244.949 386.37 141.421 386.37 51.764 334.607 0 244.949 0 141.421 51.764 51.764 141.421 0 244.949 0 334.607 51.764 386.37 141.421 386.37 244.949 334.607 334.607&quot;/&gt;

equals

  1. &lt;path d=&quot;M 244.949 386.37 141.421 386.37 51.764 334.607 0 244.949 0 141.421 51.764 51.764 141.421 0 244.949 0 334.607 51.764 386.37 141.421 386.37 244.949 334.607 334.607 z&quot;/&gt;

The offset values are calculated by looping through the point array like this:

  1.   /**
  2.    * find x and y extrema
  3.    * to crop and pan polygon and viewBox
  4.    */
  5.   let xVals = polyPoints.map(pt =&gt; {
  6.     return pt[0]
  7.   });
  8.   let yVals = polyPoints.map(pt =&gt; {
  9.     return pt[1]
  10.   });
  12.   let left = Math.min(...xVals);
  13.   let right = Math.max(...xVals);
  14.   let top = Math.min(...yVals);
  15.   let bottom = Math.max(...yVals);
  16.   let width = right - left;
  17.   let height = bottom - top;
  19.   // round coordinates
  20.   let precision = +inputPrecision.value;
  22.   // calculate cropped polygon
  23.   polyPoints = polyPoints.map(pt =&gt; {
  24.     return [+(pt[0] - left).toFixed(precision), +(pt[1] - top).toFixed(precision)];
  25.   });
  26.     
  28.   // shift points - adjust viewBox
  29.   svgEl.setAttribute(&#39;viewBox&#39;, `0 0 ${+width.toFixed(precision)} ${+height.toFixed(precision)}`);

huangapple
  • 本文由 发表于 2023年3月9日 20:15:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/75684482.html
  • javascript
  • polygon
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定