next up previous contents index
Next: Version Number and Utility Up: Glish/Tk Previous: Text


  The canvas widget is the most complicated widget discussed in this chapter. It implements a generalized drawing surface. This means that from Glish the user can draw on the canvas and later interact with the objects drawn on the screen. Here is a reasonably simple example that draws a stop sign on the canvas and then sets it up so that it is draggable by the user:

    f := frame()
    cf := frame(f,side='left',borderwidth=0)
    c := canvas(cf)
    vsb := scrollbar(cf)

    bf := frame(f,side='right',borderwidth=0,expand='x')
    pad := frame(bf,expand='none',width=23,height=23,relief='groove')
    hsb := scrollbar(bf,orient='horizontal')

    whenever vsb->scroll, hsb->scroll do
    whenever c->yscroll do
    whenever c->xscroll do
    poly := c->poly(20,-40,40,-20,40,20,20,40,-20,40,-40,
    edge := c->line(20,-40,40,-20,40,20,20,40,-20,40,-40,20,-40,-20,
    word := c->text(0,0,text='STOP',fill='white',tag='stop')
    whenever c->snag do
        state := $value.cpoint
    whenever c->drag do
        tmp := c->move($value.tag, $value.cpoint - state)
        state := $value.cpoint
Two frames are first constructed to contain the scrollbars, as in previous examples, and then the canvas widget and the scrollbars are created in these frames (Table 10.18 lists all of the creation parameters for canvas). Then canvas drawing operations are used to draw the sign.


Parameter Default Values Description
parent widget parent
width 200 dimension width of canvas
height 150 dimension height of canvas
region [0,0,1000,400] integer integer array specifies the underlying drawing region
relief 'sunken' 'flat' 'ridge' 'raised' 'sunken' 'groove' edge relief
borderwidth 2 dimension border width
background 'lightgrey' X color background color
fill 'both' 'x' 'y' 'both' 'none' how to expand when resized
Table 10.18: Canvas Construction Parameters


All drawing operations return an identifier. In this example, Three things are drawn onto the canvas; a red polygon, poly, a white border for the polygon, edge, and a text message, word. The identifier returned by these operations can later be used for other operations on the item. Also note that each item is tagged with an additional name, stop. This is done with the tag parameter. After that, the entire collection of items drawn can be referred to as stop. The move event simply moves items on the canvas. In this case, all of the items drawn are shifted from the top left corner of the drawing surface. This was necessary because the items were drawn about the origin, and the underlying drawing surface only goes from [0,0] to [1000,400], the default range. The drawing surface could just as easily start at [-1000,-400].

The two bind events bind mouse events to Glish events. The first says that whenever button one is pressed when the cursor is over the stop items generate a snag event. The second says whenever button one is moved (after first being pressed) when the cursor is over the stop items generate a drag event. Any X event on the canvas can be bound to a Glish event in this manner. The two whenever statements operate on these events. The first stores away the canvas position of the cursor in state when the snag event is generated. The second requests that the item that the drag event is generated for, $value.tag i.e. stop, be move by the difference of the previous and current mouse positions. It then updates the state for the next time. This would look like the dialog shown in Figure 10.12, after the stop sign has been dragged a bit. Table 10.19 describes the events which can be sent to a canvas. The mouse events which can be bound to Glish events in the canvas correspond to the standard X events.

Figure 10.12: Canvas


Event I/O Values Description
addtag tex2html_wrap_inline15708<N> <O> add tag <N> to items tagged with <O>
arc tex2html_wrap_inline15712integer draw arc
backgroundtex2html_wrap_inline15708 X color change background color
bind tex2html_wrap_inline15708<T> <X> <G> associate Xevent <X>, in tagged item <T> with Glish event <G>; <T> is optional
borderwidthtex2html_wrap_inline15708 dimension change border width
canvasx tex2html_wrap_inline15712integer convert from window coordintates to canvas coordinates
canvasy tex2html_wrap_inline15712integer convert from window coordintates to canvas coordinates
delete tex2html_wrap_inline15708string delete items with specified tag
deltag tex2html_wrap_inline15708string delete the tag
foregroundtex2html_wrap_inline15708 X color change foreground color
frame tex2html_wrap_inline15712integer create a frame widget at the specified location
height tex2html_wrap_inline15708integer height in lines
line tex2html_wrap_inline15712integer draw line
move tex2html_wrap_inline15708string/integer move tagged items specified offset
oval tex2html_wrap_inline15712integer draw oval
poly tex2html_wrap_inline15712integer draw polygon
rectangle tex2html_wrap_inline15712integer draw rectangle
relief tex2html_wrap_inline15708 'flat' 'ridge' 'raised' 'sunken' 'groove' change border relief
region tex2html_wrap_inline15708integer set the dimension of the canvas region
tagabove tex2html_wrap_inline15708<N> <O> add tag <N> to item above <O> in display list
tagbelow tex2html_wrap_inline15708<N> <O> add tag <N> to item above <O> in display list
text tex2html_wrap_inline15712string draw text
view tex2html_wrap_inline15708record scrollbar update event
width tex2html_wrap_inline15708integer width in character units
xscroll tex2html_wrap_inline15710double information for horizontal scrollbar update
yscroll tex2html_wrap_inline15710double information for vertical scrollbar update
Table 10.19: Canvas Events



next up previous contents index
Next: Version Number and Utility Up: Glish/Tk Previous: Text

Thu Nov 13 16:44:05 EST 1997