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 c->view($value) whenever c->yscroll do vsb->view($value) whenever c->xscroll do hsb->view($value) poly := c->poly(20,-40,40,-20,40,20,20,40,-20,40,-40, 20,-40,-20,-20,-40,fill='red',tag='stop') edge := c->line(20,-40,40,-20,40,20,20,40,-20,40,-40,20,-40,-20, -20,-40,20,-40,fill='white',width='5',tag='stop') word := c->text(0,0,text='STOP',fill='white',tag='stop') c->move("all",50,50) c->bind('stop','<Button-1>','snag') c->bind('stop','<B1-Motion>','drag') 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
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.
Event I/O Values Description addtag <N>
<O>
add tag <N>
to items tagged with <O>
arc integer draw arc background X color change background color bind <T>
<X>
<G>
associate Xevent <X>
, in tagged item <T>
with Glish event <G>
; <T>
is optional borderwidth dimension change border width canvasx integer convert from window coordintates to canvas coordinates canvasy integer convert from window coordintates to canvas coordinates delete string delete items with specified tag deltag string delete the tag foreground X color change foreground color frame integer create a frame widget at the specified location height integer height in lines line integer draw line move string/integer move tagged items specified offset oval integer draw oval poly integer draw polygon rectangle integer draw rectangle relief 'flat' 'ridge' 'raised' 'sunken' 'groove' change border relief region integer set the dimension of the canvas region tagabove <N>
<O>
add tag <N>
to item above <O>
in display list tagbelow <N>
<O>
add tag <N>
to item above <O>
in display list text string draw text view record scrollbar update event width integer width in character units xscroll double information for horizontal scrollbar update yscroll double information for vertical scrollbar update