Jump to content
You must now use your email address to sign in [click for more info] ×

Affinity Designer - Dashed/Dotted lines aren't lining up at the start/end (where they meet)

Recommended Posts

Hi all!


I've only been using the Designer software for a few days, and I have no previous with graphic design software outside of Photoshop.


My problem is that every time I create a dashed/dotted line, the dots never seem to match up where they meet at the start and end points, does anyone have any advice?


See the attached screenshot of the issue.


Thanks guys!


Dylan SJ Perez

Link to comment
Share on other sites

See also:

If you search in the forum you will find a bunch of threads which deal with that theme.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

I've messed with the width more (using finer adjustment and decimals) and that seems to have worked, I can't tell if it's 100% perfect but seems like it is, it'll work for now until a setting to automatically take care of this is implemented, thanks!


Dylan SJ Perez

Link to comment
Share on other sites

3 hours ago, Dylan SJ Perez said:

I've messed with the width more (using finer adjustment and decimals) and that seems to have worked, I can't tell if it's 100% perfect but seems like it is, it'll work for now until a setting to automatically take care of this is implemented, thanks!



If you want all the dots to be just touching each other, then the diameter of the dots has to divide evenly (as much as we can) into the circumference of the circle right?

And the diameter of the dots is the line width in the all touching scenario. So πD/#circles=the line width that will work. 

If you're working with an oval, I'd suggest using an oval circumference calculator.

Link to comment
Share on other sites

  • 2 years later...

I think this a actually a problem because it seems that Affinity Designer strictly keeps the ratios of stroke/space given in the stroke panel. The actual appearance is then dependent on the stroke width that's set (the numbers entered in the dashed strokes settings being just multiples of the stroke's width). So when you have a circle of a given diameter/radius this results in a given length of the circle’s circumference and it is just chance, how the length of the pattern will fit on the circumference's length. The smaller the pattern's length in relation to the length of the circumference the greater the chance that it will just about seem(!) to fit.

However, there will almost always be discrepancies because the circumference's length is usually not a regular (natural number) multiple of the pattern's lenght (at it's given stroke weight). So where beginning and end of a circle's periphery meet you will most likely see these "effects" as the pattern isn't really completed by then or the beginning of it's next iteration will be visible. To avoid this you then start to play around with weird decimal numbers for the gaps (with a simple standard dotted line).

I find this really bothersome and actually not exactly worthy of an app that claims to play to prefessional needs. It should be a regular feature that the app calculates the necessary tweaks in the patterns automatically to guarantee a seemless appearance. Adobe Illustrator does exactly that for years by now and you can just click a checkbox in InDesign, too, make your stroke patterns align perfectly to the orners of polygons (which regrettably isn't possible in AD either)...

So I guess there's quite a bit to set right in version 2 (latest...)...

Link to comment
Share on other sites

  • 4 months later...

Maybe if someone is still interested in this topic...

I found that you can actually calculate quite precisely the value you have to set in the (Dashed) Stroke settings to achieve an exact beginning/end of the dotted line without any overlapping.
This is for simple, evenly spaced dotted lines with dots in the form of perfect circles.

Notice: You'll have to use a consistent unit for any values of lenght or width (e.g. pt throughout)! You will have to make some conversions, if you – e.g. – have millimeters as the general unit but points for stroke width!

First you have to know (or calculate) the total length of the path you want to apply your dotted line to. Then you have to decide how many spaces you want to have in total between the dots (e.g. you'll want to have 12 even spaces when you want do a clock face with the dots at the usual positions).

When you divide the total length of the path (circumference) by that number of spaces you'll get the length of a single space. (*)

Then, be sure to choose the rounded caps In the stroke palette first.

Down below where it says ”Dash:" you set "0" as the first value (this is the ”lenght“ of the dash – but we want to see only the round caps added(!) at either end of an otherwise "not existing" dash...).
The second value, however, controls the width or lenght of the space (or gap) between the dots. It is actually a multiple of the stroke width you've set at the top.

If you set it to "1" the space or gap between the dots is exactly as wide as the stroke width, which results in the dots just touching each other as the gap is filled by the two semicircles which are just the rounded caps of two consecutive dashes (of “zero“ lenght). Accordingly when you set that second value to "2" (meaning: 2 times the stroke width) the (visible) gap between to dots will be just as wide as the dots themselves are.

The trick now is that you have to divide the single space (or gap) length you have calculated above (*) by the stroke width you want to apply. The resulting number is the value you'll have to enter in that second field mentioned just before. Then the gaps' length will be adjusted correctly to give you the number of even spaces between the dots that you defined at the start of these calculations.

I'm aware that this works well when you can actually distribute spaces but it won't work well with a circle or path of a given(!) circumference an a given stroke width when you want the dots to just touch each other (as there is no space you can evenly distribute to achieve this). In this case you will have to adjust the lenght of the path instead just so that a whole number of dots (having the diameter given by the stroke width) will fit exactly within that lenght...

It's a bit tedious, actually... (but you can make it work once you have certain measurements; with free form paths it gets close to impossible, however and you'l just have to use trial and error on that value controlling the gap width).

I wonder, however, if anybody can follow my mathematical amifications here... (I beg your pardon).

Ah, and well: I think these calculations should actually by made by the app/computer and not by the user...

Edited by Lorox
Link to comment
Share on other sites

On 2/5/2018 at 7:06 PM, v_kyr said:

Not sure why it shouldn't work for you too?


It depends on the circle's radius and on the stroke's width, whether the first and last dot will align. What you're basically trying to do is to (seamlessly) put objects of a given size (the dots) on a path of an (inpendently) given length (the circle's circumference). Obviously this will only succeed if there is a certain ratio between the width of those elements and the overall length of the path.

With random values of the circles radius/diameter and of the stroke's weight it would be just pure chance if the first and last dot align (visually, at least).

If you take your circle's diameter as given you have to tweak the stroke width to make it happen – or, if you take the stroke witdh as given you'll have to adjust the circle's size ever so slightly to make a whole number of dots (whose diameter equals the stroke width) to just fit in.

Edited by Lorox
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.