connecting objects with arrows?

[dredknight]

Hello everyone,

I was wondering how I can make images and connect them with arrows like this: http://i247.photobucket.com/albums/gg152/dredknight/skillwheel%20example.jpg I saw there is is arrow functionality but it is merely nothing like what I need. Not sure if this is issue but still. Thanks :)

[ccoupe]

How about arc (with an arrow at the end).

[dredknight]

Alright I tried a few things with arc and nofill. It may work but I bump into 2 big stones:

1. I cant get the hang of the 2 angle values. It seems the formula does not behave like the math arc formula: arc length =2πR(C/360) I compared it to this calculator http://www.mathopenref.com/arclength.html
2. there is no way to do connections between elements and the arc. Every single arc will have to be done by an "eye" accuracy.

Do I miss anything or this is just as good as it can get on Shoes ?

[passenger94]

arc shape is a bit tricky, here's a demo app that hopefully shows how it works
The red line is at the start of the shape (angle1 = 0°), from there following the arrow you describe your arc to be drawn. This is for arc with angle1: 45° and angle2: 135° (I choose to draw the tip of the shape, you could do similar with the arrow shape )

You have total accurate control of the position of your shapes but as you can see, it becomes quickly bloated with ugly mathematics .... (i hit my limits here ... besides basic trigonometry ....) so if you master Trigosaurusrex and friends you can probably find more elegant ways of doing it.

Looking at the link you provided, it is probably way more sophisticated, because those lines there have to be drawn where there isn't any other object, so technically speaking it is possible, but you better know your way around Maths

# encoding: UTF-8
Shoes.app width: 400, height: 400 do
    flow width: 256, height: 256 do
        border orange
        nofill

        # visual helpers lines (just for the demo)
        stroke orange
        line 0,128,256,128
        line 128,0,128,256
        arc 128, 128, 10, angle1: 0* Shoes::PI/180, angle2: 360* Shoes::PI/180, 
                            fill: orange
        shape do
            move_to 128,128
            arc_to 128, 128, 200, 200, 45* Shoes::PI/180, 45* Shoes::PI/180
            move_to 128,128
            arc_to 128, 128, 200, 200, 135* Shoes::PI/180, 135* Shoes::PI/180
        end
        line 128, 128, 228, 128, stroke: red, strokewidth: 3

        # desired shape
        stroke black
        arc 128, 128, 200, angle1: 45* Shoes::PI/180, angle2: 135* Shoes::PI/180, 
                            strokewidth: 3

        ax = Math.cos(135* Shoes::PI/180)
        ay = Math.sin(135* Shoes::PI/180)
        dx = ax * 100
        dy = ay * 100
        shape do
            # 6 below is the "size" of the arrow
            fill black
            move_to (ax * (100-6))+128, (ay * (100-6))+128
            line_to (dx+128) + ax*6, (dy+128) + ay*6
            arc_to 128, 128, 200, 200, 141* Shoes::PI/180, 141* Shoes::PI/180
        end
    end
    para "angle1 = 0°", left: 200, top: 100
    para "angle1 = 45°", left: 200, top: 180
    para "angle2 = 135°", left: 10, top: 160
end

[dredknight]

May be I am gonna try it. Not sure if it will work as I need to create 100+ arrows dynamically and some of them will change.

[IanTrudel]

How about using SVG arrows? Remember, Shoes now support SVG !

[dredknight]

woot! that sounds great I dont even know how to do it but I read the manual and it seemed promising :). Now I am gonna find some examples thanks!