Open curve alignment

[Paul Mc]

I know this has been discussed a lot in previous posts but I'm asking for advice here rather than complaining about the shortcomings of this "feature".

I've drafted the basic shapes for a design and used strokes with thickness and varying alignments (inside, centre and outside). Several elements start life as an ellipse. In removing the strokes that I don't require in the final design I often have to break the curves at intersection points. Doing so reverts the alignment to centre. This changes the design and the alignment of the graphic elements. I realise that this isn't going to be fixed so I was wondering if anyone has any advice about a workflow that avoids this issue. Clearly not using the alignment option on any curves used in a design that might be broken seems to me to be the only option. Any thoughts?

[NotMyFault]

Just a moonshot: expand curves might be a workaround in some cases (it is clearly no universal solution).

Do your designs need to stay vector, or is bitmap/raster a suitable option?

Instead of changing nodes, may use vector or bitmap masks to remove unwanted parts.

[Paul Mc]

Hi @NotMyFault, I am designing a set of logos for an application that will be used as button graphics. The desired format is SVG. Here's an example:

These are to fit in a precise size (128px square), so I create the top ellipse first, and set the curve Align to inside, I then copy and paste the second ellipse below and then duplicate the next two. I then added the vertical side curves. I then converted the bottom three ellipses to curves and then went to break the curves at the intersection points with the two vertical lines. The bottom three ellipses then change in size (in reality the Align : inside changes to centre without warning!). I re-did the design keeping all curves centred but the Transform panel uses the centres to define the size and not the true extent of the curves including their thickness so some maths seems to be needed to get this correct. It's not difficult but it just seems more hassle than it should be.

Expand curves would help with the final resizing. I've also used an "outside" curve with the same colour as the background in the past to remove the excess on a centred open curve that's part of a closed curve but that's not applicable in this instance. I can also use a set of scaled PNGs but SVG is more flexible and usually less work (the small PNGs often need pixel tweaking).

[NotMyFault]

 

 

I would take a different approach, from bottom to top and utilizing visibility / hiding of layers :

• use rectangle and ellipse and geometry>add them
• duplicate 3 times and move upwards
• add a ellipse on top
• leave them as 4 shapes.

no need to break curves.

 

 

svg symbol.afdesign

Edited January 13, 2022 by NotMyFault
updated files

[NotMyFault]

Even if you need an element that should look like a open curve: close them by using a copy of the nodes in reversed direction. It will look like a open curve, but you can use the alignment options of closed curves.

[Paul Mc]

Yes, I'm sure that would work too. I think anyone's approach is going to be from a comfort perspective and that's driven by familiarity.

The Boolean Add ensures that all the curves are closed so the alignment wouldn't be a issue here.

In my workflow I try to end up with the only the curves that are required, it's just me I suppose! Of course, for transparent line drawings this wouldn't work, and that's been a lot of my work in the past.

For this example it is fairly simple and your method would work well. Now that I know about the Align issue, the closed curve approach would probably be the best for work like these small icons. Thanks for taking the time to comment.

[Paul Mc]

4 minutes ago, NotMyFault said:

...close them by using a copy of the nodes in reversed direction.

I did consider that but I couldn't get the alignment to work as I wanted. The thickness was on both sides and centre had no thickness.

[MEB]

15 minutes ago, Paul Mc said:

In my workflow I try to end up with the only the curves that are required, it's just me I suppose! Of course, for transparent line drawings this wouldn't work, and that's been a lot of my work in the past.

It's also good practise, the less extraneous/superfluous elements, the smaller the icon's file size (SVG).

[MEB]

@Paul Mc,
There's no need to break the curves if all you want is to remove a segment you are not interested in, like the "hidden" part of an ellipse in the case above. Select the Node Tool, press and hold CTRL, mouse over the segment you want to get rid of until you see a red cross near the cursor and click the segment to delete it. In the case of the ellipse you will have to convert it to curves first (since its a geometric shape) which you can do selecting the ellipse and pressing cmd+Enter (macOS) or CTRL+Enter (Windows).

[Paul Mc]

Thanks, @MEB 

I (roughly) followed the steps you describe in my approach. Surely deleting a segment breaks the curve?

Deleting the segments wasn't the real problem though. The issue is that a closed curve with an align of inside or outside effectively turns into an open curve when you delete a segment which also changes the align to centre.

Just for clarity in case anyone else is wondering what I'm talking about here.

From a UX perspective this was a surprise. Although there is visual feedback in the form of the curve changing position/alignment there was no other indication that this change had occurred.

[MEB]

Hi @Paul Mc,
I understood/am aware of your issue but there's no way around it other than avoiding the use of other alignments other than the centre. My point above was just to let you know you can delete segments directly with the Node Tool without having to use the Break Curve button in the context toolbar which i believed is what you were doing from your descriptions above.

 

[Paul Mc]

Hi @MEB, sorry, I didn't mean to suggest that you weren't aware of the issue. I misunderstood your point about the Break Curve button. Yes, the CTRL+ hover and Click method is quicker that what I did. Thanks.

[R C-R]

4 hours ago, Paul Mc said:

The issue is that a closed curve with an align of inside or outside effectively turns into an open curve when you delete a segment which also changes the align to centre.

Not that it makes anything any clearer or easier to use for your needs but it does not actually change the alignment. It is still aligned as indicated in the Stroke panel, but it has no effect on open curves because they have no clearly defined inside or outside. This means that if you re-close the curve, the alignment becomes visible again -- it is a 'sticky' property of the curve that does not change unless you explicitly do that.

To demonstrate this, the attached stroke alignments.afdesign example includes the history so you can use the History slider to go back & forth between the open & re-closed state of all three curves.

[Paul Mc]

As you say, the user-interface doesn't change which begs the question as to why it is visible, enabled and can be modified without having any effect. Clearly this parameter is ignored for open curves but remains with the data set for that curve. Technically, there's no reason for the open curve not to have the stroke retained on the side(s) it was set when the curve was closed so I'm hoping this is an indication that this functionality will be introduced in a future version of AD.

[R C-R]

2 hours ago, Paul Mc said:

Technically, there's no reason for the open curve not to have the stroke retained on the side(s) it was set when the curve was closed so I'm hoping this is an indication that this functionality will be introduced in a future version of AD.

How do you define on which side of an arbitrarily shaped curve the stroke should be placed after it is opened? Consider for instance a closed figure 8 shape or one that crosses itself multiple times, like the two in this two curves.afdesign file. Depending on how they are opened, there is no clear inside or outside that I can see.

Can you?

[Paul Mc]

You, the designer, should decide on which side of the curve you want the stroke to appear.

To do this you need to have a convention or a rule so that the user can directly specify this. This is where the curve direction is important.

Behind the scenes there is a direction stored in the curve representation in memory. I realise you might not agree with this but trust me, this is the case.  Please export a multi-node curve to SVG and look at the file contents. You will see something like this:

<path d="M0.12,30.538c107.935,31.399 135.899,51.514 98.122,144.24c-37.777,92.725 59.364,193.791 116.766,156.996c57.401,-36.796 196.245,-208.02 90.273,-241.872c-105.973,-33.852 -235.494,-79.479 -106.463,-89.782" style="fill:none;stroke:#000;stroke-width:0.24px;"/>

Direction is often used to help fill shapes in a predictable manner as well. Each curve will have a first and last node. In some cases these will share the same position on the plane and if the tangents align then this would be considered a closed curve. In any case, travelling from the first node in the direction of the first handle gives you a vector which has a left side and right side. You can think of this as rotating the vector around the start node in an anticlockwise direction for the left side and clockwise for the right side. Alternatively, standing on the start node on the canvas and looking towards the first handle you will have a left hand side to the curve and a right hand side to the curve. Personally, I feel that the terms inside and outside  are inappropriate for this as they have additional meaning which does not always apply in some scenarios e.g. the cases you show above.

At this point the choice of side is an easy matter.

[R C-R]

I have no idea what your SVG export is supposed to show about the direction of a curve. It is just a collection of points on the curve.

Regardless, you still have not answered which side of the curve, left or right, the stroke should be placed on in an open curve. Saying there needs to be a convention or rule is not the same as saying there is one within the Affinity implementation.

[Paul Mc]

3 hours ago, R C-R said:

It is just a collection of points on the curve.

Nope. It's a list.

3 hours ago, R C-R said:

Regardless, you still have not answered which side of the curve, left or right, the stroke should be placed on in an open curve.

There is no answer - because it is not a valid question? It should be whichever side the designer wishes it to be, no? Just like inside, centre and outside, shouldn't you be able to choose. There is no de-facto standard for this. Why would you want AD to decide for you?

This is getting a long way from my post and not helping answer my original question. I accept that what I was trying to do isn't going to work. @MEB has already confirmed this. What I was wondering was whether anyone had found a workaround that allows non-centred curves to retain their size and position after being broken. After the responses so far and my experimentation here I feel that this not possible without a lot of planning and mathematics i.e. use of the transform panel to position and size elements precisely after calculating offsets.

[Old Bruce]

On 1/13/2022 at 2:02 AM, Paul Mc said:

I've drafted the basic shapes for a design and used strokes with thickness and varying alignments (inside, centre and outside). Several elements start life as an ellipse. In removing the strokes that I don't require in the final design I often have to break the curves at intersection points. Doing so reverts the alignment to centre. This changes the design and the alignment of the graphic elements.

I do not mean to be flippant when I say you should do all the design work with centre aligned strokes. If there are closed curves then you can change the alignment to whatever you want. Otherwise it will be: Start the design using various alignments. Break the curves. Change the sizes of the curves so the now centred stokes fit the original design.

[R C-R]

6 hours ago, Paul Mc said:

Nope. It's a list.

Is a collection of points not a list?

6 hours ago, Paul Mc said:

There is no answer - because it is not a valid question?
{...}
There is no de-facto standard for this.

That's the point! There is no answer because there is no clearly defined de-facto standard for determining which is the left or right side of the path of an open curve, & thus no standard for which side of it a stroke should be placed on. Affinity does not decide this; instead, it just stores the alignment as one of the properties in the curve. The user can change it at any time, in exactly the same way the width or any other property of the stroke can be changed.

What can be confusing about it is that does not necessarily mean changing a stored property will change the appearance of the curve. For instance, setting a stroke start or end shape (like an arrowhead or circle) & then setting the stroke width property to zero produces no visible end shape, even though that property is still stored in the curve.

So as you have confirmed, because there is no standard for this you cannot retain the size and position of a stroke if its stroke alignment property is set to anything other than centered.

[Old Bruce]

2 minutes ago, R C-R said:

There is no answer because there is no clearly defined de-facto standard for determining which is the left or right side of the path of an open curve,

I suggest we use the riverbank method.

left bank. The bank of a river on the left as one faces downstream.

Define upstream to be the start point and downstream to be the end point.

This causes more problems than it solves.

Of course we cannot use the current system of inside & outside with this new left & right method being congruent. Think what would happen to a closed curve with an obvious inside mapped to left. When the path is reversed, suddenly the interior is now right and outside. Where would the fill go?

[Paul Mc]

11 minutes ago, R C-R said:

Is a collection of points not a list?

For me a collection has no implied order whereas a list does. The order is what fives the curve a sense of direction.

13 minutes ago, R C-R said:

That's the point!

We agree then! 😉

[Paul Mc]

14 minutes ago, Old Bruce said:

I do not mean to be flippant when I say you should do all the design work with centre aligned strokes. If there are closed curves then you can change the alignment to whatever you want. Otherwise it will be: Start the design using various alignments. Break the curves. Change the sizes of the curves so the now centred stokes fit the original design.

Thanks @Old Bruce, this is being wise after the fact though. I had a brief to design several icons to fit within a specific rectangle. I started the work by creating guides that were pixel aligned to that rectangle. I then created some ellipses and a rectangle with the desired stroke thickness and snapped these to the guides. The default being centre aligned meant that the strokes extended beyond the size limit I was working to. I then modified the alignment to inside and at that point everything looked fine. I then went to trim the curves and delete some lines and that's when I was surprised that the new half ellipses reverted back to centre aligned. These were not what I wanted, or expected. This was my ignorance about how this software worked. I realise that now. At the time I don't think this was an unreasonable expectation. This is further frustrated by the fact that I've coded curve offsets in the past which do this so I know it is perfectly possible - just not how AD works.

I've managed to get the work done now but it involved a lot of use of the Transform panel and calculation of offsets of the node coordinates in conjunction with the stroke  width. It just felt like it was a lot more work than it should have been.

[Paul Mc]

12 minutes ago, Old Bruce said:

I suggest we use the riverbank method.

I said exactly the same thing in another recent thread.

13 minutes ago, Old Bruce said:

This causes more problems than it solves.

I couldn't agree more. Although computationally this is possible to solve there is a huge culture of expectations to satisfy. You only have to look at the Standards documentation and meeting notes for the SVG standard on this point alone to see that there are many unresolved issues here. It has been proposed and rejected several times now. I'm not up to date on the current state of affairs on this specific point but if it were part of the SVG format then I think this would provide a good basis for an AD future feature. As far as I know (and I may be wrong here) AI is the only application to provide this function.

[R C-R]

6 minutes ago, Paul Mc said:

Although computationally this is possible to solve there is a huge culture of expectations to satisfy. You only have to look at the Standards documentation and meeting notes for the SVG standard on this point alone to see that there are many unresolved issues here.

Specific to Affinity among the unresolved issues is the lack of any clear sense or indication of the direction of Affinity's parametric shapes, as well as how those & other vector shapes are exported to the SVG format.

direction?.afdesign