节点类型 API¶
本页面详细介绍所有节点类型的构造函数、属性和方法。
Rect¶
轴对齐矩形,左上角原点,y 轴向下。
from latticesvg import Rect
r = Rect(x=10, y=20, width=100, height=50)
print(r.right) # 110.0
print(r.bottom) # 70.0
r2 = r.copy()
| 属性 | 类型 | 说明 |
|---|---|---|
x |
float |
左上角 x 坐标(默认 0.0) |
y |
float |
左上角 y 坐标(默认 0.0) |
width |
float |
宽度(默认 0.0) |
height |
float |
高度(默认 0.0) |
right |
float |
只读,等价于 x + width |
bottom |
float |
只读,等价于 y + height |
| 方法 | 返回类型 | 说明 |
|---|---|---|
copy() |
Rect |
返回副本 |
LayoutConstraints¶
布局约束,从父节点传递给子节点。
from latticesvg import LayoutConstraints
c = LayoutConstraints(available_width=800, available_height=600)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
available_width |
float \| None |
None |
可用宽度 |
available_height |
float \| None |
None |
可用高度 |
Node(基类)¶
所有可布局元素的抽象基类。子类需要实现 measure() 和 layout()。
from latticesvg import Node
node = Node(style={"width": 100, "height": 50, "background": "#f0f0f0"})
构造参数¶
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
style |
dict[str, Any] \| None |
None |
CSS 样式属性字典 |
parent |
Node \| None |
None |
父节点(通常由 add() 自动设置) |
属性¶
| 属性 | 类型 | 说明 |
|---|---|---|
style |
ComputedStyle |
计算后的样式对象 |
parent |
Node \| None |
父节点 |
children |
list[Node] |
子节点列表 |
border_box |
Rect |
布局后的边框盒矩形 |
padding_box |
Rect |
布局后的内边距盒矩形 |
content_box |
Rect |
布局后的内容盒矩形 |
placement |
PlacementHint |
Grid 放置信息 |
方法¶
add(child, *, row=None, col=None, row_span=1, col_span=1, area=None)¶
将子节点添加到当前节点,可选地设置 Grid 放置位置。
| 参数 | 类型 | 说明 |
|---|---|---|
child |
Node |
要添加的子节点 |
row |
int \| None |
行起始位置(1-based CSS Grid 行号) |
col |
int \| None |
列起始位置(1-based CSS Grid 行号) |
row_span |
int |
跨行数(默认 1) |
col_span |
int |
跨列数(默认 1) |
area |
str \| None |
命名区域名称 |
返回值: 被添加的子节点(支持链式调用)
measure(constraints) → (min_w, max_w, intrinsic_h)¶
返回节点的最小内容宽度、最大内容宽度和固有高度。由 Grid 求解器调用。
layout(constraints)¶
计算 border_box、padding_box 和 content_box。子类必须实现。
GridContainer¶
CSS Grid 布局容器节点。将子节点排列为网格布局。
from latticesvg import GridContainer
grid = GridContainer(style={
"grid-template-columns": "200px 1fr",
"grid-template-rows": "auto auto",
"gap": 10,
"width": 600,
"padding": 20,
})
构造参数¶
继承自 Node,同样接受 style 和 parent 参数。display 自动设为 "grid"。
方法¶
layout(constraints=None, available_width=None, available_height=None)¶
运行完整的布局计算。作为根节点时可以直接传入可用宽度:
如果不提供 available_width,优先使用样式中的 width 属性,否则默认为 800。
measure(constraints) → (min_w, max_w, intrinsic_h)¶
用于嵌套 Grid 尺寸计算,结果会被缓存。
TextNode¶
文本节点,支持自动换行、富文本标记和垂直排版。
from latticesvg import TextNode
# 纯文本
text = TextNode("Hello, World!", style={"font-size": 24, "color": "#333"})
# HTML 富文本
rich = TextNode("<b>Bold</b> and <i>italic</i>", markup="html")
# Markdown 富文本
md = TextNode("**Bold** and *italic*", markup="markdown")
构造参数¶
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text |
str |
必填 | 文本内容 |
style |
dict \| None |
None |
样式属性 |
parent |
Node \| None |
None |
父节点 |
markup |
str |
"none" |
标记模式:"none", "html", "markdown" |
属性¶
| 属性 | 类型 | 说明 |
|---|---|---|
text |
str |
原始文本内容 |
markup |
str |
标记模式 |
lines |
list[Line] |
布局后的行列表(纯文本模式) |
关键样式属性¶
文本节点响应以下样式属性(详见 CSS 属性参考):
- 字体:
font-family,font-size,font-weight,font-style - 排版:
text-align,line-height,letter-spacing,word-spacing - 换行:
white-space,overflow-wrap,hyphens,lang - 溢出:
overflow,text-overflow - 垂直:
writing-mode,text-orientation,text-combine-upright
ImageNode¶
图片节点,支持多种图片来源和 object-fit 缩放模式。
from latticesvg import ImageNode
# 文件路径
img = ImageNode("photo.png", style={"width": 200, "height": 150})
# URL
img = ImageNode("https://example.com/image.png")
# bytes
img = ImageNode(raw_bytes, object_fit="contain")
# PIL Image
from PIL import Image
img = ImageNode(Image.open("photo.png"), object_fit="cover")
构造参数¶
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src |
str \| bytes \| PIL.Image |
必填 | 图片源(路径/URL/bytes/PIL) |
style |
dict \| None |
None |
样式属性 |
parent |
Node \| None |
None |
父节点 |
object_fit |
str \| None |
None |
缩放模式 |
object-fit 模式¶
| 值 | 说明 |
|---|---|
"fill" |
拉伸填满(默认,可能变形) |
"contain" |
等比缩放,完全包含在区域内 |
"cover" |
等比缩放,完全覆盖区域 |
"none" |
原始尺寸,不缩放 |
属性¶
| 属性 | 类型 | 说明 |
|---|---|---|
intrinsic_width |
float |
图片固有宽度(只读,惰性加载) |
intrinsic_height |
float |
图片固有高度(只读,惰性加载) |
SVGNode¶
嵌入外部 SVG 内容的节点。
from latticesvg import SVGNode
# SVG 字符串
svg = SVGNode('<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>')
# 文件
svg = SVGNode("icon.svg", is_file=True)
# URL
svg = SVGNode("https://example.com/icon.svg")
构造参数¶
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
svg |
str |
必填 | SVG 内容(字符串/路径/URL) |
style |
dict \| None |
None |
样式属性(仅限关键字参数) |
parent |
Node \| None |
None |
父节点(仅限关键字参数) |
is_file |
bool |
False |
是否视为文件路径(仅限关键字参数) |
SVG 的固有尺寸从 viewBox 或 width/height 属性解析。
MplNode¶
Matplotlib 图形嵌入节点。
import matplotlib.pyplot as plt
from latticesvg import MplNode
fig, ax = plt.subplots(figsize=(4, 3))
ax.plot([1, 2, 3], [1, 4, 9])
node = MplNode(fig, style={"padding": 10})
构造参数¶
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
figure |
matplotlib.figure.Figure |
必填 | Matplotlib 图形对象 |
style |
dict \| None |
None |
样式属性 |
parent |
Node \| None |
None |
父节点 |
注意事项
- 所有 Matplotlib 自定义应在创建节点之前完成
- 布局时会根据分配的空间自动调整 figure 大小
- SVG 坐标统一使用 72 DPI
MathNode¶
LaTeX 公式渲染节点,基于 QuickJax(MathJax v4)。
from latticesvg import MathNode
# display 模式(独立公式)
formula = MathNode(r"E = mc^2", style={"font-size": 24})
# inline 模式
inline = MathNode(r"\alpha + \beta", display=False)
构造参数¶
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
latex |
str |
必填 | LaTeX 数学表达式 |
style |
dict \| None |
None |
样式属性(仅限关键字参数) |
backend |
str \| None |
None |
后端名称,None 使用默认(仅限关键字参数) |
display |
bool |
True |
是否为 display 模式(仅限关键字参数) |
parent |
Node \| None |
None |
父节点(仅限关键字参数) |
属性¶
| 属性 | 类型 | 说明 |
|---|---|---|
latex |
str |
LaTeX 源码 |
display |
bool |
display/inline 模式 |
scale_x |
float |
布局后的水平缩放因子 |
scale_y |
float |
布局后的垂直缩放因子 |
自动生成的 API 文档¶
nodes ¶
Node ¶
Abstract base for all layoutable elements.
Subclasses must implement :meth:measure and :meth:layout.
Source code in src/latticesvg/nodes/base.py
add ¶
add(child: 'Node', *, row: Optional[int] = None, col: Optional[int] = None, row_span: int = 1, col_span: int = 1, area: Optional[str] = None) -> 'Node'
Append child to this node and optionally set grid placement.
row and col use 1-based line numbers consistent with CSS Grid.
area places the child in a named grid area defined by
grid-template-areas on the container.
Source code in src/latticesvg/nodes/base.py
measure ¶
Return (min_content_width, max_content_width, intrinsic_height).
Called by the grid solver to determine how much space this node needs. Default implementation returns zero sizes.
Source code in src/latticesvg/nodes/base.py
layout ¶
Compute border_box, padding_box, and content_box.
Must be implemented by subclasses.
Rect
dataclass
¶
An axis-aligned rectangle (top-left origin, y-axis points down).
LayoutConstraints
dataclass
¶
LayoutConstraints(available_width: Optional[float] = None, available_height: Optional[float] = None)
Constraints passed from parent to child during layout.
GridContainer ¶
Bases: Node
A container node that arranges its children using CSS Grid layout.
Delegates the heavy-lifting (track sizing, placement, alignment)
to :class:~latticesvg.layout.grid_solver.GridSolver.
Source code in src/latticesvg/nodes/grid.py
layout ¶
layout(constraints: Optional[LayoutConstraints] = None, available_width: Optional[float] = None, available_height: Optional[float] = None) -> None
Run the full layout pass for this container and all descendants.
Can be called directly as grid.layout(available_width=800).
Source code in src/latticesvg/nodes/grid.py
TextNode ¶
TextNode(text: str, style: Optional[Dict[str, Any]] = None, parent: Optional[Node] = None, markup: str = 'none')
Bases: Node
A node that displays text content.
The text is measured using FreeType (or Pillow fallback) and
automatically wrapped according to the white-space property.
When markup is "html" or "markdown", inline tags/syntax
are parsed to produce styled spans (bold, italic, colour, …).
Source code in src/latticesvg/nodes/text.py
measure ¶
Return (min_content_width, max_content_width, intrinsic_height).
For vertical/sideways writing modes the axes are swapped internally so that the grid solver always receives values in the physical (horizontal/vertical) coordinate system.
The result is cached because it depends only on text content and style properties, not on constraints.
Source code in src/latticesvg/nodes/text.py
164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 | |
ImageNode ¶
ImageNode(src: Union[str, bytes, Any], style: Optional[Dict[str, Any]] = None, parent: Optional[Node] = None, object_fit: Optional[str] = None)
Bases: Node
Node that displays a raster image (PNG, JPEG, etc.).
The image's intrinsic size is read lazily via Pillow. The
object-fit property controls how the image is scaled within the
allocated space.
| PARAMETER | DESCRIPTION |
|---|---|
src
|
Image source: - File path (str) - URL starting with 'http://' or 'https://' (str) - Raw image bytes (bytes) - PIL Image object
TYPE:
|
style
|
Style properties
TYPE:
|
parent
|
Parent node
TYPE:
|
object_fit
|
Object-fit mode ('fill', 'contain', 'cover', 'none')
TYPE:
|
Source code in src/latticesvg/nodes/image.py
get_base64 ¶
Return the image as a base64-encoded data URI.
Source code in src/latticesvg/nodes/image.py
MplNode ¶
MplNode(figure: Any, style: Optional[Dict[str, Any]] = None, parent: Optional[Node] = None, auto_mpl_font: bool = True, tight_layout: bool = True)
Bases: Node
Node that embeds a Matplotlib figure as an SVG fragment.
The figure is rendered to an in-memory SVG buffer during the render phase, so all Matplotlib customisation should be done before creating this node.
| PARAMETER | DESCRIPTION |
|---|---|
figure
|
A
TYPE:
|
style
|
Optional CSS-like style dictionary.
TYPE:
|
parent
|
Optional parent node.
TYPE:
|
auto_mpl_font
|
When
TYPE:
|
tight_layout
|
When
TYPE:
|
Source code in src/latticesvg/nodes/mpl.py
get_svg_fragment ¶
Export the figure to an SVG string (cached).
When auto_mpl_font is enabled the inherited font-family
CSS property is translated into matplotlib rcParams so that
text inside the figure uses matching fonts. svg.fonttype is
always set to "path" so that glyphs are converted to vector
paths for cross-platform consistency.
Source code in src/latticesvg/nodes/mpl.py
SVGNode ¶
SVGNode(svg: str, *, style: Optional[Dict[str, Any]] = None, parent: Optional[Node] = None, is_file: bool = False)
Bases: Node
Node that embeds raw SVG content (from a string or file).
The SVG's viewBox or width/height attributes are used to
determine its intrinsic size. During rendering the content is scaled
to fit the allocated space.
| PARAMETER | DESCRIPTION |
|---|---|
svg
|
SVG source: - File path (when is_file=True) - URL starting with 'http://' or 'https://' - Raw SVG string
TYPE:
|
style
|
Style properties
TYPE:
|
parent
|
Parent node
TYPE:
|
is_file
|
If True, treat svg as a file path. Default False.
TYPE:
|
Source code in src/latticesvg/nodes/svg.py
get_inner_svg ¶
Return SVG content with the outer <svg> wrapper stripped.
This is used for embedding inside another SVG document.
Presentation attributes (fill, stroke, etc.) from the outer
<svg> element are preserved by wrapping inner content in
a <g> that carries those attributes forward.
Source code in src/latticesvg/nodes/svg.py
MathNode ¶
MathNode(latex: str, *, style: Optional[Dict[str, Any]] = None, backend: Optional[str] = None, display: bool = True, parent: Optional[Node] = None)
Bases: Node
Node that renders a LaTeX math expression to SVG.
By default the QuickJax backend (in-process MathJax v4) is used.
A different backend can be selected per-node or globally via
:func:latticesvg.math.set_default_backend.
Usage::
formula = MathNode(r"E = mc^2", style={"font-size": "20px"})