Special kind of dashed-line in Designer

[vr8ce]

(My apologies if this is a basic question; I am not an artist, and I don't have much experience with programs like Designer. I did watch the line tutorials, and none of them addressed what I am trying to accomplish. I also tried a few web searches, and apparently don't know the right words or phrases for what I'm trying to do.)

I want to create what looks like a dashed curved line, but with alternating black and white squares (same length as the line's stroke width). The smallest dash line setting (1) is still longer than it is wide, so I don't see a way to make a dashed line work. (Feature Request: Rather than numbers that don't really mean anything, the dashed line settings would be a lot more useful as raw lengths, i.e. specified in the same manner as stroke width.)

Imagine I have a 1.5pt stroke black line. I want the line to be alternating black squares of 1.5pt by 1.5pt and white squares of 1.5pt by 1.5pt. I want to whole thing to be easily editable and modifiable, which is why I was hoping a dashed line would work.

Is there a relatively easy way to do this? (And maybe a line isn't even the best way to do this; that was just my first thought because I can make it the right width and put it on a curve.)

Many thanks in advance!

[gdenby]

hi, vr8ce,

(Ahem, "Rather than numbers that don't really mean anything" Speaking on behalf of the 1/0s in the room, I beg to variate)

It is easy. Here's the rules, as far as I understand them. The line point size equals one(1) unit along the curve. The segments are made like so. The default length of the butt cap end length is zero(0).  A length of 1 dash using that type still equals zero. A dash size of .25 equal 1/4 of the line weight.

When using round and square caps those require at least 1 unit of length added to the base of zero. They will always be at least 1 unit long. The 2nd number indicates the total length the dash can be drawn in. So a size of "1" round cap will be 2 units long, which needs at least a 2nd number, the gap to be one to show the whole dash.

An example. 

I suppose that the reason the particular number values are not used, but the proportional ons is that the scale w. size option would require another computational step.

If you care to, you can make any number of combinations, and save those as styles for use whenever.

[JimmyJack]

@vr8ce In order to get alternating colors I've got an extra step to add (and a slightly different dash values setup).
To do it with dashed lines you'll need two circles. But its easy.

Circle 1: Cap type needs to be the center one in order for the dashes to be square at a value of 1. 
So it goes Dash (1) space (3) dash (0) space(0). The 3 is leaving a space for the second colored colored set.
Circle 2: Duplicate the circle. Instead of rotating it to try and fill in the spots, just change the phase to 2.
Group them to keep as a unit.
Dashes will be squares at any line width. (well, technically they are slightly trapezoidal, but that's only really noticeable a really big line widths)

Of course there are other ways to do this: Power duplicate an actual square into a circle, or, maybe use the cog primitive, or ..... etc etc.

@gdenby That'll work, but technically you're telling the program to draw a line of zero length and what you're actually seeing is only the end-caps poking out. Not sure if that may or may not cause problems down the line. But, heck, its how the dots are done so it may be okay... what do I know .

[gdenby]

I haven't needed to send anything to a printer, just working on the screen. So far, it works fine. "Linecap" appears to be a defined .svg term, so the drawing routine pre-supposes either a butt, square, or round. Square or round are can be no smaller than 0 + stroke width. butt can be any fraction of the stroke width.

[vr8ce]

1 hour ago, gdenby said:

hi, vr8ce,

(Ahem, "Rather than numbers that don't really mean anything" Speaking on behalf of the 1/0s in the room, I beg to variate)

It is easy. Here's the rules, as far as I understand them. The line point size equals one(1) unit along the curve. The segments are made like so. The default length of the butt cap end length is zero(0).  A length of 1 dash using that type still equals zero. A dash size of .25 equal 1/4 of the line weight.

When using round and square caps those require at least 1 unit of length added to the base of zero. They will always be at least 1 unit long. The 2nd number indicates the total length the dash can be drawn in. So a size of "1" round cap will be 2 units long, which needs at least a 2nd number, the gap to be one to show the whole dash.

@gdenby,

Most important thing first — thank you! That is perfect. I really appreciate it.

But that is the opposite of easy.  It's only easy if you 1) Have access to the information, and 2) Can make sense of the information.

I don't know where the "rules" are, but I haven't been able to find them. Searching the program help for "dash" turns up a big bag of nothing. The Dashed line tutorial mentions nothing about the caps taking up a unit. I have found at least two more posts here from people asking similar types of questions about dashed lines, because the current method is durn near imcomprehensible.

It makes zero sense that a first unit of 1 (as in a non-zero number) and a square cap results on no dash.

It makes even less sense that a first unit of 0 (zero!) and a second unit of 2 results in a square dash. What?

You know what should result in a square dash like I want? A first unit of 1 and a second unit of 1. According to the tutorial, that should work. But when I tried it before I posted here, it resulted in a solid line! What?! Of course, unbeknownst to me, the square cap was set, either by default, or by something else I inadvertently did long ago, that was carried forward onto the line I tried. Did I mention the tutorial makes no mention at all of the caps and how they impact the length of the dash?

Now knowing that, I just now tried it, changing the square cap to a butt cap, then lo and behold, it worked. So I wasn't persistent enough in my playing with it, my bad. And 1 and 1 and a butt cap makes a lot more sense to me (meaning I will remember it in a few months when I look at this again ) then 0 and 2 and a square cap.

(And what is the difference between a butt cap and a square cap? I have no idea, and I don't see that information anywhere, either. (I don't need an answer to that, the point is the documentation is sorely lacking.))

The point here, again, is that this is far from easy, and that's because Serif has provided far too little documentation on this (that I've been able to find, anyway). Serif needs to fix that, along with several other things related to dashed lines. (Control over start/ending, etc.)

But, thank you again for your help, I now know a couple of extra pieces of information, and I have a perfectly formed square dash line!

@JimmyJack

Right, see above. Having been armed with the information that the caps take up space, I changed it to 1 and 1 with a butt cap, and it produced the same line. Still don't know what the difference between the caps are, but it works and produces the line I want and I'm happy.

[gdenby]

Hi, vr8ce,

Yes, I do recall that at 1st I was perplexed. One of the vids would show how the spacing and phase could be varied, & I wasn't getting any of that. Just started pumping in numbers and changing the line type till I got what i wanted. My recollection is that when I saw a round dot of value 1 made a "bead" 2 times long than the line, that it must be the different cap styles had default sizes of their own. 

Clearer docs would help, for sure.

[v_kyr]

29 minutes ago, vr8ce said:

I don't know where the "rules" are, but I haven't been able to find them. Searching the program help for "dash" turns up a big bag of nothing ...

Quote

Stroke panel

The Stroke panel lets you set the properties of lines and curves, as well as shape outlines and vector brush strokes.

...

About Dash Line Style

For dashed line styles, a Dash number grid appears at the bottom of the panel which sets the Dash pattern using two number pairs:

• The first two values set the size of the initial dash and subsequent space.
• The third and fourth values, when set, introduce a more complex dash pattern by setting a different size for alternate dashes and spaces.

All values are based on the current line width, e.g. a value of 2 is twice the line width.

...

The Phase value allows you to 'shift' the dash line style along so the design begins at a different point in the style's sequence. This can have an impact on how dash lines display for closed shapes (see below).

 

See: Stroke panel

[vr8ce]

@v_kyr,

Thanks for the pointer (which ended up showing yet more problems with the built-in Designer Help), but no, that doesn't contain the "rules". It says nothing the two things most pertinent to this conversation, which I pointed out in my reply to @gdenby:

1. It doesn't say anything about the differences in caps, specifically between butt and square.
2. It doesn't say anything about the caps taking up the equivalent of a line width.

Those were the two major things missing from the tutorial, and they're also missing from the documentation, and they're why I couldn't figure out the answer to my question without help from here.

And for the next problem: Searching Designer Help within the (Mac) app for "Stroke Panel" yields an entry, but clicking it takes you to the main help screen, not the section on the Stroke Panel. In fact, clicking on any of the entries in the attached "Stroke Panel search" picture, i.e. Stroke Panel through Move Tool, takes you back to that main screen. Rendering the built-in help essentially useless. I had to click on several of the items on the left until I finally landed on where it is (Workspace/Panels/Stroke Panel).

Serif needs to pay a lot more attention to their documentation (like get it working, to start with).

[v_kyr]

43 minutes ago, vr8ce said:

Serif needs to pay a lot more attention to their documentation (like get it working, to start with).

That's right, a lot is missing, not well documented and if there is somewhere information it's often difficult to find or well hidden! - Maybe one of the reasons why they made and sell workbooks too.

However, for strokes, caps, line styles etc. you can also take a look at some SVG tutorials or docus on the net, since most things in Affinity products are very similar here if not to say the same...

... for dashes as the preposters already showed and said use ...

Dashed strokes are effectively part stroke and part non-stroke (transparent). 2 possibilities for 2 color stroke (from SVG here):

1. Duplicate the stroke, and group both together. Set the lower stroke in one color, and the upper stroke to dashed style, and another color.
2. Use only 1 stroke, and set the stroke fill to gradient or (custom) pattern. (more a SVG way)