Question

我们说我有一个圆圈，我希望它被相等的部分动态划分。我有一个输入将定义零件数量（P）。我知道半径（R）和中心点（C）。我圈子的第一段从C开始，然后R到顶部（T）。

到达N的公式是什么？
一旦我获得了第一个圆圈，我将克隆它P次。我需要旋转每个部分才能完全覆盖圆圈？

我使用的是Snap.svg，但也欢迎任何三角函数帮助。

Answer 1

显然，每个部件的角度为360/P。我们称之为A。

点N的坐标是

Nx = Cx + R * sin(A)
Ny = Cy + R * cos(A)

A度。

Answer 2

您必须计算alpha并使用图片中的公式。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>COS</title>
    
  </head>
    <body>
      
   <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
 
   <g>
    <title>background</title>
    <rect fill="#fff" id="canvas_background" height="402" width="402" y="-1" x="-1"/>
    <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
     <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
    </g>
   </g>
   <g>
    <title>Layer 1</title>
    <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="387.52873" x2="184.5" y1="9" x1="184.5" stroke-width="1.5" stroke="#000" fill="none"/>
    <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="199" x2="375.58839" y1="199" x1="13.5" stroke-width="1.5" stroke="#000" fill="none"/>
    <ellipse stroke="#0f0f00" ry="138.49999" rx="138.49999" id="svg_3" cy="199.50001" cx="183.99999" stroke-width="1.5" fill="none"/>
    <line stroke-linecap="null" stroke-linejoin="null" id="svg_4" y2="81" x2="257.5" y1="200" x1="184.5" stroke-width="1.5" stroke="#ff8800" fill="none"/>
    <path id="svg_5" d="m205.5,167c27,24 16,32 16,32" opacity="0.5" stroke-width="3" stroke="#ff8800" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_6" y="192" x="198.5" stroke-width="0" stroke="#ff8800" fill="#000000">a</text>
    <line stroke-linecap="null" stroke-linejoin="null" id="svg_8" y2="82" x2="184.49306" y1="82" x1="256.5" stroke-width="1.5" stroke="#0000ff" fill="none"/>
    <line stroke-linecap="null" stroke-linejoin="null" id="svg_9" y2="197.00435" x2="257.5" y1="82" x1="257.5" fill-opacity="null" stroke-width="1.5" stroke="#0000ff" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_10" y="112" x="112.5" fill-opacity="null" stroke-width="0" stroke="#0000ff" fill="#000000">(0,sin a)</text>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_11" y="230" x="224.5" stroke-width="0" stroke="#0f0f00" fill="#000000">(cos a, 0)</text>
    <ellipse ry="9.5" rx="11.5" id="svg_12" cy="82.5" cx="184" stroke-width="1.5" stroke="#0f0f00" fill="none"/>
    <ellipse ry="9.5" rx="11.5" id="svg_13" cy="199.5" cx="258" stroke-width="1.5" stroke="#0f0f00" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_14" y="71" x="269.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">P(cos a, sin a)</text>
    <ellipse ry="9.5" rx="11.5" id="svg_15" cy="83.5" cx="256" stroke-width="1.5" stroke="#0f0f00" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_16" y="327" x="284.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">d(OP)=1</text>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_18" y="219" x="165.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">O</text>
    <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_19" y="39" x="197.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">y</text>
    <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_20" y="222" x="358.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">x</text>
   </g>
  </svg>
    
   
  </body>  
  </html>

你也可以使用bresenham algo ......

圆圈同样分开

2 个答案: