Arrows PLEASE!?

[GuyM]

Please advise when Affinity will enable the drawing of simple vector arrows, thank you. Best Regards, Guy M. 

[Lee D]

Hi GuyM,

 

Welcome to the forums.

 

Affinity Designer has an Arrow Tool as part of the Quickshapes flyout panel, it also has nodes for you to adjust the layout of the arrow shape.

[R C-R]

Also, "Arrow head line styles" are on the Affinity Designer feature roadmap, so while that does not answer the "when" question it means we will get that feature ... eventually.

[GuyM]

can you tell me where to find the quickshapes flyout? I am new to affinity and only on a trial at the moment while i assess it's suitability. Best Regards, Guy M. 

[gdenby]

The shapes flyout is the 15th tool down from the top. right under the rounded square. There are about 20  predefined shapes, with hundreds variations possible. The arrow shape has at least 40 variants.

[GuyM]

Thank you that advice. my gosh thats a clumsy tool to use to draw arrows! I need to be able to draw a line and select an arrowhead one end and maybe a dot or line or another arrow at the other. I appreciate your support and help none the less.

[gdenby]

Thank you that advice. my gosh thats a clumsy tool to use to draw arrows! I need to be able to draw a line and select an arrowhead one end and maybe a dot or line or another arrow at the other. I appreciate your support and help none the less.

 

Yeah, its an element that lots of people need/want. The topic has cropped up repeatedly. As I recall, this thread has a member's workable add on: https://forum.affinity.serif.com/index.php?/topic/3723-arrow-brush/?hl=%2Barrow+%2Bbrush

[Bri-Toon]

Thank you that advice. my gosh thats a clumsy tool to use to draw arrows! I need to be able to draw a line and select an arrowhead one end and maybe a dot or line or another arrow at the other. I appreciate your support and help none the less.

 

A lot of people are looking for this, and they don't realize it's right under their noses. You can create your own vector brush as long as you export it as an image file with a black background and then import it in the Brushes tab as a "Textured Intensity Brush." Just export and then import the arrow smart shape. (Make sure you export it with a black background before importing it back in.)

 

Credit goes to Ronny .

[Stokestack]

While we wait for a proper arrowhead tool, can we please have an option to gang the left and right parameters in the arrow shape generator?

 

Currently, you have to adjust one end and then tediously copy and paste the values into the other.  Why?

 

 

[A for Design]

How do you make an arrow with a dashed line segment?
I tried this, but the arrowhead also gets dashed, resulting in a big mess.

Btw. quite a strange way to set up arrows. The options to style the arrow are quite good, but it's very non-intuitive.

 

[GuyM]

Hello, could you tell me how you managed to get it to just draw a line with an arrow on it in the 1st place? I would be most grateful for your advice.

[gdenby]

A file to look over. Work around techniques for now.

 

WorkAroundFun.afdesign

[v_kyr]

Another possibility is to define some in SVG, then import the SVG text file and make a reusable custom asset category out of these.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="210px">
	<line stroke="#000" stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" stroke-width="2"/>
	<path d="M0,10 L10,5 L10,15 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" stroke-width="2"/>
	<path d="M0,30 L10,25 L10,35 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" stroke-width="2"/>
	<path d="M0,50 L10,45 L10,55 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" stroke-width="2"/>
	<path d="M0,70 L10,65 L10,75 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" stroke-width="2"/>
	<path d="M0,90 L10,85 L10,95 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" stroke-width="2"/>
	<path d="M0,110 L10,105 L10,115 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" stroke-width="2"/>
	<path d="M0,130 L10,125 L10,135 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" stroke-width="2"/>
	<path d="M0,150 L10,145 L10,155 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" stroke-width="2"/>
	<path d="M0,170 L10,165 L10,175 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" stroke-width="2"/>
	<path d="M0,190 L10,185 L10,195 z" fill="#000" />
</svg>

[Stokestack]

6 hours ago, gdenby said:

A file to look over. Work around techniques for now.

 

WorkAroundFun.afdesign

 

Thanks. What is creating the arrowhead on that curved line? I don't see it defined anywhere.

 

Quote

Another possibility is to define some in SVG

 

Cool. Where in that SVG are the arrowheads specified?

[R C-R]

20 minutes ago, v_kyr said:

Another possibility is to define some in SVG, then import and make a reusable asset category out of these.

That works pretty well: v_kyr's arrows.afassets

 

EDIT: but it is a bit of a challenge if the path needs to be bent. 

[v_kyr]

The first line:

<line stroke="#000" stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" stroke-width="2"/>

...defines the line style, aka stroke color, dasharray type, positioning and length (x1,y1 to x2,y2) and the stroke thickness.

The second line:

<path d="M0,10 L10,5 L10,15 z" fill="#000" />

...draws an arrow head -> moveto x,y, lineto x,y, lineto x,y, and z=closepath, fill color=black.

So the arrow head is defined here via an path element command. - Of course there can also be defined/drawn other different looking arrow heads.

[Stokestack]

Cool, thanks. Was wondering where the syntax was.

[v_kyr]

The w3school and some other sites have quite good online tutorials where you also can immediately try out the code and play around with certain SVG commands here. - Though all you need is a command reference, a text editor and a webbroser (FF, Chrome etc.) in order to try out things locally. - I recall that Inkscape also offers a lot of useful things here, since it highly uses the SVG format too.

[Stokestack]

Thanks. I tried Inkscape years ago because, on the Mac, there weren't any other alternatives to Illustrator; Illustrator is essentially defunct, and so crippled by design flaws (like the inability to set the selection mode to "only objects fully contained by the marquee") that I would run Corel Draw in a Windows VM just to avoid it.

 

But in the end I didn't want to install all of Inkscape's dependencies. I don't know if they've done anything about that or not.

 

I bought Designer right away after seeing that it doesn't suffer from that glaring Illustrator defect, but I'm baffled at some of the things that are still missing and other problems that should never have been conceived, let alone shipped.

[v_kyr]

Related to Inkscape, if you mean it's XQuartz dependency, no it looks like it sadly hasn't changed at all in that way and still needs it. ADesigner well there is still much room for improvements here too!

[gdenby]

7 hours ago, Stokestack said:

 

Thanks. What is creating the arrowhead on that curved line? I don't see it defined anywhere.

 

 

Look at the pressure profile for the stroke. Changing the pressure graph allows the appearance of dynamic strokes. Also, as in this case, adding a geometric shape at one end. Manipulating the graph can be fussy, because it is so small, but after some work, the stroke shapes can be saved as styles.

[Alfred]

12 minutes ago, gdenby said:

Manipulating the graph can be fussy, because it is so small

 

It would be great to be able to float the pressure graph window and resize it. I’m sure this is already in a feature request thread somewhere.

[lepr]

.

[v_kyr]

I think that the Inkscape installation via MacPorts or Homebrew do already take care of the needed dependencies here.

Beside that there are also some other quick turnaround SVG tools available which allow to draw stuff, like:

• Method Draw (has some predefined arrow shapes etc.)
• SVG-edit
• Boxy SVG

[R C-R]

1 hour ago, owenr said:

The current Inkscape for macOS just requires you to download and run the XQuartz installer first. 

And probably log out & back into your user account, not that that is a big deal. But XQuartz does install a lot of files (I think about 200 MB for the current version), & some users may not want to devote that much file space to something they probably won't use with much besides Inkscape.