数据表示基础：向量

单元 1 - ⇑ 数据表示基础 ⇑
← 位图	矢量图形	矢量和位图的比较 →

矢量图形 - 使用数学和几何学定义的图像，例如点、线、曲线和形状或多边形。支持可缩放性。

对象和属性以数学方式存储。

绘图列表 - 用于定义矢量图像的一组命令

向量由对象及其属性组成。对象是数学或几何定义的结构，例如矩形、直线、圆形或曲线。

<rect ... />
<line ... />
<circle ... />

每个对象都有属性来告诉您大小、颜色、位置等。例如 Shivam 方法。请查看下一个示例，了解绘图列表是如何从对象和属性构建的。

NoahTangle

辛普森圆

殖民弗洛林

图像

绘制
列表

<rect x="14" y="23"
 width="250" height="50"
 fill="green"
 stroke="black" stroke-width="1" />

<circle cx="100" cy="100" r="50"
 fill="red"
 stroke="black" stroke-width="5" />

  <rect
     width="100" height="80"
     x="0" y="70"
     fill="green" />
  <line
     x1="5" y1="5"
     x2="250" y2="95"
     stroke="red" />
  <circle
     cx="90" cy="80"
     r="50"
     fill="blue" />
   <text x="180" y="60">
     Un texte
   </text>

笔记

x 和 y 给出了左上角的起始位置

请注意，中心坐标通过 cx 和 cy 定义
r 给出了半径

请注意，圆形在顶部，这是因为它最后绘制。
要省略边缘描边，请不要添加 stroke 命令。
直线有起始点 x1、y1 和结束点 x2、y2 坐标。

扩展：SVG

存在多种矢量图形格式，但一种易于上手的格式是可缩放矢量图形 (SVG)。SVG 很容易创建，并且受所有现代主流 Web 浏览器支持。要创建 SVG，您需要在开头添加标签 <svg xmlns="http://www.w3.org/2000/svg"> 并在末尾添加 </svg>。将以下内容复制到文本文件并将其保存为 image.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <rect
     width="100" height="80"
     x="0" y="70"
     fill="green" />
  <line
     x1="5" y1="5"
     x2="250" y2="95"
     stroke="red" />
  <circle
     cx="90" cy="80"
     r="50"
     fill="blue" />
   <text x="180" y="60">
     Un texte
   </text>
</svg>

保存后，将其拖放到浏览器窗口中，您应该会看到一些形状。SVG 非常强大，您可以将代码附加到其结构，使其具有交互性。如果您想了解有关如何创建 SVG 的更多信息，请查看 w3schools

练习：矢量图形

什么是绘图列表

回答

用于定义矢量图像的单个命令

列出一些可以在矢量图形中使用的对象

回答

直线
椭圆形
矩形
圆形

列出显示矩形所需的属性

回答

x、y
宽度、高度
填充
描边（颜色）、描边宽度

列出显示直线所需的属性

回答

权重
长度
宽度
填充

给出矢量图像的定义

回答

使用基本矢量图形几何图形（如直线、椭圆或圆形）创建的可缩放图像。它可以无限缩放。

编写一个绘图列表来创建以下图像

回答

<rect
     width="1" height="1"
     x="2" y="1"
     fill="white" <!--optional you can leave this out-->
     stroke="black"
     stroke-width=1 /> <!--another small value will do-->
<rect
     width="1" height="1"
     x="11" y="0"
     fill="white" <!--optional you can leave this out-->
     stroke="black"
     stroke-width=1 />
<rect
     width="10" height="4"
     x="2" y="6"
     fill="black"
     stroke="red"
     stroke-width=5 /> <!--another small value will do-->
<circle
     cx="7" cy="5"
     r="2"
     fill="blue" />

以下绘图列表将生成什么？

<line
     x1="0" y1="0"
     x2="6" y2="6"
     stroke="red" />
<rect
     width="4" height="4"
     x="1" y="1"
     fill="yellow"
     stroke="green"
     stroke-width=1 />
<line
     x1="6" y1="0"
     x2="0" y2="6"
     stroke="black" />

回答

在上面的代码中，命名涉及的对象

回答

rect 和 line

在上面的代码中，列出 4 种不同的属性

回答

填充
描边
描边宽度
宽度
高度
X、Y