GG 库使用指南

github.com/fogleman/gg 是一个用纯 Go 编写的 2D 图形渲染库,提供类似 HTML5 Canvas 的 API。

安装

go get -u github.com/fogleman/gg


核心 API


1. Context 创建

dc := gg.NewContext(width, height)          // 新建上下文

dc := gg.NewContextForRGBA(img)            // 基于图像创建


2. 基本图形绘制

dc.DrawRectangle(x, y, w, h)       // 矩形

dc.DrawRoundedRectangle(x, y, w, h, r)  // 圆角矩形 (圆角半径 r)

dc.DrawCircle(x, y, r)          // 圆形

dc.DrawEllipse(x, y, rx, ry)       // 椭圆

dc.DrawLine(x1, y1, x2, y2)        // 直线

dc.DrawArc(x, y, r, angle1, angle2)    // 圆弧 (弧度)


3. 路径操作

dc.MoveTo(x, y)          // 移动到起点

dc.LineTo(x, y)          // 添加到点

dc.QuadraticTo(cp1x, cp1y, x, y) // 二次贝塞尔曲线

dc.CubicTo(cp1x, cp1y, cp2x, cp2y, x, y) // 三次贝塞尔曲线

dc.ClosePath()          // 闭合路径

dc.ClearPath()          // 清除路径


4. 填充和描边

dc.Fill()     // 填充路径(填充后清除路径)

dc.Stroke()    // 描边路径(描边后清除路径)


5. 颜色设置

dc.SetRGB(r, g, b)        // RGB (0-1)

dc.SetRGBA(r, g, b, a)      // RGBA (0-1)

dc.SetRGB255(r, g, b)       // RGB (0-255)

dc.SetRGBA255(r, g, b, a)     // RGBA (0-255)

dc.SetHexColor("#FF0000")     // 十六进制颜色

dc.SetColor(color.Color)     // 标准颜色


6. 渐变

// 线性渐变

gradient := gg.NewLinearGradient(x0, y0, x1, y1)

gradient.AddColorStop(0, color.White)

gradient.AddColorStop(1, color.Black)

dc.SetFillStyle(gradient)


// 径向渐变

gradient := gg.NewRadialGradient(x0, y0, r0, x1, y1, r1)

gradient.AddColorStop(0, color.White)

gradient.AddColorStop(1, color.Black)

dc.SetFillStyle(gradient)


7. 描边选项

dc.SetLineWidth(width)      // 线宽

dc.SetLineCap(gg.LineCapRound)  // 线端样式 (LineCapRound, LineCapButt, LineCapSquare)

dc.SetLineJoin(gg.LineJoinRound) // 线连接样式 (LineJoinRound, LineJoinBevel)

dc.SetDash(5, 5)         // 虚线 (实线 5 像素,空白 5 像素)

dc.SetDashOffset(offset)     // 虚线偏移


8. 变换

dc.Translate(x, y)           // 平移

dc.Scale(x, y)             // 缩放

dc.Rotate(angle)            // 旋转(弧度,顺时针)

dc.RotateAbout(angle, cx, cy)      // 绕点旋转

dc.ScaleAbout(sx, sy, cx, cy)      // 绕点缩放

dc.Shear(x, y)             // 剪切

dc.Identity()              // 重置变换矩阵

dc.Push()                // 保存状态

dc.Pop()                // 恢复状态

dc.InvertY()              // 反转 Y 轴


9. 文字操作

// 加载字体(需要字体文件路径)

err := dc.LoadFontFace("path/to/font.ttf", fontSize)


// 绘制文字

dc.DrawString(text, x, y)              // 默认左对齐

dc.DrawStringAnchored(text, x, y, ax, ay)      // 锚点对齐 (0-1)

dc.DrawStringWrapped(text, x, y, ax, ay, maxWidth, lineSpacing, align) // 自动换行


// 测量文字

width, height := dc.MeasureString(text)


// 对齐常数

align := gg.AlignLeft   // 左对齐

align := gg.AlignCenter  // 居中对齐

align := gg.AlignRight  // 右对齐


10. 图像操作

// 加载图像

img, err := dc.LoadImage(path)

img, err := dc.LoadPNG(path)

img, err := dc.LoadJPG(path)


// 绘制图像

dc.DrawImage(img, x, y)

dc.DrawImageAnchored(img, x, y, ax, ay) // 锚点上


// 保存图像

dc.SavePNG(path)             // 保存 PNG

dc.SaveJPG(path, img, quality)      // 保存 JPG

dc.EncodePNG(w io.Writer) error     // 编码到 writer


11. 裁剪

dc.Clip()      // 路径变为裁剪区域

dc.ResetClip()   // 清除裁剪

dc.AsMask()     // 获取 Alpha 通道


12. 其他工具

dc.Width() int        // 画布宽度

dc.Height() int       // 画布高度

dc.Image() image.Image    // 获取图像

dc.SetPixel(x, y int)    // 设置单像素

dc.Clear()          // 清空画布


gg.Radians(degrees)     // 角度转弧度

gg.Degrees(radians)     // 弧度转角度


完整示例

绘制带渐变和文字的按钮

package main


import (

  "image/color"

  "github.com/fogleman/gg"

)


func DrawButton(dc *gg.Context, x, y, width, height float64, text string) {

  // 渐变背景

  gradient := gg.NewLinearGradient(x, y, x, y+height)

  gradient.AddColorStop(0, color.RGBA{66, 133, 244, 255})  // #4285F4

  gradient.AddColorStop(1, color.RGBA{41, 128, 220, 255})  // #2980dc

  dc.SetFillStyle(gradient)


  // 绘制圆角矩形

  dc.DrawRoundedRectangle(x, y, width, height, 4)

  dc.Fill()


  // 描边

  dc.SetRGB255(33, 102, 208) // #2166d0

  dc.SetLineWidth(1)

  dc.DrawRoundedRectangle(x, y, width, height, 4)

  dc.Stroke()


  // 文字

  dc.LoadFontFace("/path/to/font.ttf", 14)

  dc.SetRGB255(255, 255, 255)

  dc.DrawStringAnchored(text, x+width/2, y+height/2, 0.5, 0.5)

}


旋转效果示例

dc := gg.NewContext(200, 200)

dc.SetRGB(1, 1, 1)

dc.Clear()


for i := 0; i < 36; i++ {

  dc.Push()

  dc.Translate(100, 100)

  dc.Rotate(gg.Radians(float64(i) * 10))

  dc.SetRGB(float64(i)/36, float64(36-i)/36, 0.5)

  dc.DrawRectangle(-50, -5, 100, 10)

  dc.Fill()

  dc.Pop()

}


dc.SavePNG("fan.png")


性能提示

批量绘制:多次 Push()/Pop() 会降低性能

字体缓存:字体加载昂贵,应缓存已加载的字体

图像优化:大图像考虑预缩放

路径合并:多个图形合并为一条路径减少 Fill() 次数


局限性

不支持透明度混合模式

不支持矢量字体(需自行加载)

不支持硬件加速(纯软件渲染)

无动画支持(需手动实现)


常见问题

Q: 文字模糊怎么办? A: 使用高 DPI,绘制后缩放:


scale := 2.0

dc := gg.NewContext(int(width*scale), int(height*scale))

dc.Scale(scale, scale)


// 绘制...


Q: 如何绘制中文? A: 需要加载支持中文的字体文件(如 SimHei.ttf)


Q: 性能如何提升? A: 避免频繁 LoadFontFace(),批量绘制,减少状态保存/恢复



相关资源

源码:https://github.com/fogleman/gg

文档:https://pkg.go.dev/github.com/fogleman/gg

示例:https://github.com/fogleman/gg/tree/master/_examples

© GVGNN 2013-2026