如何在CeTZ中创建尺寸适配内容的容器？

要实现自动适配内容尺寸的容器，核心思路是先通过measure()函数获取内容的边界框（BBox），再根据边界框的尺寸和位置计算容器的参数，最后绘制容器并放置内容。以下是不同容器类型的具体实现：

1. 适配内容的矩形容器 #

#import "@preview/cetz:0.2.2"
#import cetz.draw: *
#import cetz.styles: *

#cetz.canvas({
  import cetz.draw: *
  
  // 定义适配内容的矩形容器函数，支持自定义内边距
  let fit-rect(content, padding: 0.2) = {
    // 测量内容的边界框，获取宽高、中心等信息
    let bbox = measure(content)
    // 计算矩形的中心位置（与内容中心对齐）和尺寸（内容尺寸+两倍内边距）
    let rect-center = bbox.center
    let rect-size = (bbox.width + 2*padding, bbox.height + 2*padding)
    // 绘制矩形容器
    rect(rect-center, size: rect-size, fill: white, stroke: black)
    // 绘制内容，确保居中
    content(pos: rect-center)
  }
  
  // 使用示例
  fit-rect(content((0,0), "这是适配内容的矩形容器"))
})

2. 适配内容的圆形/椭圆容器 #

#import "@preview/cetz:0.2.2"
#import cetz.draw: *
#import cetz.styles: *

#cetz.canvas({
  import cetz.draw: *
  
  // 适配内容的椭圆容器
  let fit-ellipse(content, padding: 0.2) = {
    let bbox = measure(content)
    let center = bbox.center
    // 椭圆半轴 = 内容对应维度的一半 + 内边距
    let rx = bbox.width/2 + padding
    let ry = bbox.height/2 + padding
    ellipse(center, rx: rx, ry: ry, fill: white, stroke: black)
    content(pos: center)
  }
  
  // 适配内容的圆形容器（取内容宽高最大值作为直径基准）
  let fit-circle(content, padding: 0.2) = {
    let bbox = measure(content)
    let center = bbox.center
    let radius = max(bbox.width, bbox.height)/2 + padding
    circle(center, radius: radius, fill: white, stroke: black)
    content(pos: center)
  }
  
  // 使用示例
  fit-ellipse(content((0,0), "椭圆容器适配内容"))
  fit-circle(content((5,0), "圆形容器，内容更长也能适配"))
})

3. 适配内容的等腰三角形容器 #

#import "@preview/cetz:0.2.2"
#import cetz.draw: *
#import cetz.styles: *

#cetz.canvas({
  import cetz.draw: *
  
  // 适配内容的等腰三角形容器，支持自定义内边距和高宽比
  let fit-triangle(content, padding: 0.3, aspect-ratio: sqrt(3)/2) = {
    let bbox = measure(content)
    let center = bbox.center
    // 计算三角形底边长度（内容宽度+两倍内边距）
    let base = bbox.width + 2*padding
    // 三角形高度取「内容高度+内边距」和「底边*高宽比」的较大值，保证内容容纳
    let height = max(bbox.height + 2*padding, base * aspect-ratio)
    // 定义三角形三个顶点（与内容中心对齐）
    let points = (
      center + (-base/2, -height/2),
      center + (base/2, -height/2),
      center + (0, height/2)
    )
    polygon(points, fill: white, stroke: black)
    content(pos: center)
  }
  
  // 使用示例
  fit-triangle(content((0,0), "三角形容器适配内容"))
})

关键说明 #

• measure()是核心函数，它能获取内容的边界框对象，包含width（宽度）、height（高度）、center（中心坐标）等属性
• 通过padding参数可以灵活控制内容与容器的间距，避免内容贴边
• 所有容器函数都可复用，无需为每个内容手动计算尺寸
• 确保内容与容器中心对齐，保证内容在容器内居中显示

内容的提问来源于stack exchange，提问作者Rainb