矢量图形（Vector）代码逻辑表示-CSDN博客

本文链接：https://blog.csdn.net/qq_33060405/article/details/147598680

下面详细介绍矢量图形（Vector）在代码中的逻辑表示，包括：

基本数据结构设计
常见图元的代码表示
组合与分组
属性与样式的表示
渲染/光栅化的基本思路
简单代码示例（Python伪代码）

1. 基本数据结构设计

矢量图形的本质是用对象/结构体来描述各种图元及其属性。常见的设计思路是：

每种图元（如点、线、圆、曲线、路径）用一个类/结构体表示
图元有自己的几何参数和样式属性
图形可以组合（如分组、层次结构）

2. 常见图元的代码表示

2.1 点（Point）

class Point:
    def __init__(self, x, y):
        self.x = x
        self.y = y

2.2 线段（Line）

class Line:
    def __init__(self, start: Point, end: Point, stroke_color="black", stroke_width=1):
        self.start = start
        self.end = end
        self.stroke_color = stroke_color
        self.stroke_width = stroke_width

2.3 圆（Circle）

class Circle:
    def __init__(self, center: Point, radius, fill_color="none", stroke_color="black", stroke_width=1):
        self.center = center
        self.radius = radius
        self.fill_color = fill_color
        self.stroke_color = stroke_color
        self.stroke_width = stroke_width

2.4 贝塞尔曲线（Cubic Bezier）

class CubicBezier:
    def __init__(self, p0: Point, p1: Point, p2: Point, p3: Point, stroke_color="black", stroke_width=1):
        self.p0 = p0
        self.p1 = p1
        self.p2 = p2
        self.p3 = p3
        self.stroke_color = stroke_color
        self.stroke_width = stroke_width

2.5 路径（Path）

路径可以由多个命令（MoveTo、LineTo、CurveTo等）组成：

class PathCommand:
    def __init__(self, cmd, points):
        self.cmd = cmd  # "M", "L", "C"等
        self.points = points  # [Point, ...]

class Path:
    def __init__(self, commands, fill_color="none", stroke_color="black", stroke_width=1):
        self.commands = commands  # [PathCommand, ...]
        self.fill_color = fill_color
        self.stroke_color = stroke_color
        self.stroke_width = stroke_width

3. 组合与分组

矢量图形常常支持分组（Group），便于层次化管理：

class Group:
    def __init__(self, elements):
        self.elements = elements  # [Line, Circle, Path, Group, ...]

4. 属性与样式的表示

每个图元通常有：

填充色（fill_color）
描边色（stroke_color）
线宽（stroke_width）
透明度（opacity）
变换（transform：平移、缩放、旋转等）

可以用属性或专门的样式类来管理。

5. 渲染/光栅化的基本思路

遍历所有图元
对每个图元，根据其几何参数和样式，调用底层绘图API（如canvas、OpenGL、Cairo等）进行绘制
变换（如缩放、旋转）可在渲染前应用到点坐标上

6. 简单代码示例（Python伪代码）

6.1 定义图元

# 定义一个红色圆和一条蓝色线
circle = Circle(center=Point(100, 100), radius=50, fill_color="red", stroke_color="black", stroke_width=2)
line = Line(start=Point(50, 50), end=Point(150, 150), stroke_color="blue", stroke_width=3)

6.2 组合成一个分组

group = Group([circle, line])

6.3 渲染函数（伪代码）

def render(element, canvas):
    if isinstance(element, Circle):
        canvas.draw_circle(element.center.x, element.center.y, element.radius,
                           fill=element.fill_color, stroke=element.stroke_color, width=element.stroke_width)
    elif isinstance(element, Line):
        canvas.draw_line(element.start.x, element.start.y, element.end.x, element.end.y,
                         color=element.stroke_color, width=element.stroke_width)
    elif isinstance(element, Group):
        for child in element.elements:
            render(child, canvas)
    # 其他图元类似

# 假设canvas是某个绘图库的画布对象
render(group, canvas)

7. 进阶：SVG导出

矢量图形的代码结构可以很容易导出为SVG：

def to_svg(element):
    if isinstance(element, Circle):
        return f'<circle cx="{element.center.x}" cy="{element.center.y}" r="{element.radius}" fill="{element.fill_color}" stroke="{element.stroke_color}" stroke-width="{element.stroke_width}"/>'
    elif isinstance(element, Line):
        return f'<line x1="{element.start.x}" y1="{element.start.y}" x2="{element.end.x}" y2="{element.end.y}" stroke="{element.stroke_color}" stroke-width="{element.stroke_width}"/>'
    elif isinstance(element, Group):
        return "<g>" + "".join([to_svg(child) for child in element.elements]) + "</g>"
    # 其他图元类似