8 comments

  • Eli SladeEli Slade, over 8 years ago (edited over 8 years ago )

    To get evenly spaced dashes there is some math you can do to help.

    P = perimeter of shape, N = number of dashes in a path, D = length of one dash and gap added together.

    If D doesn't go into P evenly you will get the miss-match at the end of the shape draw. So I guess Illustrator finds a way to slightly adjust your numbers to make it look neat but Sketch doesn't. Also it seems Sketch always starts its path draw at the same place each time, while Illustrator finds the optimal place to start a shape draw.

    Anyways, back to solving the ratio of gap to dash. We will use your square above as an example, but I'm not sure what your corner-radius is so I'm going to guess it's 10.

    If we can solve for D that fits into P evenly then we can just vary the the length of our dash and gap so that they match D. So let's solve for D.

    D = P/N

    To do this though we need to know P & N. Let's just say we want 20 dashes so N = 20. Now we just need P.

    In this case P = ( (Top + Left + Bottom + Right) - (8radius)) + π(2*radius)

    P = ((100 + 100 + 100 + 100) - (8*10)) + π20, P = (400 - 80) + ~62.8, P = ~382.8

    So D = ~382.4/20. So D = ~19.14.

    So the the length of the gap and the space have to equal 19.14. So if your gap is 10 then your dash has to equal 9.14.

    Here are some other ratios that would work: 9.5dash and 9.5gap, 15dash to 4.14gap, 5dash to 14.14gap.

    Wow that was long. Hope this helped.

    26 points
    • Ray YipRay Yip, over 8 years ago

      Genius! Eli,

      I think the next thing is somebody write a Sketch plugin for this.

      2 points
    • Jonathan ShariatJonathan Shariat, over 8 years ago

      Awesome answer and explanation!

      My only question is here does the 8 come from in P's equation?

      0 points
      • Eli SladeEli Slade, over 8 years ago (edited over 8 years ago )

        To calculate for P you have to separate the corners from the sides. So to calculate the length of the straight side you have to subtract anything that is a curve. And each side has two curves(one at start of a side and one at the end of a side). This shape has four sides. So multiply the 4 by 2 and you get 8.

        "round-rect"

        1 point
  • Ray YipRay Yip, over 8 years ago

    This is another example i made in AI:

    5 points
  • Marcel Ribeiro, over 6 years ago

    While we still doesn't have a plugin for this, I've put together a simple calculator to help us set this up based on the awesome Eli Slade answer ;)

    https://docs.google.com/spreadsheets/d/1nQTI2p-HtG3fNzGo7ekeKLyY2Kiug3SaAeMpv9xgoDk/edit?usp=sharing

    0 points
  • Eli SladeEli Slade, over 8 years ago

    If someone is going to code this. To calculate the perimeter in code I wonder if you could set the animation of drawing the line at a certain speed, then time how long it takes to draw and then you could calculate the perimeter of even complex shapes. I don't know if you can set the animation at a relative speed though.

    0 points
  • Olivier HeitzOlivier Heitz, over 8 years ago

    Yep, exactly. I would also love to know. I never got it perfect and had to switch to AI.

    Please also post to Sketch Talk http://sketchtalk.io The Sketch community might know or learn from DN, if someone here knows. Thx

    0 points