矢量图形（Vector）表示-CSDN博客

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

1. 什么是矢量图形？

矢量图形（Vector Graphics）是一种用几何图元（如点、线、曲线、多边形等）来描述图像的方法。
与位图（Raster）不同，矢量图形不依赖像素网格，而是用数学公式精确描述形状和颜色。

2. 矢量图形的基本元素

矢量图形通常由以下基本元素组成：

点（Point）：二维空间中的一个位置，(x, y)。
线段（Line）：由两个点确定的直线。
多边形（Polygon）：由多个点首尾相连形成的封闭图形。
贝塞尔曲线（Bezier Curve）：用控制点描述的平滑曲线，常见有二次、三次贝塞尔曲线。
圆、椭圆、弧：用中心点、半径等参数描述。
路径（Path）：由线段和曲线组合而成的复杂图形。

每个图元还可以有填充色、描边色、线宽、透明度等属性。

3. 矢量图形的数学表示

在这里插入图片描述

4. 常见矢量图形文件格式

4.1 SVG（Scalable Vector Graphics）

基于XML的开放标准
可描述点、线、曲线、路径、文本、渐变、滤镜等

例子：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/>
  <rect x="10" y="10" width="30" height="30" fill="blue"/>
  <path d="M10 80 Q 95 10 180 80" stroke="green" fill="none"/>
</svg>

4.2 PDF、EPS、AI

PDF（Portable Document Format）：支持矢量和位图混合
EPS（Encapsulated PostScript）：主要用于印刷
AI（Adobe Illustrator）：Adobe专有格式

4.3 其他

WMF/EMF（Windows Metafile/Enhanced Metafile）
Flash（SWF，已淘汰）

5. 矢量图形的优缺点

优点

无损缩放：任意放大缩小都不会失真
文件体积小：复杂图形可用少量数据描述
易于编辑：可随时修改形状、颜色、大小
适合打印：高分辨率输出无锯齿

缺点

不适合表现复杂照片：难以表现自然界的细腻色彩和纹理
渲染复杂度高：显示时需实时计算图元，复杂图形渲染慢

6. 矢量图形的应用场景

Logo、图标、插画：需要无损缩放
字体（TrueType、OpenType）：字形用矢量描述
CAD、工程制图：精确描述结构
网页与UI设计：SVG广泛用于响应式图形
动画：如Flash、SVG动画

7. 矢量图形的渲染原理

显示时，矢量图形需“光栅化”（Rasterization），即将几何图元转换为屏幕像素。
现代浏览器、操作系统、图形库（如Skia、Cairo）都内置矢量渲染引擎。
GPU也支持矢量图形的加速渲染。

8. 矢量图形的代码示例

8.1 SVG代码示例

<svg width="200" height="100">
  <rect x="10" y="10" width="50" height="50" fill="orange" stroke="black"/>
  <circle cx="100" cy="50" r="30" fill="blue"/>
  <path d="M150 80 Q 180 10 200 80" stroke="green" fill="none"/>
</svg>

8.2 程序化描述（伪代码）

# 画一条三次贝塞尔曲线
def cubic_bezier(P0, P1, P2, P3, t):
    return (1-t)**3*P0 + 3*(1-t)**2*t*P1 + 3*(1-t)*t**2*P2 + t**3*P3

9. 小结

矢量图形用数学公式描述图像，支持无损缩放和高质量输出。
常见格式有SVG、PDF、AI等。
适合Logo、字体、插画、工程图等场景。
显示时需光栅化为像素，现代系统和浏览器均支持。

如需了解SVG语法细节、矢量图形与位图的转换、矢量动画实现等，欢迎继续提问！