newbie: how to draw a line with arrow head in dojoX-gfx

Submitted by moiz on Tue, 03/11/2008 - 13:30.

DojoX Support

hi,

i am using gfx to create lines and rectangles.

how can draw a line on surface with an arrow head?
is there any way that i could get arrows on any side or both the side of the line.

thanks

Login or register to post comments
Unsubscribe post

The easiest way is to use a path and not a line.

Submitted by ttrenka on Tue, 03/11/2008 - 13:58.

...you'd need to figure out the coordinates of the line, and then draw arrowheads based on it. For instance:

var path=mySurface.createPath("M0,0 l20,-5 -3,5 3,5 Z");

...is a basic arrowhead shape; add that or apply it over a line, and you should be ok. You will need to figure out where your point is that you want to draw the arrowhead on, and what the slope of your line is to figure out how to properly add it, but this is a start.

If you want to try to figure out a more complex way of doing it, you can take a look at the demo in dojox.sketch (there are several types of shapes there, many of the them with arrow heads), which has an SVG serialization in the bottom textarea; dojox GFX paths are based on SVG paths, and you can pass SVG paths right to it for rendering/definition.

thanks......but...

Submitted by moiz on Wed, 03/12/2008 - 06:28.

thanks......but...can you tell me where can find an example of an arrow head.

i am not able to get your code. i am using the following code.

var line = { x1: 10, y1: 15, x2: 50, y2: 15 };
surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1});

it will be great if you could help me in this.

can't we add this as a feature of a line, whether we want an arrow head or not :-)

I just gave you an example.

Submitted by ttrenka on Wed, 03/12/2008 - 19:17.

The key is that you can't be creating a straight line anymore; you will need to take advantage of the path shape, which is the "uber-shape" of all other shapes. There are a set of commands that you can use to draw almost anything; as I'd mentioned, GFX's createPath is based entirely on the SVG specification, which you can find through an easy search on Google.

It does take a little getting used to but once you get the concept, it's actually quite powerful.

What's the purpose behind your questioning? Are you looking to create some sort of flowchart tool? We might be able to point you in other directions so that you don't have to dive in too closely...

sure...

Submitted by moiz on Thu, 03/13/2008 - 05:27.

sure..i will see the createPath in detail, also the svg specification.

Actually i am creating a directed graph from the tree.

Thanks for the help....

I AM trying to do some king of flowchart

Submitted by kchopein_2 on Tue, 05/13/2008 - 08:13.

Hi ttrenka!

I've just read this thread looking for some help and I would be more than glad if you point me in those "other directions" you mention, I you don't mind. I can see fgx is very powerful, but it's a little tricky too, and docs are a little rough at this time. Would you help me please?

Thanks a lot in advance!!

Directed Graph

Submitted by pascal8361 on Thu, 06/05/2008 - 02:03.

I would also need this to connect some other shapes with lines (with arrows), as this should be working for many shapes and connections I am looking for an easy way

The shapes are not sorted - so there is always an other angle

So if anybody does have a solution or knows how to find one ...................... pleas answer --- Thanks!!!

Search