Symmetrical dashed line coupon boxes in Designer?

[Ballyshannon]

I'm relatively new to Designer and can find no way to create symmetrical dashed line coupon boxes for clients as can easily be done in InDesign with symmetrical looking corners. When resizing in Designer, the dashes move around the box like worms not knowing where they'll end up and I need a consistent looking box with symmetrical corners when resizing. Any way of doing this in Designer? I can't find any  tutorials regarding dashed line boxes for coupons.

[v_kyr]

52 minutes ago, Ballyshannon said:

When resizing in Designer, the dashes move around the box like worms not knowing where they'll end up...

Did you tried with the "scale with object" setting checked here for the line style?

[Ballyshannon]

6 hours ago, v_kyr said:

Did you tried with the "scale with object" setting checked here for the line style?

Yes, and it has no effect. The results are still terrible. It's obvious the dash line feature in Designer was designed for single lines and not coupon boxes, which is a shame since many designers like myself have clients requesting ads with coupons. I'm pretty much resigned to creating anything with coupons in InDesign which isn't a bad thing since it's a great program. I was just hoping Designer could handle it.

[firstdefence]

What Ballyshannon is talking about is aligning a dashed line, like the feature in Adobe Illustrator 

How neat is this

The closest Affinity has is "Phase" which is a manually adjustable alignment of sorts but not as good neat as the feature in Adobe Illustrator.

If you click in the box at the side of Phase you can use the arrow keys to adjust the Phase "position" of the dashed lines to get a half dashed line at either end, holding down Alt will increment that adjustment by .1, not ideal I know but its all you have in Affinity at the moment.

[firstdefence]

There is also something else I have noticed about dashed lines in Affinity that doesn't happen in Adobe Illustrator... the movement of the dash when resizing the width of the stroke. In Adobe Illustrator the dashes stay put as the width is increased but in Affinity the dashes move as you increase the width of the dash, the dash is scaled by length as well as by width, this shouldn't happen surely?

I wouldn't expect the length of the dash to get longer as I increase the width!

Comparison.

Affinity. 
Dashed line @ .5mm 12-6-0-0

and then 1mm 12-6-0-0

 

Adobe Illustrator.
Dashed line @ .5mm 12-6-0-0

 

Dashed line @ 1mm 12-6-0-0

[MickRose]

Until symmetrical dashed line boxes are implemented a sort of workaround is to copy and paste from either Illustrator or InDesign, and maybe store as Assets. Maybe some kind person could create a downloadable PDF file for people to import and store.

[MickRose]

29 minutes ago, firstdefence said:

I wouldn't expect the length of the dash to get longer as I increase the width! 

Neither would I. Could do with an option to keep the dash length the same.

[firstdefence]

Just now, MickRose said:

Neither would I. Could do with an option to keep the dash length the same.

Made a post request for the Affinity Range here: 

 

[v_kyr]

Dashed rects and lines in Designer look to me more or less like those with "stroke-dasharray" created ones in SVG here ...

<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             stroke-width: 3;
             stroke-dasharray: 10 5;
             fill: none;
            "
        />
</svg>

... which sadly also aren't symmetrical corners dashed line boxes here.

[firstdefence]

4 minutes ago, v_kyr said:

Dashed rects and lines in Designer look to me more or less like those with "stroke-dasharray" created ones in SVG here ...

<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             stroke-width: 3;
             stroke-dasharray: 10 5;
             fill: none;
            "
        />
</svg>

... which sadly also aren't symmetrical corners dashed line boxes here.

Its not pretty is it and I just don't get this scaling issue when upping the width, makes no sense to me.

[Alfred]

15 minutes ago, firstdefence said:

I just don't get this scaling issue when upping the width, makes no sense to me

Me too neither. This looks like a bug.

[v_kyr]

17 minutes ago, firstdefence said:

Its not pretty is it and I just don't get this scaling issue when upping the width, makes no sense to me.

Yes it's not pretty and looks always bad to the eyes, even without the scaling issues. The above shown Illustrator settings seem to offer alternate settings for corner handling ...

... so boxes look symmetrical. Also they seem to scale up/down correctly from what I can see above.

[firstdefence]

Just now, αℓƒяє∂ said:

Me too neither. This looks like a bug.

I agree.

[firstdefence]

1 minute ago, v_kyr said:

Yes it's not pretty and looks always bad to the eyes, even without the scaling issues. The above shown Illustrator settings seem to offer alternate settings for corner handling ...

... so boxes look symmetrical.

Correct, I use this when making boxes for my partner, she makes crafts and needs boxes of all shapes, it helps make neater folds.

[gdenby]

I do think the .svg construct influence the way AD does the dashed/dotted line.

The increase in length when the width changes appears to me to be because the dot or dash is a cross section of the line width, or a multiple of that based on the end cap style.

Attached, a series of 5 pt. strokes. First three, no dash/dot setting. 2nd 3, default 1-1 dot-dash setting. Not that the but cap line, which has a cap size of 0 has a 1/1 dot pattern, while the round and square caps are 10 pt long, w. no apparent dash gap. When the pattern is changed to 0/1, the butt cap disappears. In the final 2, the setting is set to 0/2, giving a dot or square that is 5 pt long, w a five point gaps.

 

So the design is "Create a dot or square the width of the line starting within a length of (x)*5pt. So its a feature, not a bug.

[Ballyshannon]

The size/length of dashes isn't the problem. It's an issue with how the dashes interact with corner joining and look of the corners or lack thereof.

I found a quasi workaround by creating a dashed coupon box in InDesign using the Dashed 2/3 setting, copying and pasting into Designer, grouping the five elements (lines and 4 corners are pasted as individual layers), select the stroke option with dash line style, butt cap, miter join with miter set to 2 in order to maintain square corners, align stroke to center, and adjust stroke/dash size as needed. Dash settings are 1/1/0/0/0. As it's resized, the dashes still move around, but the corners remain constant and it just takes some adjusting to get the dashes to look evenly spaced. I don't like the look of the small snub-looking corners, but it's the best workaround I've come up with. Doing it this way, the dashed box can be changed to any color and respond to fx after re-grouping all layers within the original grouping.

The first box below uses the settings mentioned above with a 7.8 stroke. Acceptable but still don't like the small snub-looking corners and can find no way to make the horiz/vert extenders a bit longer on each corner so they look like Illustrator or InDesign corners. For smaller coupon boxes, I can barely tell they're 'corners' when printed. For comparison, dashed box created in InDesign at bottom with 2/3 setting. InDesign provides three dashed line options... '2 and 3' (normal spacing), '4 and 4' (wider spacing), and 'Dashed Line'. I found it interesting that when selecting the basic Dashed Line option, the corners look exactly like the pasted-into-Designer version.

I found that I can achieve more consistent results when eyeballing the spacing by resizing vertically and horizontally and not dragging diagonally.

My file is included at the bottom if you want to check it out.

 

Coupon box.afdesign

[v_kyr]

Here is traced one from a JPG image, then saved as PDF for vector exchange (as curve). But it's not perfect either, I've overseen two little dots on the right side and also some dashes didn't traced that well as rects.

dashed-line-square.afphoto