Ruby/TK - 画布小部件

---

描述

Canvas小部件实现结构化图形。画布显示任意数量的项目，可能是矩形、圆形、线条和文本。

项目可以被操纵（例如，移动或重新着色）并且回调可以以与绑定方法允许回调绑定到小部件大致相同的方式与项目相关联。

句法

这是创建此小部件的简单语法 -

TkCanvas.new {
   .....Standard Options....
   .....Widget-specific Options....
}

标准选项

• 背景
• 边框宽度
• 光标
• 突出显示背景
• 突出显示颜色
• 突出显示厚度
• 宽慰
• 选择背景
• 选择边框宽度
• 选择前景
• 状态
• 聚焦
• 瓦
• xscroll命令
• yscroll命令

这些选项已在前一章中进行了描述。

小部件特定选项

指数

索引用于插入文本、删除一定范围的字符以及设置插入光标位置等方法。可以用多种方式中的任何一种来指定索引，并且不同类型的项目可以支持用于指定索引的不同形式。

文本项支持以下索引形式 -

• number - 一个十进制数，给出文本项中所需字符的位置。0 表示第一个字符，1 表示下一个字符，依此类推。

• end - 指项目中最后一个之后的字符或坐标（与项目中的字符或坐标数相同）。

• insert - 指在此项中绘制插入光标之前的字符。对于直线和多边形无效。

创建项目

当您创建一个新的画布小部件时，它本质上是一个没有任何内容的大矩形；换句话说，这确实是一张空白的画布。要使用它做任何有用的事情，您需要向其中添加项目。

您可以添加多种不同类型的项目。以下方法将用于在画布内创建不同的项目 -

弧形物品

arc 类型的项目在显示屏上显示为弧形区域。圆弧是由两个角界定的椭圆形的一部分。弧是使用以下形式的方法创建的 -

TkcArc.new (canvas, x1, y1, x2, y2, ?option, value, option, value, ...?)方法将用于创建弧。

参数 x1、y1、x2 和 y2 给出包围定义圆弧的椭圆形的矩形区域的两个对角相对角的坐标。这是其他选项的描述 -

• 范围 => 度- 指定圆弧占据的角度范围的大小。如果它大于 360 或小于 -360，则使用模 360 的度数作为范围。

• fill => color - 用颜色填充圆弧区域。

• 轮廓 => 颜色- 颜色指定用于绘制圆弧轮廓的颜色。

• start => Degrees - 指定圆弧占据的角度范围的起点。

• style => type - 指定如何绘制圆弧。如果类型为pieslice（默认值），则弧的区域由椭圆形周边的一部分加上两条线段（椭圆形中心与周边部分两端之间的一条线段）定义。如果类型为弦，则弧的区域由椭圆形周边的一部分加上连接周边部分的两个端点的单条线段定义。如果类型为圆弧，则圆弧的区域仅由周边的一部分组成。

• Tags => tagList - 指定一组应用于该项目的标签。TagList 由标签名称列表组成，这些标签名称会替换该项目的任何现有标签。TagList 可能是一个空列表。

• width =>outlineWidth - 指定要在圆弧区域周围绘制的轮廓的宽度。

位图项目

位图类型的项目在显示器上显示为具有两种颜色（前景和背景）的图像。位图是使用以下形式的方法创建的 -

TkcBitmap.new (canvas, x, y, ?option, value, option, value, ...?)方法将用于创建位图。

参数 x 和 y 指定用于在显示器上定位位图的点的坐标。这是其他选项的描述 -

• anchor =>anchorPos - AnchorPos 告诉如何相对于项目的定位点定位位图。例如，如果anchorPos为center，则位图以该点为中心；如果anchorPos为n，那么将绘制位图，使其顶部中心点位于定位点。该选项默认为居中。

• background => color - 指定用于每个值为 0 的位图像素的颜色。

• bitmap => bitmap - 指定要在项目中显示的位图。

• foreground => color - 指定用于每个值为 1 的位图像素的颜色。

• Tags => tagList - 指定一组应用于该项目的标签。TagList 由标签名称列表组成，这些标签名称会替换该项目的任何现有标签。TagList 可能是一个空列表。

图像项目

图像类型的项目用于在画布上显示图像。图像是使用以下形式的方法创建的：：

TkcImage.new (canvas,x, y, ?option, value, option, value, ...?)方法将用于创建图像。

参数 x 和 y 指定用于在显示器上定位图像的点的坐标。这是其他选项的描述 -

• anchor =>anchorPos - AnchorPos 告诉如何相对于项目的定位点定位位图。例如，如果anchorPos为center，则位图以该点为中心；如果anchorPos为n，那么将绘制位图，使其顶部中心点位于定位点。该选项默认为居中。

• image => name - 指定要在项目中显示的图像的名称。该映像必须是之前使用 image create 命令创建的。

• Tags => tagList - 指定一组应用于该项目的标签。TagList 由标签名称列表组成，这些标签名称会替换该项目的任何现有标签。TagList 可能是一个空列表。

行项目

线类型的项目在显示屏上显示为一条或多条连接的线段或曲线。线条是使用以下形式的方法创建的 -

TkcLine.new (canvas, x1, y1..., xn, yn, ?option, value, ...?)方法将用于创建一条线。

参数 x1 到 yn 给出一系列两个或多个点的坐标，这些点描述一系列连接的线段。这是其他选项的描述 -

• arrow => where - 指示是否在线的一端或两端绘制箭头。其中必须具有以下值之一：none（对于没有箭头）、first（对于线的第一个点的箭头）、last（对于线的最后一个点的箭头）或两者（对于两端的箭头） ）。该选项默认为none。

• arrowshape => shape - 此选项指示如何绘制箭头。如果未指定此选项，则 Tk 会选择合理的形状。

• dash => pattern - 指定绘制线条的模式。

• capstyle => style - 指定在线端点处绘制大写的方式。可能的值为对接、突出或圆形。

• fill => color - Color 指定用于绘制线条的颜色。

• joinstyle => style - 指定在线顶点处绘制关节的方式。可能的值为斜角、斜接或圆形。

• smooth => boolean - 它指示是否应将线绘制为曲线。

• splinesteps => number - 指定曲线所需的平滑度：每个样条线将用数字线段近似。除非smooth选项为 true ，否则该选项将被忽略。

• stipple => bitmap - 指示线条应以点画图案填充；位图指定要使用的点画图案。

• Tags => tagList - 指定一组应用于该项目的标签。TagList 由标签名称列表组成，这些标签名称会替换该项目的任何现有标签。TagList 可能是一个空列表。

• width => lineWidth - 指定线的宽度。

矩形项目

矩形类型的项目在显示屏上显示为矩形区域。每个矩形可以有轮廓、填充或两者兼而有之。矩形是使用以下形式的方法创建的 -

TkcRectangle.new (canvas, x1, y1, x2, y2, ?option, value,...?)方法将用于创建一个矩形。

参数 x1、y1、x2 和 y2 给出矩形两个对角的坐标。这是其他选项的描述 -

• fill => color - 用颜色填充矩形区域。

• 轮廓 => 颜色- 以颜色绘制矩形边缘的轮廓。

• stipple => bitmap - 指示矩形应以点画图案填充；位图指定要使用的点画图案。

• Tags => tagList - 指定一组应用于该项目的标签。TagList 由标签名称列表组成，这些标签名称会替换该项目的任何现有标签。TagList 可能是一个空列表。

• width =>outlineWidth - 指定要在矩形周围绘制的轮廓的宽度。

事件绑定

Canvas 具有允许在必要时滚动的默认绑定：<Up>、<Down>、<Left> 和 <Right>（及其 <Control-*> 对应部分）。进一步<前>、<下>、<首页>和<结束>。这些绑定允许您以与其他可滚动小部件相同的方式进行导航。

实施例1

require "tk"

canvas = TkCanvas.new
TkcRectangle.new(canvas, '1c', '2c', '3c', '3c', 'outline' => 'black', 'fill' => 'blue')
TkcLine.new(canvas, 0, 0, 100, 100, 'width' => '2', 'fill' => 'red')
canvas.pack

Tk.mainloop

这将产生以下结果 -

实施例2

require 'tk'

root = TkRoot.new
root.title = "Window"

canvas = TkCanvas.new(root) do
   place('height' => 170, 'width' => 100, 'x' => 10, 'y' => 10)
end

TkcLine.new(canvas, 0, 5, 100, 5)
TkcLine.new(canvas, 0, 15, 100, 15, 'width' => 2)
TkcLine.new(canvas, 0, 25, 100, 25, 'width' => 3)
TkcLine.new(canvas, 0, 35, 100, 35, 'width' => 4)
TkcLine.new(canvas, 0, 55, 100, 55, 'width' => 3, 'dash' => ".")
TkcLine.new(canvas, 0, 65, 100, 65, 'width' => 3, 'dash' => "-")
TkcLine.new(canvas, 0, 75, 100, 75, 'width' => 3, 'dash' => "-.")
TkcLine.new(canvas, 0, 85, 100, 85, 'width' => 3, 'dash' => "-..")
TkcLine.new(canvas, 0, 105, 100, 105, 'width' => 2, 'arrow' => "first")
TkcLine.new(canvas, 0, 115, 100, 115, 'width' => 2, 'arrow' => "last")
TkcLine.new(canvas, 0, 125, 100, 125, 'width' => 2, 'arrow' => "both")
TkcLine.new(canvas, 10, 145, 90, 145, 'width' => 15, 'capstyle' => "round")
Tk.mainloop

这将产生以下结果 -

实施例3

require 'tk'

root = TkRoot.new
root.title = "Window"

canvas = TkCanvas.new(root) do
   place('height' => 170, 'width' => 100, 'x' => 10, 'y' => 10)
end

TkcRectangle.new(canvas, 10,  5,    55,  50, 'width' => 1)
TkcRectangle.new(canvas, 10,  65,  55, 110, 'width' => 5) 
TkcRectangle.new(canvas, 10,  125, 55, 170, 'width' => 1, 'fill'  => "red") 

Tk.mainloop

这将产生以下结果 -

实施例4

require 'tk'

root = TkRoot.new
root.title = "Window"

canvas = TkCanvas.new(root) do
   place('height' => 170, 'width' => 100, 'x' => 10, 'y' => 10)
end

TkcLine.new(canvas, 0,  10, 100,  10, 'width' => 10, 'fill' => "blue")
TkcLine.new(canvas, 0,  30, 100,  30, 'width' => 10, 'fill' => "red")
TkcLine.new(canvas, 0,  50, 100,  50, 'width' => 10, 'fill' => "green")
TkcLine.new(canvas, 0,  70, 100,  70, 'width' => 10, 'fill' => "violet")
TkcLine.new(canvas, 0,  90, 100,  90, 'width' => 10, 'fill' => "yellow")
TkcLine.new(canvas, 0, 110, 100, 110, 'width' => 10, 'fill' => "pink")
TkcLine.new(canvas, 0, 130, 100, 130, 'width' => 10, 'fill' => "orange")
TkcLine.new(canvas, 0, 150, 100, 150, 'width' => 10, 'fill' => "grey")
Tk.mainloop

这将产生以下结果 -