画图和动画 on 菠萝学

矩形 Rectangle

poloxue123@gmail.com (POLO XUE) — Thu, 02 Jan 2025 00:00:00 +0000

canvas.Rectangle 是 Fyne 中最简单的画布对象。它显示指定颜色的区块。您也可以使用 FillColor 字段设置颜色。

在这个示例中，矩形填充了窗口，因为它是唯一的内容元素。

package main

import (
	"image/color"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
)

func main() {
	myApp := app.New()
	w := myApp.NewWindow("矩形")

	rect := canvas.NewRectangle(color.White)
	w.SetContent(rect)

	w.Resize(fyne.NewSize(150, 100))
	w.ShowAndRun()
}

其他的 fyne.CanvasObject 类型有更多的配置，让我们接下来看看 canvas.Text。

文本 Text

poloxue123@gmail.com (POLO XUE) — Sun, 05 Jan 2025 00:00:00 +0000

canvas.Text 用于 Fyne 内的所有文本渲染。它通过指定文本和文本颜色来创建。文本使用当前主题指定的默认字体渲染。

文本对象允许某些配置，如 Alignment 和 TextStyle 字段，如此示例中所示。如果你想使用等宽字体，可以指定 fyne.TextStyle{Monospace: true}。

线条 Line

poloxue123@gmail.com (POLO XUE) — Wed, 08 Jan 2025 00:00:00 +0000

canvas.Line 对象从 Position1（默认是左上角）画到 Position2（默认是右下角）。你可以指定它的颜色，并且可以改变笔触宽度，否则默认为 1。

线的位置可以使用 Position1 或 Position2 字段，或者使用 Move() 和 Resize() 函数来操作。例如，宽度为 0 的区域会显示为垂直线，而高度为 0 则会是水平线。

圆 Circle

poloxue123@gmail.com (POLO XUE) — Sat, 11 Jan 2025 00:00:00 +0000

canvas.Circle 定义了一个由指定颜色填充的圆形。您还可以设置 StrokeWidth，因此显示不同的 StrokeColor，如此示例中所示。

圆形将填充通过调用 Resize() 或由其控制的布局指定的空间。由于示例将圆形设置为窗口内容，它将调整大小以填充窗口，存在基本的内边距（由主题控制）。

图片 Image

poloxue123@gmail.com (POLO XUE) — Tue, 14 Jan 2025 00:00:00 +0000

canvas.Image 在 Fyne 中代表一个可缩放的图像资源。它可以从资源（如示例所示）、图像文件、包含图像的 URI 位置、io.Reader 或内存中的 Go image.Image 加载。

默认的图像填充模式是 canvas.ImageFillStretch，它会导致图像填充指定的空间（通过 Resize() 或布局）。或者，你可以使用 canvas.ImageFillContain 以确保保持纵横比并且图像在边界内。此外，你可以使用 canvas.ImageFillOriginal（如此示例中所用），以确保它也具有等于原始图像大小的最小尺寸。

矢量 Raster

poloxue123@gmail.com (POLO XUE) — Fri, 17 Jan 2025 00:00:00 +0000

canvas.Raster 类似于图像，但在屏幕上为每个像素精确绘制一个点。这意味着，随着用户界面缩放或图像调整大小，将请求更多像素来填充空间。为此，我们使用一个 Generator 函数，如此示例所示——它将用于返回每个像素的颜色。

渐变 Gradient

poloxue123@gmail.com (POLO XUE) — Mon, 20 Jan 2025 00:00:00 +0000

最后一个画布原始类型是 Gradient，可用作 canvas.LinearGradient 和 canvas.RadialGradient，用于绘制从一种颜色到另一种颜色的渐变，有多种模式。你可以使用 NewHorizontalGradient()、NewVerticalGradient() 或 NewRadialGradient() 创建渐变。

动画 Animation

poloxue123@gmail.com (POLO XUE) — Thu, 23 Jan 2025 00:00:00 +0000

Fyne 包含一个动画框架，允许您在一段时间内平滑地过渡画布属性从一个值到另一个值。动画可以包含任何代码，这意味着可以管理任何类型的对象属性，但是内置了尺寸、位置和颜色的动画。