vectorhtml5-canvasdraw.io

How to draw a shape vector for "quarter" circle


I've been going round and round on this. Apparently, my usual muddle-through-the-geometry approach is not working.

I'm just trying to create a perfect "quarter" circle sector in draw.io.

I read through https://desk.draw.io/support/solutions/articles/16000052874-how-to-create-and-edit-shapes-

But it is very vague.

Here is my best attempt, but it isn't right, the edges are too hard:

<shape name="Quarter Circle" h="49" w="49" aspect="variable" strokewidth="inherit">
  <connections>
    <constraint x="0.5" y="0" perimeter="0" name="N"/>
    <constraint x="0.5" y="1" perimeter="0" name="S"/>
  </connections>
  <background>
    <path>
      <move x="49" y="0"/>
      <line x="0" y="0"/>
      <line x="0" y="49"/>
      <arc rx="90" ry="90" x-axis-rotation="0" large-arc-flag="0" sweep-flag="0" x="49" y="0"/>
      <close/>
    </path>
  </background>
  <foreground>
    <fillstroke/>
  </foreground>
</shape>

I really want a quarter circle that if you rotate four of them, you end up with a perfect circle.


Solution

  • The arc radii (rx and ry) have to match the shape size to achieve what you want. Just replace your arc line with this:

    <arc rx="49" ry="49" x-axis-rotation="0" large-arc-flag="0" sweep-flag="0" x="49" y="0"/>