Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

How did they do it?

181 views
Skip to first unread message

DrS

unread,
Jan 23, 2014, 9:33:27 AM1/23/14
to
Look at the DRAW editor on the page: http://wiki.tcl.tk/39239

Apparently, they use Tcl/TK and Tkzinc canvas for this. How do they
draw those nice pictures and those curvy arrows? I suppose they used an
image extension for the images and they are not drawn in Tk. But how
about the arrows? Does the Tkzinc canvas have some extra options that
regular canvas doesn't?

DrS

Christian Gollwitzer

unread,
Jan 23, 2014, 9:44:22 AM1/23/14
to
Am 23.01.14 15:33, schrieb DrS:
While I don't know how they do it, you can draw curved lines in the Tk
canvas easily by

.c create line $coords -smooth raw

where coords are the coordinates of cubic Bezier spline control points,
which is THE standard for 2D curved objects these days across all major
graphics APIs.

Christian

DrS

unread,
Jan 23, 2014, 9:52:48 AM1/23/14
to
On 1/23/2014 9:44 AM, Christian Gollwitzer wrote:
>
> While I don't know how they do it, you can draw curved lines in the Tk
> canvas easily by
>
> .c create line $coords -smooth raw
>
> where coords are the coordinates of cubic Bezier spline control points,
> which is THE standard for 2D curved objects these days across all major
> graphics APIs.
>

So if you want to draw an arrow between two points, how do you convert
them to spline control points?


DrS


Rich

unread,
Jan 23, 2014, 11:52:08 AM1/23/14
to
DrS <drsc...@gmail.com> wrote:
: Look at the DRAW editor on the page: http://wiki.tcl.tk/39239
Everything in the image on that page can be drawn on the existing Tk
canvas. The hard part is working out the right coordinates to use to
draw what is desired.


Christian Gollwitzer

unread,
Jan 23, 2014, 1:37:20 PM1/23/14
to
Am 23.01.14 15:52, schrieb DrS:
It seems you do not know how Bezier splines work, do you? Have a look at
this chart, for instance:

http://cubic-bezier.com/

You see four points, the white ones at the endpoint of the curve, and
the coloured ones at the tangent endpoints. You can drag around the
coloured points and see how the curve reacts. The cubic Bezier always
connects from the first to the fourth point, and the two intermediate
act like "magnets" to the shape of the curve.

As Rich said, the hard part is to find an algorithm which creates the
arrows in a way that they don't intersect with the objects. Fortunately,
this has already been done:

http://www.graphviz.org/

This is a standard library which can draw graphs into the plane with
similar arrows. There is even a tcl library, tcldot, which uses graphvz
to do it, and an interactive editor, dotty, on top of it. If you have
graphviz installed, you can try "dotty"

Christian

DrS

unread,
Jan 23, 2014, 4:56:31 PM1/23/14
to
On 1/23/2014 1:37 PM, Christian Gollwitzer wrote:

>>> While I don't know how they do it,

OK.

>
> It seems you do not know how Bezier splines work, do you? Have a look at
> this chart, for instance:
>

You are making an assumption and it is the wrong one.

I liked the curvy arrows and I wondered how they did it in Tk. You are
suggesting I go and install a gigantic graphics library and then get
another package to be able to use it from Tk. I am sure this answers
some question, but not mine.

My question stands: how did they do it in Tk?

DrS


DrS

unread,
Jan 23, 2014, 5:00:38 PM1/23/14
to
On 1/23/2014 11:52 AM, Rich wrote:

>
> Everything in the image on that page can be drawn on the existing Tk
> canvas. The hard part is working out the right coordinates to use to
> draw what is desired.
>
>

Apparently so since they used Tkzinc which is based on the regular
canvas. It doesn't look like graphics was one of the main topics of
that project but they ended up with nice looking results, especially
with the boxes and arrows.

DrS

Rich

unread,
Jan 23, 2014, 7:23:28 PM1/23/14
to
DrS <drsc...@gmail.com> wrote:
By use of the Tk canvas widget.

A snippet from the canvas man page in regards to canvas line items:

-smooth smoothMethod
smoothMethod must have one of the forms accepted by Tcl_Get-
Boolean or a line smoothing method. Only true and raw are sup-
ported in the core (with bezier being an alias for true), but more
can be added at runtime. If a boolean false value or empty string
is given, no smoothing is applied. A boolean truth value assumes
true smoothing. If the smoothing method is true, this indicates
that the line should be drawn as a curve, rendered as a set of
quadratic splines: one spline is drawn for the first and second
line segments, one for the second and third, and so on.
...

The Tk canvas has been quite capable of drawing curvy lines for a very
long time.

Christian Gollwitzer

unread,
Jan 24, 2014, 1:38:38 AM1/24/14
to
Am 23.01.14 22:56, schrieb DrS:
??? I thought I answered your questions quite clearly. Let me try again.
In fact, there are two parts of it, and I do not understand which one
you want to be answered.

1) How do I draw a Bezier spline arrow in Tk?

2) How do I figure out suitable coordinates to connect boxes with curved
arrows?

======================
Answer to question 1), as in my first post

.c create line $coords -smooth raw

To give you a complete example:

package require Tk
pack [canvas .c -width 200 -height 200]
set coords {50 150 0 50 50 30 150 20}
.c create line $coords -smooth raw -arrow last

======================
Answer to question 2):

Well, you either choose the coordinates manually (by eye). This means,
the first and last of these four points are the endpoints of the arrow,
and the middle two must be placed at a position where you want the arrow
to bend to.

IF you need the computer to figure out the position of these arrows
automatically, just by having the structure of the boxes (a "graph" in
the mathematical sense), then the answer is graphviz. I haven't had a
look at it recently, so I didn't notice that it was blown up to "a giant
graphics package". Previous releases were just a small library in C with
bindings to Tcl which can create such diagrams from graphs automatically.

You can still download, as the bare minimum, "splinomatic"

http://www.graphviz.org/Misc/spline-o-matic/index.html

which is 84kB. Or if you need complete automatic layout, a previous
version of graphviz without all the cairo, gtk and other fancy stuff.

http://www.graphviz.org/pub/graphviz/stable/SOURCES/

As you can see, the first versions where just a few MB, and only
recently they gained weight when dopting 1000 languages, backends and
the web.

>
> My question stands: how did they do it in Tk?

I'm not in the mood to browse through 20 megs of source for you, but it
is available - so why don't you delve into it?

Christian

0 new messages