ZetCode

在 Tcl/Tk 中绘图

最后修改于 2023 年 10 月 18 日

在本 Tcl/Tk 教程中,我们将进行一些绘图。 在 Tk 中,绘图是在 canvas 小部件上完成的。 canvas 是 Tk 中用于图形的高级工具。

它可以用来创建图表,自定义小部件或创建游戏。

颜色

颜色是表示红色、绿色和蓝色 (RGB) 强度值组合的对象。

colours.tcl
#!/usr/bin/wish

# ZetCode Tcl Tk tutorial
#
# This program draws three
# rectangles filled with different
# colours.
#
# Author: Jan Bodnar
# Website: www.zetcode.com


canvas .can
.can create rect 30 10 120 80 \
    -outline #fb0 -fill #fb0
.can create rect 150 10 240 80 \
    -outline #f50 -fill #f50
.can create rect 270 10 370 80 \
    -outline #05f -fill #05f
pack .can


wm title . "Colours"
wm geometry . 400x100+300+300

在代码示例中,我们绘制三个矩形,并用不同的颜色值填充它们。

canvas .can

我们创建 canvas 小部件。

.can create rect 30 10 120 80 \
    -outline #fb0 -fill #fb0

使用 create 命令,我们在 canvas 上创建一个新的矩形项目。 前四个参数是两个边界点的 x、y 坐标:左上角和右下角。 使用 -outline 选项,我们可以控制矩形轮廓的颜色。 同样,-fill 选项提供了矩形内部的颜色。

Colours
图:颜色

形状

我们可以在 canvas 上绘制各种形状。 下面的代码示例将展示其中的一些。

shapes.tcl
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we draw basic 
# shapes on the canvas.
#
# Author: Jan Bodnar
# Website: www.zetcode.com


canvas .can
.can create oval 10 10 80 80 -outline #777 \
    -fill #777 
.can create oval 110 10 210 80 -outline #777 \
    -fill #777 
.can create rect 230 10 290 60 -outline #777 \
    -fill #777 
.can create arc 30 200 90 100 -start 0 -extent 210 \
    -outline #777 -fill #777 
    
set points  [ list 150 100 200 120 240 180 210 \
    200 150 150 100 200 ]
.can create polygon $points -outline #777 \
    -fill #777 
pack .can

wm title . "shapes" 
wm geometry . 350x250+300+300

我们在窗口上绘制五个不同的形状:一个圆,一个椭圆,一个矩形,一个弧和一个多边形。 轮廓和内部都用相同的灰色绘制。

.can create oval 10 10 80 80 -outline #777 \
    -fill #777 

create oval 创建一个圆。 前四个参数是圆的边界框坐标。 换句话说,它们是绘制圆的框的左上角和右下角的 x、y 坐标。

.can create rect 230 10 290 60 -outline #777 \
    -fill #777

我们创建一个矩形项目。 坐标再次是要绘制的矩形的边界框。

.can create arc 30 200 90 100 -start 0 -extent 210 \
    -outline #777 -fill #777 

这行代码创建一个弧。 弧是圆周的一部分。 我们提供边界框。 -start 选项是弧的起始角度。 -extent 是角度大小。

set points  [ list 150 100 200 120 240 180 210 \
    200 150 150 100 200 ]
.can create polygon $points -outline #777 \
    -fill #777 

创建一个多边形。 这是一个具有多个角的形状。 要在 Tk 中创建多边形,我们将多边形坐标列表提供给 create polygon 命令。

shapes
图:形状

绘制图像

在下面的示例中,我们在 canvas 上创建一个图像项目。

draw_image.tcl
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program draws an image
# on the canvas widget.
#
# Author: Jan Bodnar
# Website: www.zetcode.com

package require Img

image create photo img -file "tatras.jpg"
set height [image height img]
set width [image width img]


canvas .can -height $height -width $width
.can create image 0 0 -anchor nw -image img
pack .can

wm title . "High Tatras" 
wm geometry . +300+300

我们在 canvas 上显示一张图片。

image create photo img -file "tatras.jpg"

我们从位于当前工作目录中的 JPG 图像创建一个照片图像。

set height [image height img]
set width [image width img]

我们获取图像的高度和宽度。

canvas .can -height $height -width $width

我们创建 canvas 小部件。 它考虑了图像的大小。

.can create image 0 0 -anchor nw -image img

我们使用 create image 命令在 canvas 上创建一个图像项目。 为了显示整个图像,它被锚定到北面和西面。 -image 选项提供了要显示的照片图像。

绘制文本

在最后一个示例中,我们将在窗口上绘制文本。

lyrics.tcl
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we draw text
# on the window.
#
# Author: Jan Bodnar
# Website: www.zetcode.com


canvas .can
.can create text 10 30 -anchor w -font Purisa \
    -text "Most relationships seem so transitory"
.can create text 10 60 -anchor w -font Purisa \
    -text "They're good but not the permanent one"
.can create text 10 110 -anchor w -font Purisa \
    -text "Who doesn't long for someone to hold"
.can create text 10 140 -anchor w -font Purisa \
    -text "Who knows how to love without being told"
.can create text 10 170 -anchor w -font Purisa \
    -text "Somebody tell me why I'm on my own"
.can create text 10 200 -anchor w -font Purisa \
     -text "If there's a soulmate for everyone"
pack .can

wm title . "lyrics"
wm geometry . 430x250+300+300

我们在窗口上绘制一首歌的歌词。

.can create text 10 30 -anchor w -font Purisa \
    -text "Most relationships seem so transitory"

前两个参数是文本中心点的 x、y 坐标。 如果我们将文本项目锚定到西面,文本将从这个位置开始。 -font 选项提供了文本的字体,-text 选项是要显示的文本。

Drawing text
图:绘制文本

在本 Tcl/Tk 教程中,我们进行了一些绘图。