数据表示基础：矢量
矢量图形 - 使用数学和几何定义的图像，如点、线、曲线和形状或多边形。允许缩放。
以数学方式存储对象和属性。
绘图列表 - 用于定义矢量图像的一组命令
 |
如果你喜欢使用 SVG，请查看 inkscape |
矢量图形由对象及其属性组成。对象是数学或几何定义的结构，如矩形、线或圆。
<rect ... />
<line ... />
<circle ... />
每个对象都有属性来告诉您大小、颜色、位置等。查看下一个示例以了解绘图列表是如何从对象和属性构建的。
| 矩形 | 圆形 | 组合 | |
|---|---|---|---|
| 图像 |  |
 |
|
| 绘图 列表 |
<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">
<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 |
|
练习：矢量图形 什么是绘图列表 答案 用于定义矢量图像的一组命令
给出一些可用于矢量图形的对象 答案
给出显示矩形所需的属性 答案
给出显示线所需的属性 答案
给出矢量图像的定义 答案 使用数学和几何定义的图像，如点、线、曲线和形状或多边形。允许缩放 编写一个绘图列表来创建以下图像  答案 <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 个不同的属性 答案
|
